Back to Work.
dashboard

Designing for Debt Management

Project Overview.

Web app experience for Wittle.io

2017-2018
  1. Design system
  2. Product ideation
  3. Design system
  4. Prototyping and animation
  5. Visual design
  6. Illustration & icons

The Background

Wittle.io is a debt simulation product to help users model their financial wellness under different criteria. With American household debt on the rise and student loans remaining a huge burden for graduates, we recognized an opportunity for improving financial awareness.

Goals

  1. Develop an identity for debt management that resonates with users
  2. Create an easy onboarding allowing users to create and simulate loans within minutes
  3. Launch an MVP web app to beta users
logo

The Approach

Wittle is a personal venture and collaboration with software engineer Molly Morgan intended to solve an ongoing problem that we see with financial planning. During the development process, I've tackeled branding and identity, user journey mapping, prototyping, and user interface design for the entire web app experience.

logo

Developing a Brand

Wittle's core brand attributes focused on soothing users and encouraging them to take ownership of their debt. Attributes include: Guiding, Educational, Encouraging, Confident, Optimistic, Fun, Soothing, Manageable, and Approachable. With these attributes in mind, I sketched over 100 iterations of the logo, exploring transition, decreasing shapes, "W" letter-forms and abstract graph shapes.

Iterations of the final logo explored different movements of the letter-forms and stems.

logo

The final logo design combined the stength of a custom san-serif letter-forms with the hit of downward movement.

logo logo

The User Journey

I created the user journey from the perspective of a new user and a returning user to show the onboarding process from login to the dashboard screen. The user journey accounts for future ideations of the design to include Resources and Account sections, even though those areas won't be present in the MVP release.

mobile success

Protoyping the Dashboard Layout

The focus of the prototype is the simulation Dashboard. Users can get a quick overview of the main areas of their debt. The goal of the Dashboard is to give users a comprehensive overview of their debt, whether that's car loans, student loans or credit cards.

Focus Areas of the Dashboard

  1. Total Interest
  2. Total Loan Amount
  3. Date of Payoff
  4. All Loans (graph)
  5. Simulation of All Loans (graph)

Errors & Messaging

Flash banners used motion and illustration to add delight without detracting from the message. Messaging is clear and informative, without coming across as too personal.

User onboarding flow

Inputs vs Syncing Data

Onboarding is one of the key areas of Wittle's simulation. When setting up loans, users enter personal information about their financial situation. For the MVP, we decided to allow users to input their own financial picture instead of syncing with financial institutions. Users can return and edit their information once the onboarding is complete. Inputing the data eliminated friction with the onboarding flow and focuses on the main dashboard experience.

user map

Simulating Loans

After inputing data, the user can return to their saved loan information, This section is key for users who want to simulate various types of loans. For example, before buying a house to simulate different interest rates and payment plans.

user map

Responsive Design

The system is (of course) responsive allowing for a flexible layout across device sizes and screen resolutions. The responsive design separates the sidebar from the main experience to minimize the information shown to the user.

user map
Loan onboarding
user map
Sidebar navigation
user map
Dashboard layout

Creating a Design Language

I created a new design language to make Wittle even easier to navigate and scan for information. I established this design system by unifying the app's UI component library, making it easier for Wittle to scale without diverging from the main system.

mobile success
Design system styleguide

Iconography & Illustrations

While the brand is playful, the subject is serious, so I created a series of icons and brand illustrations which balances the two. Organic lines emphasize the playfulness while the bold contrasts hint at the more sensitive subject matter.

user map
Product illustrations
sketch
Initial sketches

Key Learnings.

As a personal venture, this has been a great experience in combining my interests in both illustration, UX and product strategy. Wittle.io is an ongoing project, and we intend to iterate and refine as we gain more insights from users.

Get in touch.