Udacity Referral Program

A journey to find a permanent home for Udacity’s referral system.

Overview

I joined Udacity for my summer internship in Jul 2018 on the careers team. During my internship, I worked on three distinct projects and this was my first project where the prompt was to find the permanent home for Udacity’s referral system.

My Role

I was given the chance to own and design the referral homepage under the mentorship of a senior designer.

I worked in a cross-functional team of PM, Engineers, Community Managers, etc. In the first few weeks I did research and came up with an access point and user flow and in the later weeks I explored the UI design and worked with the developer to implement them.

Timeline

Jun 17 - Jul 18

Problem

Udacity’s referral program was up and ready but somehow it wasn’t gaining as much of traction as expected. Through the research I found out there were two distinct problems.

Problem 1

Email campaigns and information loss

Referral program was introduced to the alumni through email campaigns. These emails were sent to them once they graduate. And after initial emails, the number of referrals go down.

Problem 2

No permanent access point

There was no other access point inside the product through which users could access the referral program, resulting in less traction.

Cross-functional team

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

Process

With every project, process changes, but few things remain constant, understanding the user and business problem, communicating with stakeholders and lots of design iterations.

Competitive analysis and feature list 

To create a feature list and study industries’ best practices, I did a competitive analysis and came up with features that would be helpful for users.

Before presenting the feature list to the stakeholders, I ran it through a developer to see if these features are implementable or not.

In search of access points

Referral program was specifically aimed for alumni so I studied their graduation journey and mapped prospective opportunities for access points for a referral program.

These access point exploration also gave me an opportunity to explore different use cases.

Early sketches

I started designing some ideas for all these access points because visuals speak louder than text. These sketches helped me in getting other stakeholder’s views to see what is possible and what is not.

Access Point 1

While Graduating

Students have to go through three mandatory steps for them to graduate, so one additional step where visibility will be more clear.

It also looked out of place and we ended up discarding this one.

Access Point 2

While taking survey

After students complete their ND, they have to take a survey to rate the ND program, and there was a relevant question where they have to answer if they’ll refer it to their friend.

We ended up not implementing this because we observed that students are in hurry to take the survey and they’d not care about this option.

Access Point 3

After Graduating

Another access point was on the final graduation page, where students get their certificate when they finally graduate. This point of the journey is one of the points where they get most excited about, so I thought they’d be most excited to share their joy with their friends.

Ended up implementing this one. This design was implemented by me and is live in production.

Access Point 4

Permanent Home

Settings page made a perfect home for the referral page as it was intrinsic to the core product flow and quite accessible.

This design also made it to production and has received quite a bit of attention from our users. 

Visual explorations

Among the explorations, we finalized to implement access point 3 and permanent home. So I started the visual exploration on those inputs.

Udacity’s design system ‘Veritas’ was already a big help for starting off. I started playing with layouts and colors to find the right information hierarchy.

Final designs

Prototype

After graduation

Eyebrow interaction ended up gaining more traction because this is where our students were most ecstatic and wanted to share their joy with others too.

Prototype

Permanent home in settings

I used this protoype to convey the final idea and explain the functioanlity to our engineering team.

Other case studies