Redesigning the user experience to provide users control of their finances while positively impacting business metrics.
Overview
Tomo Credit is a fintech company providing credit cards to their users. At the end of Q2 2022, the customer support team stated that more than 25% of users calling in were about their transaction page.
The aim of this project was to solve the issues that users were calling in about in regards to their transaction page and ultimately help them reach their goals.
Problem
TomoCredit customers faced difficulty distinguishing between pending and settled transactions, resulting them unable to make payments in a timely manner.
Outcome
Designing a new feature for users to quickly identify an upcoming payment, providing them ample time to prepare the necessary funds to make a payment.
BUSINESS PROPOSAL
Determining project impact
How would this project affect certain KPIs?
An issue that could be faced would that users would be unable to know their payments due to now knowing their pending transactions. By taking trends of our user population in terms of spending, I developed a quick impact analysis:
Not missing a payment
Continues spending
625
number
of users
$250
Avg spend per week
$156,250
Total
spending
1%
Processing Fee
+$1,562.50
Revenue
Per week
By addressing this issue we could see a weekly increase in revenue by $1,562. As a result, leadership had a better picture of this project and we were able to get it in the pipeline.
RESEARCH
Understanding the challenge
I wanted to understand why so many users (around 25%) were calling in regarding their transaction pages. So I decided to conduct user research as my primary research and supplement that with a secondary research of competitive analysis.
Recorded calls
This was a quick project that didn’t have the resources flor us to reach out to users. I decided that the next best approach was to listen to calls between the user and our customer support team. I listened to 15 recorded customer support calls and have the following findings:
Why?
Users could not easily determine which of their transactions were pending versus what were settled.
How?
The customer support team was addressing these calls by calculating the total number of pending transactions for users.
What?
Users wanted to know what their upcoming payment was in order to prepare those funds.
Users are unable to determine the balance that they needed to pay off for an upcoming payment.
Similar platforms had clear instructions
I wanted to determine what other similar platforms were doing to help user better understand their payments. This was important in order to provide a consistent experience and expectation to users that have more than one credit card.
DESIGN PROCESS
Solving the problem
I brainstormed different approaches in allowing users to better understand their payments. With each approach I determined the amount of time and resources it could take and my confidence level in that solution. After consideration I decided on the following solution.
Providing an experience consistent with other platforms so that users know their upcoming payments.
This approach would not require much research and testing as we could be providing a similar experience to that of competitors. Given other platforms have followed similar trends in showcasing a user’s upcoming payment, this helped boost my confidence level.
Defining success
In order to understand if our solution works I identified a few metrics that would help determine if our solution has successfully addressed the user’s issues:
Organizing Transactions
I went into high fidelity frames right away given the simplicity of this change and project timeline. I incorporated similar designs from competitors to provide a consistent experience for our users.
I went into conducting usability tests by reaching out to the customer support team and making sure that the issues they were seeing with users were being addressed based on the design. I also reached out to members outside of the team to receive unbiased responses.
I reached out to a total of 8 participants and received the following feedback to implement in the next iteration. Based on my tests it was hard for participants to understand the total amount of transactions that are pending as it did not provide a natural flow and hierarchy difference.
Check out my final prototype for this new feature! Pending transactions are not fixed and sit at the top of the page. Users can scroll through their transaction history to see all their pending and settled transactions.
User Dashboard
To enhance the dashboard design, I initially only included the “Pending Balance.” This initial design aimed to mimic the information from the transactions page that users were calling in about.
To evaluate its effectiveness, I conducted a “5-second test” to determine the usability, where participants were asked, "How much will your next payment be?" This question aimed to understand if users could confidently determine their upcoming payment. I tracked how long participants responded and identified key improvements for my initial design.
Based on draft 2 usability test results, it was essential to incorporate hierarchy into the dashboard to allow better users to understand which information to look at. I decided to go into low fidelity to sketch out a few ideas.
I shared my lo-fidelity frames with peers. I ultimately decided to go with my second sketch because it provided UI hierarchy and it provides users the ability to see more information if they choose to do so. I developed the sketches into high-fidelity and conducted one more test.
Participants identified their upcoming paymentswithin 1 second of the test.
Check out my final prototype for this new feature! The dashboard shows the user what their upcoming payment amount will be and when it is due. Users can click “See more” to get a dropdown of information about their balance.
Final Thoughts
After handing off the designs to the engineers we were able to launch the new designs. We saw a decrease in customer calls regarding their transaction page.
Project Reflection
Working in a collaborative setting alongside cross-functional teams proved to be an incredibly enriching experience. Throughout this journey, I had the opportunity to learn extensively from engineers who guided me on the coding uplift required for different types of interactions in my designs. This understanding of the backend aspects of our projects has enhanced my overall perspective on the intricacies of our collaborative work.