Case Study: Designing for Debt Management

OVERVIEW

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

  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

Early logo sketches
Logo sketches exploring abstract graph marks.

Initial Logos “Missed the Mark”

Missed the “mark” on this approach
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.
Explorations of serif letter-forms

The User Journey

Low-Fidelity Wireframe

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

Wireframe of the Loan set-up onboarding

Design Solution

Prototyping the Dashboard Layout

PROTOTYPING THE ONBOARDING CAROUSEL

UI Style Guide

--

--

--

Designer @Google, teaching with @GirlsWhoCode & @trydesignlab, occasional illustrator

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Done with comparison. Let’s Get REAL: a UX case study

The $3,9 Trillion Dollar Challenge: How Enterprise Architecture Improves the Quality of IT…

E-commerce feedback widget. Case Study

Are you being nudged?

the quick brown fox (copy)

Goodnight Moon, Goodnight Zoom

Uncharted

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kelly Dern

Kelly Dern

Designer @Google, teaching with @GirlsWhoCode & @trydesignlab, occasional illustrator

More from Medium

Mimicking real-world in UX Design: Skeuomorphism

How design thinking Airbnb a billion-dollar company

UX DesignTrends of 2022

What Business Problems Does UX Design Solve?