Alumni Portal

Designing the permanent home for Udacity’s alumni

Overview

This is one of the most challenging projects that I worked on at Udacity. Alumni community is one of the key differentiators of Udacity from its competitors. Udacity interns (PM, Software Engineering & Design) tackled this project head on and shipped Alumni home in record time. 

My Role

I was given the chance to own and design the alumni portal under the guidance of the senior designer.

I worked in a cross-functional team of Sr. PM, Engineers, Community Managers, etc.

My responsibilities included research, user experience, interaction, and visual design.

Timeline

Jul-Aug 2018

Udacity Alumni Journey

To understand more about desinging for Udacity's alumni, I started with plotting the journey of Alumni. It gave me more context about alumni's background, where they come from and what is their ultimate goal.

alumniJourney

Problem

Udacity produces different types of content to help our alumni in different ways. It’s in the form of webinars, organizing events, successful alumni stories, and other different resources. But there’s one problem, the content is scattered all over the internet.

Problem 1

Scattered Content

Content that is created for alumni is scattered all over the place. Videos and webinars are on youtube, event information is on Eventbrite, Surveys, and resources on various social media groups

scatteredContent
groupnumber

Problem 2

Fewer alumni join social media groups

Alumni are invited to join social media groups via an email, and once that email is lost then those links to join is lost too, thus resulting in the fewer number of people joining social media groups.

Cross-functional team

Working with a cross-functional team was a great advantage in terms of getting quick feedback from the product team and stakeholder, it helped things move quickly and create impactful designs.

Team Alumni

Process

Since lots of stakeholders were part of this project, my first step was to talk with everyone and get everyone’s ideas together. Next step was to know more about users and their needs. In this case, I was designing for Udacity’s Alumni as well as Community Managers who were going to update the content.

alumniPortalDesignProcess

User research

Balancing what users wanted and what stakeholders wanted was one of the challenging parts of the project. Surveys and qualitative research helped me a lot in getting the user’s perspective and putting it in front of the stakeholders.

userResearch

"My job hunt (aided by some great content on resumes and networking on Udacity) ultimately ended last week. I’ve accepted, and started, a position as the Associate Director of the Center for Entrepreneurship at ASU’s W. P. Cary School of Business."
-Udacity Alumni

Two users & CMS

One of the challenges was to manage two different user’s expectations and design in the constraint of CMS.

twoUsers

Initial ideas and mockups

My initial ideas included pushing for the customized portal which will have all the content catered towards their Nanodegrees. Feedback from the stakeholders helped in shaping the subsequent mockups.

alumnilowfimocks

Visual design

I moved to the visual design stage after having positive feedback from Community Managers and Engineers.

alumnisecondmocks

Feedback And Iterations

I presented these design in our weekly design critique and got feedback that this design looks quite cramped and images you are using doesn’t necessarily go with our brand. Which I thought were right and incorporated the feedback in the next iteration.

Some more iterations

This iteration was more positively accepted and also gave me more freedom to direct the user’s attention using visual hierarchy.

alumnithirdmocks

And then some more :) 

Once the layout and element order was finalized, I iterated more on each element and pressure tested them: What should be max/min text length? how would it look with light/dark colored photos? How would it look in edge case scenarios?

alumnielementiteration

Nitpicking

Navbar click that takes you down to a particular section and referral link that takes you to other pages.

navbar

Final designs

The final design was widely accepted but didn’t come as surprise to stakeholders, an engineer and I were working on the elements side by side. Which helped in pushing the design to staging at the faster rate.

FinalDesignAlumni

Other case studies

ReferralProjThumb
screenlessTypingProjThumb
missionControlThumb