Wealthfront Case Study: Carousel Component for Dashboard
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 a UI component to support grouped content in promo modules
Working with a PM and engineer, I led a project to come up with a carousel feature that would allow promo modules to be grouped together. Promo modules are specialized cards displaying content about Wealthfront-related content such as new product features (with CTA) and blog posts.
Previously, all modules were static and displayed one at a time. We wanted to implement a new UI component that would allow for the possibility of content to be grouped together. For this project, we first focused on designing it to adapt blog post recommendation content.
Redefining the content
This project wasn’t just one dimensional. A lot of design changes and rebranding were happening within the company, so creating new features also means getting the old stuff up to date. Introducing blog post recommendations were new and we realized that we didn’t have any specialized content just to use for the promo modules. So we first had to decide how to efficiently create all the blog description previews and thumbnails for the promos. The blog site was old and needed a redesign, and many of the images used in the articles consisted of low-quality stock images and inconsistent use of imagery in general.
So I redesigned a handful of them based on our visual and branding style!
New problem: There were a lot of articles, and not enough ‘me’s to customize thumbnail imagery for all of them.
So we created a series of standard thumbnails to replace for less popular articles — until we’d eventually get to them.
Now that we had established consistent visuals and had sources for how we’d get our 3–4 line article descriptions, we were able to move on to the next step — designing the carousel feature.
In initial stages of brainstorming and trying different formats, I came up with many approaches to learn which one could work the best. Some ideas included: skip option, collapsable module, arrow and dot navigation. I also played around with the copy to try to make it sound more personal.
Questions I considered:
How can it be eye-catching and attractive but still simple?
How can we make it feel personal?
Would there need to be any navigation on the card for the users?
What would the CTA button look like?
How many blogs should be rotating?
Would it be auto-rotating? If so, for how long?
Then I narrowed down my final designs:
After team discussions and feedback, we decided carousel dots would be the best. I wanted the UI to feel simple and not look cluttered since the dashboard already has so much other content to look at.
When designing a side feature on a dashboard, keep things simple to avoid an overall page of clutter and confusion.
To compromise wanting to keep it simple but still allowing some user control, I came up with the idea to show arrow navigation to the promo module only when hovered over. Below is the final design and the reason I made that decision.
Ta-da the final design! The carousel has three blog recommendation promos prepared for rotating (content personalized for individual users). Three because any less would be to little, and any more would be lengthy since users don’t spend a lot of time on the dashboard page. Each promo displays for 15 seconds before rotating to the next — enough time to read the content but not so long that the underlying content won’t have a chance to appear. The auto rotation also acts as an attention grabber since all other content is static on the page.
The carousel dots at the bottom of the widget lets users know that there are three pieces of content available. Simple and intuitive to understand without extra numbers and arrows involved. Although the dots are clickable, not all users may know this, so a solution I decided on was adding arrows that would only show up on hover. This would serve as additional navigational guidance. It’s subtle, but is clear about what you can do if you’re interested enough to move your mouse over the promo. Now users can flip back to a previous promo that just caught their eye, or rotate through them all.
Here’s a demo of the hover action:
Thanks for reading — hope you enjoyed it! Feedback is welcome, feel free to leave a comment or get in touch firstname.lastname@example.org 😊