Debtpart

Responsive Web App

Role

Tools

Time

Type

Figma
Adobe InDesign
Adobe Illustrator

UI Design
Branding

Case Study

5 Weeks

An app that helps you visualise and understand your debts and finances

Brief

The objective was to create a responsive web app that helped people save money quickly to pay off a big purchase or expenditure. The brief specified that the product should be:

Trustworthy

Users should feel comfortable entering in financial and personal information

A Financial Adviser

Should be reliable, serious and it should build confidence in it’s users

Simple & Clear

The app should appeal to those less familiar to the world of finance

Solution

An app that allows users to understand and take charge of their debts

Debtpart allows users to see and interact with their various loans and debts from one platform, create payment plans, calculate repayment timelines and view their debt data in easy to understand, visual ways.

Process

01

02

Discover

Define

• Examine brief
• Competitor Analysis

• Identify pain points
• Determine goals

03

04

Prototype

Design

05

Refine

• Refine Designs
• Mockups

• High-Fi screens
• Usability testing
• Style guide
• Responsive design

• Ideation
• Paper wireframes
• User testing

User Stories

User Stories provided in the brief gave guidance for the UI Design and helped indicate what the primary user requirements to be met were.

view, filter and interact with information on my finances in a variety of ways

I want to be able to

so that I can

access further details when I want to

I want to be able to

see a dashboard of my finances clearly and visually

so that I can

see how much I’ve spent at a glance

I want to be able to

see an overview of how my finances have changed and how much I am paying off

so that I can

stay on track with them

User Flow

A primary user flow was created based on a selected user story: how users would be able to go about viewing data on their loans and debts in multiple ways.

A clear, solution-led pathway to this requirement provided the foundation of the app.

Paper Wireframes

With this user flow in mind, initial paper low-fi wireframes were drafted up to visualise this pathway of how users would achieve this job to be done.

User Testing

Objectives & Tasks

The objective of user testing on the mid-fi wireframes was to get an understanding of what was and wasn’t working at this point in the design process so it could be improved on.

Participants were given a brief about the app and asked to perform the following tasks: 

Visit a loan profile and view data in multiple different ways
Find an overview of their finances
Create a new loan profile

General comments, critiques and feedback was also encouraged.

Takeaways

Most of the feedback from the tests was positive - users commented that they found the app easy to use and clean and clear.

Participants managed to perform tasks without too much difficulty, but gave some small suggestions to some of the design features which were taken on board and implemented on the final wireframes.

Style Guide

Once iterations were made to the design based on user feedback, a style guide was created to give personality and feeling to the app.

The intention was to keep the colour palette simple and clean, and not to overwhelm the user with colour. A contrast checked was used to ensure that there was sufficient contrast between elements.