Acorns Web App

Released early 2017

Company

Acorns is a finance company which simplifies the investing and banking experience. Their mobile-first approach to investing put them on the map; allowing customers to round-up their spare change from purchases and invest in intelligent portfolios.

Project Goals

Create a rich and optimized Acorns investing experience on desktop, build and manage a scalable design system, and increase traffic and investments via the web app.

My Role

I was the lead product designer on this project. I met with the executive team to align on goals and vision, built out full wireframes and flows to lead usability tests to validate hypotheses. Once I locked down the wireframes and UX, I worked to translate our mobile-first branding & UI to desktop. Worked closely with the front & back-end engineers during the entire development process. Collaborated with a visual designer on illustrations.

Translating mobile to web

In 2016, the Acorns design team and I started to work on the next evolution of the Acorns investing app, the first major overhaul since it’s introduction in 2014. We had started to design and develop the iOS and Android apps, and I was tasked to architect and design a web-optimized desktop version of our mobile-first investment product.

I took all of our learnings from building the mobile apps, and focused on creating a optimized desktop investing experience. We needed to have feature parity on both platforms, but had the benefit of larger real estate on desktop to add new shortcuts & ways to display more relevant information.

Wireframing the homepage

A challenging part of this project was locking down the layout and design system for the homepage. The Acorns mobile app used a primary hamburger menu, and a sub navigation on specific pages. It was simple to replicate that on a desktop screen, but proved to not be the best experience by requiring multiple interactions to complete simple tasks.

Usability testing

I then used the low-resolution wireframes to build a clickable prototype, and asked coworkers not involved in the project to validate the navigation and layout. These brief yet extremely helpful usability tests helped me narrow down the layout and architecture based off their expecations and feedback. Once the architecture of the homepage was locked down, it helped inform the design of the rest of the site.

Creating a scalable component design system

A big part of the 2.0 redesign was the addition of an action feed, in which we could display more content on the users homepage and throughout the app. I designed a template system for the team to be able to create new cards on the fly, as well as making them responsive for different breakpoints.

Another point of focus was how users would interact with these cards on desktop, as they were all originally designed for small touch screens. They had to be redesigned specifically for someone using a mouse or trackpad, and optimized for a web experience.

Animations

Finance products are inherently boring and dry, so from day 1 Acorns built a brand a reputation for being different. Animations help spark joy and excitement from page loading, interactions with graphs, and celebrating big moments.

Illustrations

Illustrations are a big part of the Acorns brand, and is a great tool for us to explain complex concepts or industry jargon. I helped create a library of illustrations with the help of Herson Rodriguez and Sabrina Curry.

Developer handoff

This project had a very tight deadline, so I worked closely with 3 front-end developers to get it built. I used Zeplin to handoff the final specs and assets, and collaborated on interactions and implementation in person.

Key Takeaways

Optimizing the Experience

Creating parity betwen mobile and web apps is simple. Optimizing the experience for each is difficult.

Usability Tests

Lead usability tests early and often. Having this data to validate your designs is invaluable to the design process and for presentations with stakeholders.

Responsive Design System

Start off your responsive design system early on in the process; you and your teammates will greatly appreciate it later.