NINJA DIRECT serves the purpose of connecting people directly with suppliers and supporting them with their sourcing, procurement, and shipping needs. The application was designed to assist users in accepting, paying for, and tracking their orders easily. The challenge was to explain logistics, which could be quite complicated, in a simple and user-friendly way.
Imagine taking the stress, uncertainty and language barrier away from buying products from suppliers across the world.
PROBLEM
Current payment process was messy and disjointed
We've heard from our customers that they were unclear about their shipping fees and this leads to disputes. The previous process was all offline and manual which included an email being sent to the customer that included a long detailed PDF that confused users even more.
The flow to pay was disjointed as customers could pay for their orders online but not the shipping fees associated with them which still had to be done offline. We needed a solution to improve this experience and had to make sure it was viable.
THE OUTCOME
26% Increase in shipping payments
With the release we were able to increase shipping payments made in the app by 26% in the first month alone. Along with the increase in logistics payments made, bill disputes raised to sales team members also saw a decline of 24 compared to the previous month, a 33% decrease.
.png)
First month we were able to get 191 successful payments and good feedback on the design.
.png)
Mixpanel data showing 51% increase in successful payments (Nov to February)
DISCOVERY
Identifying key issues and project goals
With fellow designers and product managers in the team, we worked to scope the problem and review what customers are currently concerned about along with what we may think could be an issue for the user when introducing a totally new solution. We worked to have these must haves for our initial solution.
.png)
Ideation sessions that included remote participants in Singapore as well as on-site in Vietnam.
HMW statements that were voted on during the workshop.
Voting on the best solutions, we later prioritized using an effort/impact matrix.
TESTING
Testing what we weren't sure of
We had an initial solution we weren't too sure of so we tested it to see if people would use it the way we intended. We analyzed the design if users could complete these 4 main tasks:
.png)
ANALYZING
Prioritization of usability testing insights
We ruthlessly prioritized which issues we should focus on ranked by their impact, if they were a blocker and also overall effort level needed to implement.
Identified which issues discovered in testing blocked the users from completing their task
Prioritization of impact and effort level of each usability issue
DESIGN
Iterations after testing
There were a few iterations from our first prototype used in testing until the final version of the final experience. Some of the design decisions included having a tab navigation to easily switch between invoice types to help scale this solution and increase payment adoption.
.png)
FINAL DESIGNS
Making detailed billing fees simple to understand
There were a few iterations from our first prototype used in testing until the final version of the final experience. Some of the design decisions included having a tab navigation for easy switching between invoice types in order to help scale this solution and increase payment adoption.
.png)
Our final design features tab navigation for order and shipping invoices, along with a general breakdown of the invoice.
.png)
A fee breakdown page enables users to view all the bills that are part of a particular invoice. We also added a banner, which aims to provide clarity to users regarding their bills.
RESULTS
Exceeded our expectation but room to optimize
From November to February, we witnessed a 51% increase in successful payments on our app, which exceeded our initial expectations. We are consistently monitoring the payment adoption rate on Mixpanel and gathering user feedback from our sales account managers and Hotjar questionnaires to further enhance the payment journey.
.png)
