Overview
As part of the design team at Deferit, I worked on a 4-month project aimed at enhancing the bill upload and payment journey.
Key Results
Improve usability in the bill upload process
User testing shows 100% participants complete 5 tasks
The satisfaction of usability in the user testing is 4.5 out of 5.
Method
Stakeholder Interview, User Review, Design Assessment, Data Anayltic (Hotjar), User Testing
Problem
Stakeholder Interview
The primary challenge was that users were encountering usability issues during from the bill upload to bill payment process, which led to frustration and an increased dependency on customer support. These issues resulted in lower conversion rates and a suboptimal user experience.
The Problem 1
User Review
I've gathered user reviews from Deferit's Facebook community, which included both simple inquiries and critical feedback. Among these, 41% of the total reviews were related to bill upload and payment issues. This presented an opportunity to understand customer pain points and motivated me and the team to reassess our current flow and features in more depth.
User Review 1
User Review 2
Assess Design
Based on user reviews, I’ve categorised usability issues in three parts: cognitive overload, dark pattern, terminology & insufficient guideline. In order to assess the current design, we asked the internal team (excluding the product team) to identify usability issues. The following are the issues the most frequently pointed out by our internal team.
Terminology & Insufficient Guidelines
This highlights the challenges of using complex terminology, such as feature names like 'Pay it' and 'Defer it,' and the lack of clear instructions on how these features work, which can negatively impact the user experience and increase reliance on customer support.
Terminology & Insufficient Guidelines
Dark Pattern
The next usability issue is a dark pattern: the processing fee is placed at the bottom of the screen, making it hard to find.
Hidden Processing Fee
Another finding from Hotjar shows that over 70% of users preferred manually selecting a payment date rather than defaulting to 'Today,' highlighting the importance of user-centered design choices.
Forced Payment Date
Cognitive Overload
Displaying too much information on a single screen makes it hard for users to prioritise key details, increasing cognitive load and causing confusion. This approach is not ideal for step-by-step guidance or additional explanations.
Too Many Tasks On A Screen
The Goal
Minimise customer support reliance and reduce the drop-off rate.
Simplify the main journey to ensure users clearly understand their tasks to complete.
Ideation
The design team collaborated through multiple design critique and review sessions. The business wanted to maintain the existing structure, such as prompts for review at each step. The key change was updating the guidelines for each step and providing prompts that offer additional information about the features.
Ideate Design Solution
One of my contributions was generating multiple variations of microcopy for buttons and feature guidelines to ensure clear and sufficient guidance, allowing users to make confident decisions without hesitation.
Enhanced UX with clear helper text and microcopy
Propose Two Design Concepts
Concept B takes the opposite approach to Concept A.
The progress bar is positioned at the top of the screen, making navigation more intuitive.
The edit feature follows the existing design pattern, ensuring familiarity for users.
Tasks are separated from the features at the top, providing clear guidance for users to complete their tasks effectively.
User Testing
To further validate and refine our approach, I gathered internal volunteers in the company to validate which version works better. This testing allowed us to identify which version performs better and to uncover additional opportunities for improvement based on real user feedback.
Method
A/B testing on 2 solutions
Task
Upload your bill & submit it
Add your payment card
Change your payment date
The metric
Key Findings
Low affordance on chevron button ( ‘>’ )
Confusion on the wording: Due today
The illogical order of the tasks
A/B Testing
Final Design
After validation of design concept, we landed on these design features.
In the existing design, all tasks were displayed on a single screen which made it difficult to provide necessary guidelines, and structured steps for task completion.
Feature 1
By introducing a step-by-step guide for users to follow, we aimed to reduce cognitive load and create a more manageable and intuitive experience.
Feature 1 - Breaking Down Tasks & Step-By-Step Guidelines
Feature 2
Another common inquiry from our users was why they are not eligible for the spread payment option (Pay in 4). To address this, we now provide additional information that helps users understand the specific criteria for eligibility.
Feature 2 - The Additional Information Provided As A Guideline
Feature 3
To provide users with flexibility, we prioritise the 'Choose a Date' option, as it is highly preferred by our customers.
This empowers users to select payment dates that best fit their schedules, enhancing their overall experience.
Feature 3 - Prioritising The Option Preffered
Feature 4
Initially the order of tasks started from payment amount but we learnt this order is illogical from the user testing. We reordered the task starting from payment schedule first to easily calculate how much they need to pay.
Feature 4-1 Reordering tasks
This payment review screen additionally provides a detailed breakdown of costs, ' including the processing fee ' , directly in the cost summary to improve transparency and user understanding.
Feature 4-2 Processing Fee
Design Handoff
For the design handoff, I conducted design showcase to validate solution with the engineers. I closely worked with engineers from implementing the final UI, transition, and animation and updated the final components onto the design language system.
Design Handoff
Key Results
Unfortunately, the project couldn't be shipped due to business financial constraints. However, the design team successfully delivered the design, significantly improving the usability of the entire bill upload journey. This improvement was validated through user testing, achieving a satisfaction score of 4.5 out of 5.
Improve usability in the bill upload and payment journey
The satisfaction of usability in the user testing is 4.5 out of 5
