Acorns Web App

I lead design on the major update to the Acorns Web App experience. On this project, I worked directly with product, engineering and the executive team to fully define the product, user experience and final visual design. The project was fully built and made live in early 2017.

Project Goals

Create a rich and optimized Acorns experience on web.
Develop and manage a scalable design system for web.
Increase traffic and investments via the web app.

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.
Acorns Web App WireframesAcorns Web App Wireframes

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.

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

Creating parity betwen mobile and web apps is simple. Optimizing the experience for each is difficult.
Start off your responsive design system early on in the process; you’ll appreciate it later.
User test early and often; it is extremely important for a products success.
Contact Me