Highlights
Task Overview
My task was to design a new mobile screen for a credit card payment app that helps users quickly see and pay off their dues. The goal was to clearly display how much was owed and explain the benefits of paying on time while keeping the design consistent with the app’s existing style.
Challenge
The tricky part was making the info clear so users could easily understand their payment due dates and feel motivated to pay on time.
Opportunity
This project was a chance to make the payment process smoother and show users the benefits of clearing their dues.
Timeline
1 Week
Disciplines
User Experience Design
User Interface Design
Responsibilities
UX Research
Design Thinking
Wireframing
Prototyping
Tools
Figma
Notion
ExcaliDraw
Skip to Designs
Background
Introduction
In this project, I aimed to create a new mobile screen for a credit card payment app, focusing on helping users manage their loan and credit card dues effectively. The design needed to facilitate quick access to crucial information, enabling users to understand their outstanding payments clearly.
The goal was to present key details such as the amount owed and the benefits of making timely payments. By highlighting these elements, I intended to encourage users to resolve their dues promptly, ultimately supporting their financial well-being.
The Process
1
Research
Desk Research
Defining Requirements
2
Ideation
Rough Design
3
Design
High-Fidelity Design
4
Reflection
Thought
Research
Desk Research
I started with desk research to understand the common challenges users face when dealing with payment dues, especially for credit card and loan accounts. I looked into how people typically handle overdue payments and the factors that influence their decision to pay on time. The goal was to gather insights on what makes payment processes easier or more difficult for users.
From this research, I found out the following:
Many users struggle to keep track of due dates, leading to missed payments.
A clear display of payment amounts and deadlines can motivate users to pay on time.
Showing the impact of overdue payments on credit scores encourages quicker action.
Users appreciate a seamless process that minimizes extra steps when resolving dues.
Defining Requirements
Based on the desk research, I identified the key requirements for designing the new mobile screen. The goal was to address user challenges and make the payment process as smooth and clear as possible.
Here's what needed to be created:
Clear Display of Due Amounts: Show the exact amount owed upfront to avoid confusion.
Payment Deadline Information: Clearly indicate when payments are due to help users stay on track.
Benefits of Timely Payment: Include a brief explanation of how paying on time can positively impact the user's credit score.
Easy-to Find "Pay Now" Button: Make the payment option prominent to encourage quick action.
Consistent Visual Design: Follow the app's existing style to maintain a familiar look and feel.
Ideation
Rough Design
I began the ideation process by sketching some rough designs on Excalidraw. These initial sketches helped me explore different layouts and figure out the best way to present key information to users.
Design
High-Fidelity Design
I worked on the final high-fidelity designs, keeping the app's original style while making sure the important details stood out. The idea was to make things simple and easy for users to pay off their dues.
Payment History Indicator: Included a circular pie chart at the top to show whether the user’s payment history is in the "green zone" or not.
Clear Due Display: Added the due date to the due amount card so users can easily see when their payment is due.
Quick Info Text: Placed a brief message below the due amount, explaining how paying on time can benefit the user.
Reflection
Thought
This project taught me a lot about designing for user clarity and motivation. The final design aimed to make payments easy and stress-free for users.
Here are some final takeaways:
User Clarity Matters: Clearly displaying due dates and payment benefits helps users stay informed and motivated.
Visual Cues Aid Decision-Making: Simple elements like pie charts can effectively show payment status and encourage timely actions.
