Level Money Web App Case Study

RESPONSIVE WEB APP
Level Money is a simple budgeting app. Users connect all their bank and credit card accounts and Level Money examines their income, monthly expenses, savings goals and creates a unique "Spendable" for each day and month. Basically, it tells them how much is safe to spend on fun stuff. When I started, Level Money was exclusively an app for iOS and Android. 

MY ROLE
I lead the design of Level Money for Web, a responsive web app.

  • Created information architecture, flows, annotations and a visual design style guide  
  • Worked collaboratively with product and development teams
  • Prototyped, wrote research scripts and conducted usability tests to assure usability standards.

Process:

The project began with the aspiration to provide Level Money users with their financial information anytime, anywhere, on any device.

 

 

INFORMATION ARCHITECTURE + PROJECT PHASES
With planned phases as we progressed.

Screen Shot 2017-08-06 at 11.01.30 AM.png
 
 
 

ONBOARDING

Before people can do anything with an app or service, they usually have to sign up. The challenge is making this process as easy as possible while keeping security paramount.

 
IMG_4365.JPG
 

DESIGN BOARDS

 Every week I scheduled  a 30-meeting with my development team and product to go over design flows, solicit feedback, and collaboratively work toward the best solution. We recorded suggestions and ideas on sticky notes and added to the board which became a physical living document of the design. I tacked up changes up as we went along.

 
 

Usability testing demonstrated that when the supplementary panel contrasted greatly with the rest of the page, users rarely noticed it.  Additionally, I refined the side panel to reflect what we needed users to know: to add all their bank and credit card accounts, security and help information.

ONBOARDING FLOWS

 
 

Since Level already existed as a native app, this project was "desktop-first". Still, I designed every screen and experience to be 100% responsive.

 
 
 

SPENDABLE SET UP

This is the process when a user confirms or amends Level's calculation of how much they can spend based on their connected bank and credit card information. 

 
 

For this second user flow, the right side of the screen continued to serve as a space for people who needed assurance and help. I employed a simple modular design so that it was easy to implement AND  easy for people in our user tests.

 

 

DASHBOARDS