Kilo Online Payment
PRODUCT OVERVIEW
Kilo's business goal is to allow retailers to browse products for their grocery store from many different distributors or wholesalers to ensure they can find the most suitable prices. Retailers can browse products based on name, sellers, categories, or brands, then add them to their cart, checkout, and wait for delivery. To support our retailers who are not very tech-savvy, we also have a Kilo Sales Team to support retailers in placing an order. We built some dedicated features in the Retailer app to help the sales team do their work.
My Role
End-to-end UX Design
UI Design
Tools Use
Figma
Adobe Illustrator
Notion
Jira & Confluence
Duration
3 months
UX research - 1 month
UI refinement - 1 month
Development - 2 months
My Contribution
Concept Ideation
Prototyping
Competitive research
User research
Interaction Design
Animation Design
THE PROBLEM
Cash transactions have long been a cultural norm for Vietnamese small and medium-scale businesses. However, the outbreak of COVID-19 has directly shifted this traditional habit, and people have increasingly turned to e-payment gateways for their daily transactions. Recognizing this cultural change, Kilo has been compelled to adapt its payment methods on its application to remain viable in both wholesale and retail markets."
THE SOLUTION
E-payment gateway integration that can act as both a secure bank account and transactional card for payments and transfers
MY PROCESS
1. UNDERSTAND & EMPATHISE
Problem Statement
The user needs a way to finish order transactions, keep track of their order's status, pay contactless in stores, and transfer money in a fast and secure way because currently, it can be very confusing and hassling to keep track of multiple credits
and debit cards.
We will know this to be true when we can see users only needing and using this e-payment gateway to manage their transactions
List of Problems
-
Keeping track of multiple credit and debit cards can be a hassle
-
Managing your money and monitoring your spending habits can be confusing and tedious.
-
Many people are apprehensive about online banking due to security concerns.
-
Complex transactions and international transactions to different currencies can be difficult to do through online banking.
Objective
-
Identify any obstacles from customers when they experience the current application. Thus, Kilo staff will discover opportunities to improve the services
-
Identify any obstacle from retailers when they need to handle payment of a large amount of deposit to Kilo each month.
-
Acquire insightful data for Pay Collection ideas to support collecting debts for Buy Now Pay Later (BNPL) in the future.
-
Observation of how retailers make orders and use payment. Hence, insightful data for Pay Collection ideas will be collected to deploy the bank transfer method and Buy Now Pay Later (BNPL) in the future.
Potential Solution
An integration with an online payment gateway that can act as both a secure bank account and transactional card for payments and transfers. The app will provide a secure and efficient method to store multiple credit and debit cards; with the ability to track previous transaction history, provide budgeting tools, allow for easy and intuitive money transfers globally, and authorize contactless payments for in-store purchases.
Phone Survey
The Kilo product team conducted phone survey to learn more about the users’ general attitudes towards digital payment and understand how they use them. I gathered the top 20 retailers on the Kilo platform. Participants were aged from 30 to 65 years old.
SURVEY FINDING 1
Over 80% of them know how to use bank transfer (they use e-payment to pay electric bills or school fees). Thus, they are willing to use this method for Kilo, if we can give them a discount.
Also, those who love bank transfers stated that they need discounts on bills to use this method.
SURVEY FINDING 2
5 retailers claimed that BNPL is nice to have. Still, they will use it in case they currently run out of money. Also, zero penetration fee in the first 7-10 days is their first priority
SURVEY FINDING 3
All retailers who were interviewed (via phone and physical conversation) claimed that they want to receive products and then pay cash to 3PL or finish their transaction via payment gateway
Transaction completion via payment gateway has widely been trusted and adopted by users
To view the user surveys in more detail, click the button.
Retailer Face to Face Interview
-
Discovering more about retailers’ attitudes to bank transfer and buy now pay later.
-
Learning about users' behaviors when using payment gateway.
-
Understanding why users choose the digital payment apps they use.
-
Finding the pain points users have with their current digital payment system.
To view the retailer interview in more detail, click the button.
In order to organise the results and better identify insights, an affinity mapping exercise was performed. The following insights were found:
INSIGHT 1
Users find it tedious and difficult to track their spending habits for multiple bank cards and accounts.
Opportunity: Allow users to store and track multiple bank accounts and cards in one application.
INSIGHT 2
Some payment gateway have a complicated UI and slow or confusing methods for transferring money.
Opportunity: Aim to have a simple and intuitive user interface that allows users to send a payment, easily and quickly.
INSIGHT 3
Most participants did have a tried and tested method for budgeting and finishing transactions.
Opportunity: All users felt they would be more likely to save money and budget appropriately if there was a feature within an app to help accomplish transactions.
By synthesising the data from our user research methods, I was able to create insights which were then used to capture the essence of our target users, in the form of personas.
Payment Gateways Analysis
Kilo currently does not offer any online payment functionality to retailers and sellers. In the past, Kilo offered mobile bank transfer via VNPay, however, with a 1% transaction fee on e-payment orders via VNPAY, the transaction costs completely wiped out kilos revenue and the program was ended. Thus, Kilo would like to integrate a new payment gateway as a payment type to reduce COD risk, reduce cancellations, and support the pilot lending program.
The last takeaway from the examination of e-payment gateways is that there are always numerous possibilities for Kilo. Due to Kilo current situation, we must select the affordable unit to integrate which is Neopay
2. DEFINE
User Persona
Creating user personas helped to establish empathy with our target users and ensure that future design decisions would be based on real data from real users. By keeping our persona in mind, I could then make sure that our users’ needs and goals are the top priority when trying to prioritise the key functionalities of our solution.
A persona was created to cover the distict type of users that partake in online banking.
Each persona created has distinct motivations, needs and goals required from our solution, to represent each target audience.
User Journey
Using the research conducted previously, I was able to create goals and expectations that the persona may require from the Kilo app. Then, to help visualize the processes a user goes through to accomplish a goal, user journey maps was developed
By using journey maps we could tell a memorable story about a user’s goals, helping to get a better understanding of each process the user go through to accomplish one of these goals.
User Flows
Similar to the user journey maps, the user flows helped me to better understand each step the user has to take to achieve a goal. By walking through the user’s flow through the persona’s point of view, I could visually see what tasks could be completed on each page of the web app.
User flows helped to discover how many screens will be required for a user to complete a goal and assisted in finding any glaring errors in our journey maps.
3. IDEATE
Information Architechture
After creating the user flows, I was able to produce a sitemap of the Kilo web app. To validate the assumptions I used to create the sitemap and refine the sitemap further
The card sorting exercise provided a clear indication that 15/18 of the cards were in a definitive category for the participants. However, this still led to some changes to the sitemap.
Low fedelity wireframe
Creating the low fidelity wireframes allowed me to show the high-level functionality of some of my design solutions. To ensure that I wasn’t adding excessive detail to each wireframe, I decided to set a 10-minute timer for each screen and aimed to complete each wireframe within the allotted time.
After completing the initial sketches, I received actionable feedback and tips to improve the designs in specific areas.
4. PROTOTYPE
Mid Fidelity and Mockup
Creating the prototypes was an iterative process. At each stage of fidelity, feedback was received from more experienced designers which helped me to build upon the previous iteration and develop a more well-rounded solution.
Mid Fidelity Prototype: Send Payment Flow
Mockup: Send Payment Flow
Changes made
-
A light theme was applied to high-fidelity designs as this should be less straining for the users’ eyes.
-
Based on the feedback from the product owner and my collague, the text size was increased throughout the app to improve readability.
-
The payment method options on the Checkout page have been redesigned to cater to larger icons and text sizes.
-
Added highlight key features for Bank Transfer and Buy Now Pay Later to help users understand what are these online payment and make them reliable.
Prototype For Usability Testing
Below you can view the interactive prototype of the Wise Wallet app created in Figma.
To experience the prototype, click the button.
5. TEST
Usability testing
The main aims of the usability tests were to observe how easy it is for the user to navigate through the app and to discover friction points for users as they attempt to complete three key tasks. From this, I could then improve the designs by creating solutions to these issues.
Usability test plan
-
9 retailers from the target demographics were invited. The group of participants had a varied age range, profession, and gender.
-
The study was held in the participants’ natural environment as moderated in-person tests.
Usability test goal
The main goal of this usability test is to gain insight into how the user will navigate through the app and how hard it will be to complete three key tasks.
Usability test tasks
Data Consolidation
Another affinity mapping exercise was implemented to discover any patterns from the results of the test. After this, a rainbow spreadsheet was created to organize the information and Jakob Nielsen’s error severity rating scale was used to sort the findings.
KEY ISSUE 1
Users find it tedious and difficult to track their order status, they do not know where are their cargo going?
Proposed change: Redesign the order page with 2 tabs. Tab A contains all order status and tab B only display order with pending transaction. This solution will help users track which orders are being stuck
KEY ISSUE 2
Some digital wallets have a complicated UI and slow or confusing methods for transferring money.
Proposed change: Display an error notification for the appropriate field if it has not been filled.
KEY ISSUE 3
Most participants had skeptical thoughts about payment gateway security.
Proposed change: highlight key features to introduce how beneficial and secure which helps to move users along each step and allows them to use some of the features of the app.
The usability tests uncovered a few problems with the current designs and areas in which changes could be made. To validate some of these changes, preference testing was used.
REFINEMENT AND FINAL DESIGN
Key refinements
Based on the findings and insights from the usability tests and preference tests, there were several refinements and improvements made to the design solutions.
UI refinements
This is the visual design stage with a product style guide and design system for the end product. By using and gathering all these, I eventually analyze and split tasks and flows for users to achieve their desired goal. For instance: create a personalized fitness program.
Why did we change to the new version?
In the process of looking for developers, the general feedback we got was that based on the current budget and schedule, the goal of developing version 2.0 could not be achieved. Therefore, we chose the alternative version 3.0, which reduced the part of selecting and uploading the background pictures based on version 2.0, in order to retain the more critical and complex function of creating comics. We added four new backgrounds so that 10 movements can correspond to the background one-to-one, which can effectively reduce the difficulty and duration of the development phase.
LAW OF PROXIMITY
The transaction image and title has been grouped together for each transaction to help users distinguish each incoming and outgoing.
VISUAL HIERARCHY
The different text sizes and levels of boldness places emphasis on specific areas, helping to guide users. For example, the first thing users should see is the large ‘Transactions’ header which should tell them what page they are on. Next they should be able to see the transaction names and the transaction amount.
USING COLORS STRATEGICALLY
When colour is used, it should stand out from the rest of the items on the screen. Therefore, colour will be used to help differentiate different cards, accounts and Saving Spaces throughout the app.
Final Design
RELFECTION AND LEARNING
Using research as the foundation of the project to build a clear vision from the onset
One of the main things that I have learned during this project is that to truly understand the problem we are trying to solve and who we are solving it for requires a strong base of research and understanding. From this, we can start thinking of solutions and developing our design ideas.
How feasible would Kilo new payment method be in the real world?
As this was a conceptual project for educational purposes, I missed some of the cross-collaboration aspects that are involved in a working environment. Therefore, it can be hard to know which elements and features may not be technically feasible. Also, as this industry already contains so many tried-and-trusted names ranging from Momo, Zalo Pay & VNPay to traditional banks, the business viability of creating another digital wallet app is questionable.
Design, test, repeat.
I have found the iterative nature of the design process extremely important to creating a well-functioning, user-friendly design that helps to solves our users’ problems. Through iterating we can refine and improve our designs as we gain more knowledge of what is required.
“Great things in business are never done by one person; they’re done by a team of people” - Steve Jobs
This links to my previous point as the main source of information through iteration is from collaborating with others, whether it be more senior designers (my tutor and mentor) or potential users when testing. The feedback received from others helped to improve the designs in more ways than I imagined and led to an overall stronger solution.
The design process would not be so linear in a working environment
Through my meetings with my mentor and research conducted online, I understand that the design process in a real-world project would not usually be as linear and straightforward as this educational project. However, I have improved my problem solving, empathy-building and project management skills as well as my technical know-how of wire-framing and prototyping.