Web Present@3x.png

Acorns 2.0 Web App

Acorns web app design

Acorns Web App 2.0

Web Present.png
 

I lead design on the massive update to the Acorns Web App. It was a huge undertaking that the team managed to get fully designed and built in a record time. On this project, I worked directly with product, engineering and the executive team to fully define the product, UX and final visual design.

The Goals

  • Design an experience that feels like the Acorns mobile apps, but fully optimized for the web
  • Create a framework in which more features and pages can be built upon in the future

 

 
 
Web Past 2 .png

Past

Past was designed to act as a centralized location to display all of the users history and transactions within their account. 

The biggest challenge to solve for this screen was how to present the most important information at a glance, without all of the data being one long ledger.

 
 
Web Present 2 .png

Present

Present provides all of the users important account information at a glance, as well as introduce new offers and education within the Action Feed.

The biggest challenge to solve for this screen was defining the hierarchy of content, and presenting crucial account information at key moments in the experience.

 
 
Web Potential 2.png

Potential

Potential is dedicated to showing the user where they are going, as well as keep them on track to their financial goals.

The biggest challenge to solve for this screen was how to graphically display the users projected account value with each input. We worked closely with our compliance department to ensure we displayed the correct information, all while being easy to understand.

 
 
 
Web Performance .png

Performance

Performance is the key location within the web app that the user can dive deep into their accounts performance, and see the breakdown of their ETF's.

The biggest challenge to solve for this screen was how to merge all of this data onto one screen. The current mobile app requires multiple interactions from the user to be able to view all of this data. In this design, the user can view the purple header section to get the quick overall performance data at a glance. If the user wants to dive in deeper, they can click on the breakdown of their ETF portfolio below and see how the performance of each component.

Web Invest .png
 

Invest

We want to intelligently introduce investing opportunities to the user throughout the app and the present section. The Invest section acts as a settings page, and a quick way of making a One-Time Investment.

The biggest challenge to solve for this screen was creating the hierarchy and architecture. The key focus on this screen is our main 2 ways of investing (Recurring and One-Time Investments), allowing the users to quickly adjusting and make their investments, as well as manage their settings as a secondary experience; pinned to the top.

 

 
Web Cards @3x.png

Key points I took away from this project:

- I learned how to effectively and efficiently work directly with PM's, engineering and the executive team when leading design on this project.
- It's extremely important to think through all of the breakpoints in the beginning when designing a responsive website/app.
- User test as much as possible early in the process.