Wealthfront Case Study: Website Redesign

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.


**Wealthfront’s website has rebranded and changed since this project, so it’s not available to view anymore**

The biggest project I was involved with was the redesign of Wealthfront’s website. Not the website when users are logged into their accounts but the logged out version — when you visit the website’s landing page and learn about Wealthfront and the products.

Problem

Wealthfront was in need of a facelift. The current website was old (technically and visually), dark, outdated and no longer represented the company branding and mission. But there was more to this project than just a redesign on the surface. As Wealthfront was moving towards new goals and a new branding style, everything needed to get up to speed with the fast growing startup. Here’s a look at some pages of the old website:

Sample of old website

Solution

Since the project was at such a large scale, it needed to be split into phases — this would allow us to launch sooner for testing instead of releasing everything at once many months later.

Phase 1:

  1. Update all pages to fit the new branding and visual style
  2. Maintain consistency in pattern and design throughout pages — for efficiency internally, more trust from clients and visual appeal
  3. Tone of voice and language
  4. Technical refresh — updating the code in how the pages are built for smoother transition from design → engineering

Why is this redesign important?

The website and homepage is the front door of any tech company. This is where people learn about you, and it’ll influence the decisions for new clients to join. Even for current users, the client experience doesn’t just start from the logged-in dashboard page, but from those landing pages right before signing in. Wealthfront is a fin-tech company with a strong team of engineers building advanced technology for their users, but the website needs to show it too. It also needs to feel warm and inviting (through writing, visuals and colour palette). Personal finance should feel personal! A redesign can help better define Wealthfront’s missions and products. And in order to keep progress forward, better design and engineering practices should be developed.

Process

1. Visual Style

Below are a few examples of how we redesigned the pages. We lifted the dark pages to make them feel more open and bright. Part of this change had to do with the demographic target shift. Wealthfront was shifting from focusing on young techies to people in their 30s-40s with families. Phase 1 of the project didn’t include changing copy or context yet — that would come later. Meaning no changes to the IA just yet too. We first wanted to push out a new look to get a good start on this big overhaul.

Homepage

The calculator slider (as seen below) was hard to see and didn’t make good use of the space. So we expanded it to fill the whole width and made the available interaction more obvious.

Second half of Homepage

We had this cool live feature to tell when our engineering team last pushed code, but it was hidden in the engineering page. You’d have to click on “Learn about Engineering in the Current page to get there. So I took it and moved it to the page before as well — not hidden anymore and you can see it before clicking into the next page!

Overview page in “Who We Are” section

2. Consistency

To ensure that future designs on the website would maintain consistency, we developed patterns for sections that would be used based on what the context would be.

I then turned all the established section patterns into sticker sheets on Sketch — fun! This way, any other designers will be able to open this file, drag and drop, and edit from any of these pre-made sections.

Typography was also important to consider when aiming for consistency. We created a guideline with font colours, sizes and style for desktop, tablet and mobile sizes and when to use each type. Below is a snippet of the guideline:

3. Technical Improvement

Following the development of the patterns, this was tied into how the engineers would change their code as well. They essentially did the same thing — they coded all the section patterns we designed so that in the future, all they would have to do is input the section into the page and edit the text. The sections can also be reordered and stacked in any order, making it very easy to change pages. The old website made it hard to make changes or add new content, and the code was outdated, so we started clean without working too much with the old code.

4. Responsiveness

Of course it’s a given that any website now-a-days should be mobile responsive, but the old website wasn’t the friendliest on mobile. Time to change that! I translated all the sections to their responsive form.

Below are examples of how I designed and wrote out the responsiveness guidelines for different section patterns for engineers to follow.

Carousels and Text & Image Sections

Here’s what the final design of the homepage on mobile translated too!

Next Steps

After the completion of this first phase, the next steps would be to start thinking about how to change the actual content to match Wealthfront’s new goals and target users. We also wanted to focus on how to make the experience between the logged-out and logged-in experience seamless and consistent. Each step taken forward in this process is another step closer to a better front door for Wealthfront.

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.