Case Study: Designing for Debt Management

Creating a design system for financial fitness

UI/UX | Branding & Identity | Product Strategy | Prototyping

OVERVIEW

Wittle emerged as a debt simulation product to help users model their financial wellness under different criteria. American household debt has increased by 11% in the past 10 years and nearly 80% are in significant debt. Student loans remain a huge burden for Americans. In 2012, 71% of students graduating from a 4-year college had student debt and it continues to be an ongoing $1.3 trillion dollar crisis.

As a sensitive issue, designing for debt management is a challenge. Personally, I had to deal with moderate student loan debt; I paid off my graduate student loans a few years ago and am familiar with the murky waters of managing debt. Therefore, I knew it was important to create a design system that acknowledged the sensitivities of financial planning and appeared to be a thoughtful and approachable guide for users.

Design Goals

  1. Develop an identity for debt management that resonates with users
  2. Create an MVP prototype of the debt simulation dashboard to gather feedback from Beta users
  3. Launch an MVP web app to Beta users to gather feedback and iterate on the design and UX

Approach

I tend to follow the same approach for defining a design system:

  1. Research, product strategy and planning
  2. Iterations through sketching and low-fidelity wireframing
  3. Wireframing concepts
  4. Creation of a style guide
  5. Developing a user journey for the prototype
  6. Visual design and prototype creation

Favorite Design Tools

  • Steps 1–2: Pen, paper, dot grid books
  • Steps 3–5: Sketch, Balsamiq or Omnigraffle
  • Step 6: Sketch, Flinto, Principle, InVision

Process

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.

Early logo sketches
Logo sketches exploring abstract graph marks.

Initial Logos “Missed the Mark”

The first iteration of logos used smooth shapes and gradients, but didn’t seem to align to the product. User feedback on this design indicated that the logo was too flippant and fun, which didn’t account for the sensitivity of debt.

Missed the “mark” on this approach

I then explored sturdier sans-serif letterforms that incorporated graphical elements. The creation of the final mark was a challenge; repeatable curved forms needed consistency and a thoughtful approach. I went through many rounds of “final” logos until I felt that the forms were correct.

Rough sketch for final logo
Finding the letter-forms from the rough sketch
Focused on refining the curve of the letter-forms
The spacing is a little off
The “E” was a problem area

Final Iterations

Exploring variations of the curves for the final logo.

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

Explorations of serif letter-forms

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 initial release of the product.

Low-Fidelity Wireframe

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

  • Total Interest
  • Total Loan Amount
  • Date of Payoff
  • All Loans (graph)
  • Simulation of All Loans (graph)
Rough sketches of the UI dashboard

Wireframe

The wireframes expanded upon the initial sketches to show details about the active and disabled states, transitions and form inputs. I try to keep my wireframes as close to the final design as possible, paying extra attention to the use of typography, layout and content areas.

The placement of the loan “cards” at the bottom of the screen posed an additional challenge, since these are secondary containers meant as breadcrumbs for the user. I explored different iterations of placement, size and type hierarchy here.

Wireframe of the Loan set-up onboarding

Design Solution

I created the design solution in tandem with the UI style guide. The style evolved as I was creating the components. Repeatable patterns keep the design simple and the user journey succinct. However, the design allows for future iterations, such as modules or resources for specific areas of debt.

Prototyping the Dashboard Layout

To test out the animations and interactions, I mocked up the main transitions using Principle.

PROTOTYPING THE ONBOARDING CAROUSEL

UI Style Guide

The components are kept to a minimum for this product. The style guide includes use cases for colors, buttons, card components, inputs, typographic scale, navigation, icons, illustrations, and sidebar components.

The use of color has been integral to the development of a consistent style. Each of the Primary Colors uses a darker variation variable for overlays, clickable icons or hover states. Background gradients use two of the Primary Colors for a subtle transition.