Invite a Friend Experience Redesign

ROLE: DESIGNER  |  DURATION: 2 WEEKS

New Invite Friends page experience

 

Background

Invite a Friend is a cross-platform experience that encourage clients to refer their families and friends to use Wealthfront. The desktop experience was one of the oldest that need to be redesigned, because of limited functionalities and inconsistency with our latest design system. So I worked with one product manager, one front-end engineer and our client service team to redesign this page and launched it as an A/B test experiment. It took around two weeks from design to implementation. 

While designing the desktop experience, I also designed the mobile responsive and improved native mobile app experience as well, considering the feature as a whole.

Old Invite Friends page experience


How to encourage more invites?

"What benefits I will get if I invite friends?"
When client's asset amount exceed $10,000, they will need to pay advisory fee. The benefit Wealthfront provides to encourage clients to invite more friends is "to get additional $5,000 for each of your friend that you've invited and successfully funded the account".

"How do I send invite to friends"
Clients using our desktop experience tend to spend more time using the product compare to clients using the mobile app. We provide more features on desktop, also clients tend to make bigger decisions. With mobile app, clients usually are in a conversation with their friends and need easy access of sharing a link in message or other social media. So on desktop, we emphasize sending invites via email or via your Gmail contact list.

We want to make the different ways of inviting friends easy to find on the page.

"How do I check my invite status?"
One of the client request is to check invite status. Although we included it on the old page, but clients tend to look for it in Settings, because they don't look for it very often, and they see the Invite a Friend page as a place to only send invites. So we decided to build a page in Settings for clients to check out a detailed list of invites. 

 
 

Design process


Decide on component priority

First of all, I worked with the product manager to map out the complete flow and walked through the components in the exiting page that we wanted to include. To prioritize the components for my design, I spoke with our client service team and some clients, and decide on the three priority components:

1. Benefit explanation - explicitly call out the benefits of inviting friends
2. Managed free summary - emphasize the numbers that clients care about the most
3. Email invite (manual and Gmail contact list) - encourage sending invites via email

 


Expore different variations

I explored multiple versions of design based on different consideration of information hierarchy, constrains and flexibility for different content, and also different interaction patterns as well.

 
 


Final designS

Before importing Gmail contacts
 

After importing Gmail contacts
 

10_settings2.jpg

Invite Status in the Settings page
 

Mobile responsive design


SPEC OUT DIFFERENT STATES


Mobile app experience improvement

When clients are in conversations with friends about Wealthfront and would like to share the invite to a friend right away with a quick click in the app. However, our invite on mobile didn't perform as good as on desktop given the growing number amount of mobile users. 

My design proposal was: 

  • Have a clear statement of the benefits on the homepage;
  • Easy and clear CTA for quickly sending invites;
  • Visual touch up of previewing email and the success page to be more delightful;
  • Added invite status page.

Result

The A/B experiment received very positive result. One of the key metrics - invites sent per user - was 20% higher than the old experience.