Revamp Top Up Request Feature
How to optimise Top up request efficiency with clean and sleek interface ?
ROLE
User Research​​
Ideation & Prioritization​
Prototyping & Usability Test​​
UI Design​
SQUAD
Product Manager
UI/UX Designer
Engineer
BACKGROUND
When user growth increased, iteration increased all the more.
As time goes by, user growth grew rapidly and our dashboard still needs a lot of improvement. Hence, most of them found difficulties when using our platform, one of the examples is when creating a top-up request, some of the flows were counter-intuitive and user interface outdated.
​
The goal here was to visually represent how people may understand it clearly with simplified UX flow and fresh looking interface.
Current Flowchart (Top-up via Internet / mobile banking transfer)
PROCESS
Simple, direct, and agile implementation.
How might we optimize Top up flow by not increasing learnability curve?
How might we enhance dashboard interface without confusing the user?
How might we minimize the time spend by user to complete the task?
APPLICATION
Interactive Dashboard Visualisation.
What we delivered so far…
GOAL
Intuitive UX flow
Clean and fresh user interface
Increased transactions traffic rate
Problem: Pop up confirms dialog was displayed after select transfer destination which additional step for user.
.png)
Problem: Instruction form appeared as the last step before user proceeds to open internet or mobile banking which was redundant.
After we had conducted user testability with some users, it showed that our participants had an overall flat impression of the visualisation despite the experience on this journey. Hence our research insights became actionable problem statements that would help frame design considerations. The questions below “How Might We” were central to solution-oriented brainstorming.
The design phases kicked off based on our explorations and study. In this case, we felt very confident in our direction going into the development of our final visualisation. Therefore, we iterate the flow of top up request started from wireframe to high-fidelity, afterwards we continue to revamp the user interface for dashboard with additional visual display regarding digital wallet latest transaction on the overview page.
When we had a discussion with product manager, our plan was not to revamp the whole UX flow regarding Top-up request feature, but rather simplified current flow. Thus, quick moderated usability test through observation worked on this case, such as how much time did users spend to finish certain task, how they struggle through it; is there anything that they did not understand during this process and overall experience satisfaction.
1. | Digital wallet overview and additional latest transaction
As a result of our study, we learned that user mostly need to see the latest transaction that they had lately. Therefore, we decided to display it on overview, including a new interface for digital goods wallet top up limit.
2. | Progress bar for top up request
Another important change was to add a progress bar to ensure user which state they are at. Good experience, will reduce users’ uncertainty and perception of time through feedback.
3. | Simplified steps to complete the task
The last but not the least, we also reduced the steps for creating request top up by displaying necessary information so user able to launch their internet banking or mobile from our dashboard directly after completing a top up request which made the flow more intuitive.
REFLECTION
What we did well and what’s next?
As a team we feel that we were successful in developing and implementing a visualization that allows user to view differently in our dashboard with more intuitive user experience. We provided an overview, latest transaction status, and discard any unnecessary flow that was redundant for users. We were inspired to implement the 3-click rule in order to measure of a good usable product, however we also understand the focus on reducing the number of clicks can lead us to usability problems. Therefore, we tried our best to maintain every click or interaction because it should take the user closer to their goal while eliminating as much of the non-destination as possible. As Don Norman said, “It’s not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives”.
Henceforward, we would like to continue exploring ways to make progress better for payment gateway platform, but this would involve a major strategy shift on many teams and we're going to explore more ways of incorporating transaction activity.
