Payment Improvement
— The leading community and B2B commerce platform for pharmacies in Southeast Asia
Problem
The application uses a first-in-first-out system, meaning that the system automatically allocates the amount to the due invoices. However, there is no practical way for business to track their invoices on the application.
Solution
As we’ve been tackling visual clarity issues regarding the payment allocation on the application. We need to improve the payment process flow and provide a smoother payment experience that has a clear path for business to complete the payment.
Type
Mobile App
My role
UI UX designer
What I did
Benchmarking, User Stories, Wireframes, Interactive Prototypes, User Testing, UI design
Impact
- Reduced past due invoices to 0%, Measured by comparing Metabase data between 2020 and 2022.
- Improved invoice allocation processes
The Process
The customer service team interviews
Framing the problem and the scenario
From the kickoff meeting and the conversations we had with a product manager, we understood that user used to contact the customer service team to ask which amount they have to pay, which at the beginning was even hard for me to understand. So I decided to look into the user’s behavior by doing some unstructured interviews with the customer service team.
User Journey Map
Understanding the users
By analyzing the data from information gathering session with customer service team, I identified that pharmacists confuse about how payment system works. I started with creating a personas to create a User Journey Map. The map allowed me to highlight the main pain points, and start to ideate some possible improvements.
The client provides a credit system, pharmacies need to properly keep track of their due payments, as well as pay for their invoices on time. At this point, it was obvious that user needed to be able to review and process their payments with more accuracy.
UX design
From conceptual design to wireframes
Following the user journey, I started working on the wireframes. I created a low-fidelity interactive prototype with Figma then I tested it with business, customer service, and development team to get some feedback.
UI design
The solution layouts
Once the overall experience was defined with the wireframes, I designed the high-fidelity prototype. The result of this activity was the final look and feel of the interface with new branding of the application.
How the payment design evolved from the first sketches to the final version
User Testing
Let’s see what users think
We conducted user testing sessions with the A/B test technique. The tests were done on a high-fidelity interactive prototype with Maze. The results were analyzed and presented to the stakeholders. The outcomes of the User Testing used to improve the design.
