Designing accessible data visualizations for the top holdings on all fund pages.
My role
I collaborated with cross functional partners to create a few new components, including a flexible stacked bar chart, and additions to our list components.
The team
I was the design lead, and I worked with the design system team, investing research, data science, a product manager, and engineers from web, iOS and Android.
Based on client requests, we wanted to build out some more data on our fund pages. Funds included all ETFs, as well as a few others.
This data has become expected on all investing platforms, so we wanted to make sure we were providing it on Wealthfront for our clients.
Competitor audit
Understanding how other apps present this data, and see what types of visualizations they use.
Early explorations
Understanding the nature of the data, how to present it dynamically, and how to make it flexible.
I tried out a few different visualizations, and began working with a content designer to think about the best way to present the dynamic content.
Pie chart exploration.
Early bar chart exploration.
Double stack with a low percentage of holdings making up the top 10.
Double stack with a higher percentage of holdings making up the top 10.
Content
Collaborating with content design to figure out how to make the copy dynamic and flexible.
We needed to make sure it worked for all funds, and the outcome was surprisingly simple considering how much thought went into it.
Highlighting the dynamic parts for the engineering team.
Where we ended up that was close to being the final execution.
Accessibility
Ensuring the contrast passed accessibility requirements.
I wanted to make sure we were using the right adaptations of our brand colors that met accessibility requirements. They needed to contrast against each other in the stacked bar, because they could get quite thin.
I collaborated with a growth team designer on some of this work, as they were using a similar component.
There were examples in our brand style guide to that were used as a reference for the look and feel.
Launch
The launch-ready designs.
Representations of the lowest, and more of an average number of holdings that make up the top 10, to show examples of the flexibility.
Light mode, low %.
Dark mode, average %.
This feature is in production on all platforms.
You'll need to be signed in as a Wealthfront client to view it.
Disclaimer that all product features are publicly available, and nothing on this website is intended to be a representation of the companies mentioned.
Read.cv
Linkedin
Resume
Back to top