KasPro UX Study Case
KasPro is an e-money platform server base of payment and financial services app that allows its customers to make transactions in various services such as airtime, purchase of electricity tokens, payment of various bills, payment of public transportation, payment in shops and can open a bank account with one click away, solving a need for million of users nationwide. Our big challenge was to do this hassle-free and easy to use.
The company has launched e-money app before, due to the company wants to focus on the new wallet and launched a new service line, we have developed KasPro as a new version from PayPro
We adopted a design thinking approach to tackling problems in previous app by understanding the human needs involved, re-framing the problem in human-centric ways, by brainstorming, prototyping and testing to reduce risk and uncertainty
I worked on user research, observe user experiences and motivations, define the problem, ideate, prototype, propose and convince stakeholders and test during product’s development. Hence, uncovering the problem and building solutions customers really want.
“It’s not the customer’s job to know what they want” — Steve Jobs
Empathise
First of all i started to look at a few competitors, observing & analysing UI, UX, User Flow, IA and key features.
I won’t go into detail however, as I want to keep the focus on the research which has been made on Paypro itself.
User Persona
Going further, i describe the individuals who use our product to efficiently identify and communicate with.
The aim would be to create hassle-free e-wallet and improve the functionalities to provide seamless experience for each persona.
User Review
In user reviews not highlighted relevant issues about usability, most of the complaints are about app bug. However i got insight that we can add new features like top up via virtual account and purchase game voucher from apps.
Pain Points
From user interviews, we got some paint points :
Navigation
- How do i find my transaction list?
- Is there anyway i can see my favourite list easier?
Reliability
- Pay with merchant code or token? I’m a bit confuse
- I don’t know that Paypro can pay other bill
- Why the price changing all of sudden?
- I really worry if i have to input pin before knowing total price I should pay.
Promo
- Where is the promo banner?
- I can’t click the banner promo, i need to read t&c or something
Define
Goals
- Clear apps navigation for better experience
- Transparent method for the top-up
- Highlight promo
What Problem to Solve
- User can see transaction history easily
- User can pay using QR code, barcode, merchant code and token
- Users can proceed the payment without having a sufficient balance
- User confused when input pin before knowing the total price
- Users may get confused when topping up using other banks
- Several users failed to top-up because input the wrong VA number
- User can see promo on the first layer
Ideate
I created a mind mapping for brainstorming and define the structural design of shared information environments, i also created wireframe to explore design alternatives. During that phase i started off with a usability testing with paper prototypes enhances the quality of the user’s experience in a meaningful and valuable way.
after that, i refined the wireframe and move to hi-fidelity mockup. Starting from the what, who, & how to solve them and introduce new features overall to improve the UX.
Homepage
One of the most important changes that i made was getting rid of the hamburger menu.
Navigation — I’ve designed a Tab Bar, pulling out the Favourite, Transaction and Profile from the IA, so the user can easily find their transaction history, list their daily favourite payment.
Why? base on research, hamburger button is less efficient cause hiding features off-screen behind a nondescript icon in the corner is a poor mobile design choice. Interaction theory, A/B tests, and the evolution of some of the top apps in the world all support the same thesis: The hamburger button is bad for engagement, and i definitely replace it with a tab bar.
Features — I combine the pay with merchant and pay with token in one PAY menu, and added pay with QR code/ barcode. At the same time, i made sure that all the feature was positioned in the same group so it was clearly explained what user can do with the balance.
I also added our new feature, KasPro Bank with it own balance and an arrow to the right that clearly direct user to it own features. Open a bank account with one click away.
Product — I’d also highlight another product like PDAM and insurance and add new badges for introduced our new product where the user can pay school and various game vouchers, in which the user has more option for one stop solution payment.
Promo — I moved promo banner from second layer to homepage, so user who doesn’t yet know what to pay/buy, able to explore more and try our services. I also made link out to our website promo page as one of our goal is highlight that.
Pulsa Prepaid UX Flow
Based on data from Google Analytics, Pulsa prepaid page is the number 1 sequence seen by the user. But there is a problem that is found which is quite time consuming because to buy Pulsa the user needs input their own phone number and worry about the final price since the have to input it before knowing the exact number to pay.
I removed input phone number action, and made autofill their registered phone number, so the flow becomes more concise. I also switch the action between input pin and payment confirmation, in which the user has been shown the total price before input their pin. — This issue was spotted in the user interviews.
I’d also like to added new action, when the amount insufficient, error message shown with top up button to give user suggestion and easy access to top up page.
Top up page
Several users failed to top-up because input the wrong VA number, users may get confused when topping up using other banks was the issues.
I added copy in virtual account number, so user can easily copy that text and decrease input wrong VA issue, also re-grouping between listed bank and other bank top-up option.
Other Page
Conclusion
Understand user pain points from user interview, collecting all the internal feedback and translate it into UI/UX solution was this project’s biggest challenge, which i found that sometime user know what they want, but don’t know what they need. Iterative user research and prototyping led to a final product that reduces spelling mistakes by 50%.
Deep analysis and additional testing needs to be conducted in order to refine and validate the solution.
What about you ? I’d love to hear your thoughts about that, also if you’ve found successful in your UX challenges. Feel free to reach out to me to chat or grab coffee if you’re in Jakarta.
Thank you for reading! For another portfolio, you can check here
