UX & Product Design · Personal Finance

Debt Pull

A mobile debt-management experience connecting debt details, accounts, budgeting, and a debt-free Freedom Day.

Client

Debt Pull

Role

UX & UI Design

Platform

Mobile app

Debt Pull mobile designs showing the homepage, account details, and Freedom Day

Overview

Debt Pull is a mobile app designed to support a user's debt journey. The experience consists of five main features: Homepage, Debt Details, Account Details, Budget, and Freedom Day. The original design work includes onboarding and login screens, mobile wireframes, a high-fidelity prototype, and a style guide.

The design scope

After logging in, users land on the homepage. A bottom navigation connects the homepage with Debt Details, Account Details, Budget, and Freedom Day, bringing the different parts of their debt journey into one mobile experience.

The approach

The entry experience covers the splash screen, onboarding, sign up, and login. High-fidelity phone mockups show these entry screens alongside the app's main features.

The wireframes explore two homepage layouts, debt details, account management, budgeting, and Freedom Day. Account screens cover bank options, a selected bank, and a newly added account; budgeting screens include selection, manual entry, and a help option.

A style guide accompanies the screen designs, and the original case study links to a high-fidelity prototype in Adobe XD.

01 / SCREEN DESIGNS

Splash screen, onboarding & login

The entry experience, from the opening screen to getting started and logging in.

Debt Pull — Splash screen & onboarding — Splash screen & onboarding

Debt Pull — Onboarding & login screens — Onboarding & login screens

02 / SCREEN DESIGNS

Homepage

The first screen after login, with bottom navigation to the app's five main features. Two homepage wireframes explore the layout.

Debt Pull — Homepage wireframe — option 1 — Homepage wireframe — option 1

Debt Pull — Homepage wireframe — option 2 — Homepage wireframe — option 2

03 / SCREEN DESIGNS

Debt Details

The Debt Details screen from the original mobile design work.

04 / SCREEN DESIGNS

Account Details

Account-management wireframes covering the overview, bank options, a selected bank, and a newly added account.

Debt Pull — Account Details — bank options — Account Details — bank options

Debt Pull — Account Details — selected bank — Account Details — selected bank

Debt Pull — Add account — newly added — Add account — newly added

05 / SCREEN DESIGNS

Budget

Budget wireframes with selection, manual-entry, and help states.

Debt Pull — Budget selection — Budget selection

Debt Pull — Budget — manual entry — Budget — manual entry

Debt Pull — Budget — need help — Budget — need help

06 / SCREEN DESIGNS

Freedom Day

The Freedom Day wireframe, part of the app's debt journey.

07 / SCREEN DESIGNS

Style guide

The visual style guide accompanying the Debt Pull mobile screens and high-fidelity prototype.

Final deliverables

The design work brings together onboarding and account access, wireframes for the core debt-management features, high-fidelity mobile mockups, a style guide, and an Adobe XD prototype.

View high-fidelity prototype ↗

Deliverables

Onboarding & loginMobile wireframesDebt & account detailsBudgeting screensFreedom DayHigh-fidelity prototypeStyle guide

View original case study ↗

Next case study

Sonatype

Redesigning my.sonatype to improve navigation, accessibility, and discovery of learning resources.

→