Wealthfront Case Study: Product Feature Recommendation Modules

Summer 2016, I was a product design intern at Wealthfront in Redwood City, California. I had the opportunity to work with a talented design team led by Kate Aronowitz and had the best mentor (Aly Weir)! Here is a case study on one of my projects during my time there.


Goal: Design new promo modules to encourage users into activating/upgrading Tax-Loss Harvesting or Direct Indexing when appropriate

Promo modules are specialized cards displaying content about Wealthfront-related content such as new product features (with CTA) and blog posts.

Breakdown of the goals:

  1. Design three versions of promo modules (video, visual chart, progress bar) which encourage users to activate/upgrade Wealthfront features Tax-Loss Harvesting (TLH)and Direct Indexing (DI)when appropriate
  2. Test their performances through A/B testing — one approach being more educational (video), another incorporating assets from previously successful tests (visual chart), and the last using real data from the user’s account to hint progress towards activation/upgrading

How feature targeting works:

When user has TLH turned off → show option to turn on TLH
When user has TLH on and has over $X → show options to upgrade to DI
** DI Basic requires $100K+, DI Plus requires $500K+, DI Premium requires $1M+

The promo cards would live on the dashboard and account pages on desktop, meaning each version will need two formats. Below is an image of where it would fit in the dashboard and account page:

Demo of where the promo modules will be on the Dashboard and Account page

Version 1: Video promo module for TLH & DI

The first design version of the promos was with an informational video about Tax-Loss Harvesting and the product feature. The video is originally used on the marketing side of the website and the account sign up flow. Data results showed a successful rate of users clicking on this video when it was included in the sign up flow, with about 80% of users watching the whole video. Therefore we knew the video itself was affective enough to put through testing.

Challenges

I brainstormed with the PM and engineer to figure out the best way to display the video. Is using the video for a promo a good idea? Should it auto-play and start muted? Should there be a body of text supporting the video or is the video enough to speak for itself? We couldn’t decide it would be better add some copy to be clear what the video was about. What if no one clicks on the video if there isn’t enough guidance on what it’s about?

Text isn’t always the best way to convey a message to users. Sometimes, you can let the other elements do the talking.

Final Design

We concluded that auto-playing the video on a page that already has a lot of other information to consume would be distracting and possibly annoying for the users, especially since they had a goal to fulfill when visiting the dashboard. So leaving a thumbnail with a play button was wiser.

For the amount of supporting text, we decided to only have a title and add additional text in the account page format (landscape one). The extra space made sense to add extra information, whereas the dashboard promo card was smaller and should be kept shorter.

We chose to have two CTAs because we didn’t want the blue “upgrade” button to seem intimidating. Although clicking on it doesn’t immediately change any account features yet — rather it takes users to a landing page with introduction to prepare for the upgrading flow — it’s not surprising if some users think clicking on the button will result in an instant activation. Having a “Learn More” button will comfort users in knowing that there is a second option they can click to first explore their interest in the topic.

Since the video includes text and detailed images, the video expands into a pop-up module when the thumbnail is clicked on so that users can comfortably watch it. Users are left with the options of exiting, playing/pausing, and continuing with the CTA buttons.

Version 2: Projection chart promo module for DI

In this second version, a projection chart is used for the main selling point. As explained at the beginning, clients can fall into three tiers of Direct Indexing depending on their account balance. Knowing which tier they qualify for, the appropriate chart bar will highlight in green. This chart has also been proven successful from previous application in a sign up flow, likely because people like seeing actual numbers and estimated projections. Abstract words and general visuals won’t always work, especially for situations as intimate as personal finance.

Challenges

Questions that I had included: How can I make the chart as simple as possible? What if it’s confusing? Will people understand just by reading the chart that it’s talking about the minimum requirements for the tiers of Direct Indexing?

Final Design

The final promo modules follow the same format as the video version— title at the top, two CTA buttons and a body of supporting text next to the visual. The chart shows the three tiers with the minimum amount required underneath, and the possible gains above. Below is a disclosure link which opens up a module for users who want more information about the chart.

Version 3: Progress bar promo module for DI

Lastly, we wanted to try a version of promo that would project the user’s actual information for a more specific and personalized way of introducing the feature. This promo module would only appear to clients who have already expressed interest in upgrading. The promo would show clients a progress meter of where their account balance currently stands, and how much they have remaining before they qualify for the closest tier of DI. This method lets clients know what’s happening so they don’t have to figure it out themselves, and hopefully encourages some clients to deposit amount necessary to qualify for Direct Indexing.

Challenges

One edge case we came across when designing the progress meter was, what would happen if a client had $10,000 remaining until activation, but they had a $10,000 deposit that was still pending? If the progress meter still showed $10,000 remaining, that would be a problem.

Final

Progress meter promo module for Direct Indexing

So we added a pending feature which would reassure clients that we know their funds are coming through, and that we’re ready to help them activate Direct Indexing once the money is deposited. The little reassurances are everything!

Underneath the progress meter is a legend indicating the deposited amount (green), pending deposit amount (yellow), and remaining amount until DI qualified (grey). Users have the option to click on “Add funds now” and “Learn more”. In the dashboard shot is the thought out draft of the copy, <TIER MIN> is to input the required amount of whichever tier the user is almost at, and <TIER> is the name of the DI tier.

Thanks for reading — hope you enjoyed it! Feedback is welcome, feel free to leave a comment or get in touch hello@tracycai.me 😊
Show your support

Clapping shows how much you appreciated Tracy Cai’s story.