NoQ(ueue)
3 months | Feb-Apr 2018
Project NoQ(ueue) aims to reduce the time required to withdraw and deposit cash using e-payment mobile applications as compared to using the ATM especially during Chinese New Year. Our project aims to increase efficiency and minimize error rate. Making cash withdrawal and deposit painless!
Role: UX Research | UI Designer
Tools: Figma
Design Methods: Persona, Customer Journey Mapping, User Interviews, Contextual Inquiry, User Flow, Sitemaps, Information Architecture, Wireframing, Prototyping, Usability Testing, Design Pitch
Opportunity Statement
“Snaking lines were seen at Waterway Point in Punggol, Tampines Central and Bedok Town Centre” quoted from Straits Times article.
Our team saw this as an opportunity to innovate and think of a way to solve this while preserving the culture of physically depositing money into the banks.
Design Process
User Analysis
To understand more about how users behave, we conducted an online questionnaire and in-person interviews. Gathering the data of 18 young adults (20-30 years old) and 18 adults (30 years old and above), we realized that the usage of mobile e-payment applications are mainly for Peer-to-Peer (P2P) transactions. Also, only 67% of our respondents use mobile e-payment methods at least once in a week.
Based on the interview results, we can better understand the reasons for no/low usage of mobile e-payment and long queues at ATMs during Chinese New Year.
| Top problems to address in our project for low usage of mobile e-payment | |
|---|---|
| Young Adults (20-30 years old) | Few places/vendors accept mobile e-payment methods |
| Adults (30 years old and above) | Mobile e-payment methods are too complicated and feels that cash/credit card is more secure dependable |
| Top problems to address in our project for long queues at ATMs during Chinese New Year | |
|---|---|
| Young Adults (20-30 years old) | Slow and unresponsive ATM user interface |
| Adults (30 years old and above) | ATM user interface has too many excessive steps and pages are not optimized |
After conducting questionnaires and a series of user interviews, we arranged the findings into multiple sections in the form of an Affinity map.
- Yellow Post-it: The observations and and interpretations of the various stages that is denoted by the pink post-it
- Blue Post-it: The possible opportunities that we can leverage on to create an application to solve the user’s pain points
Through the use of Affinity map for our users, we have identified two key personas which is very useful for us to communicate our solutions.
Existing Product Analysis
Currently, there are no products in the market which allows the user to withdraw cash remotely whilst keeping the culture of Li Chun – also known as Farmers’ Day, where Chinese believe that by physically depositing money to the bank, it can help grow their wealth and ensure good luck in the new year. As such, we analyzed the process and user interface of existing ATMs to deposit and withdraw money.
Withdrawal Process
Processing Time by ATM: 22.4 sec
Actual Time Taken: 56.8 sec
Deposit Process
Processing Time by ATM: 29.2 sec
Actual Time Taken: 46.7 sec
Conceptualization
Based on the personas and the analysis of the speed of ATMs, our application needs to ensure that young adults and adults will be able to withdraw or deposit their money in the shortest time possible. In order to achieve the goal, our application should include these following features for it to be functional, efficient and useful:
- Withdraw/Deposit cash from ATM by “EZ-link Tapping” method
- Preset the amount to withdraw before visiting the ATM
- Withdrawal Reminder for user when ATM are nearby
- Integration to existing mobile banking applications
- Secure and safe protocol (Double Authentication)
These are the design principles that our wireframe, low-fi and high-fi prototype would need to adhere to:
Standard logo
Color:
Blue symbolizes and encourage one to feel calm. This fits the nature of our modular app NoQ as it is supposed to make the user feel secure when using the platform.
Meaning:
NoQ aims to ensure that the user has ultimate and fine control over each steps of withdrawals or deposit that is similar to ATM even before one arrives at the ATM. This is represented by the robotic grip (blue) that is holding on to the square box (pink).
Special CNY Logo
Color:
Amaranth color (shade of red) symbolizes the arrival of spring and it will evoke the festive mood of lichun and Chinese New Year.
Meaning:
节(Jie) represents the need to be thrifty and one should save more. This is in line with the 立春(Li Chun) context where one is encouraged to deposit money.
Prototyping Design 1
Wireframe
Mid-Fidelity Prototype
In order to design a mid-fidelity prototype after coming up with the initial sketches as seen in the wireframe section. The key functionality and how the user interact with the layout of the UI components are our main focus here.
Usability Testing 1
We designed and execute three tests with NoQ:
- UX Navigation Test: Time taken to complete the steps needed to withdraw and deposit to the account stipulated in NoQ application.
- UX Navigation Test: Errors occurred during the withdraw and deposit process while using the NoQ application.
- UI Test: Satisfaction Test on the ease of use of NoQ.
| Feature Changes | UI/UX Design Changes |
|---|---|
|
|
From the usability test and results obtained, we iterated with a high fidelity prototype that will be further elaborated in the Prototyping 2 section. The branding and colours that users prefer are also altered to suit their needs.
Prototyping Design 2
Wireframe
High-Fidelity Prototype
From the above diagram, we designed the system process of NoQ to have an overall flat hierarchy wherever possible. This was designed with the intention of preventing user confusion and frustration having to navigate too many app pages. With a flat hierarchy, we can potentially reduce the user’s cognitive overload by providing them with a simple UI that helps them achieve their goals.
Key Features
Main Menu:
Contains the summary of transactions in a clean looking graph that allows the user to track his expenditure and savings. Also, he can set the daily expenditure limit to avoid overspending. In addition, there is also a summary of the top reminders to withdraw or deposit, based on the user’s preference. The user can also use the GPS function to locate and find the nearest ATM based on his existing location. Lastly, the bottom menu bar also provides the shortcuts to the “Withdraw”, “Deposit”, “Home” and “Profile” pages of NoQ.
Find Nearest ATM:
Users will be able to locate the nearest ATM based on the proximity and location. This helps them to save time instead of walking around aimlessly to try to find an ATM.
Being a modular and easily customizable application, NoQ can be adapted to various themes during various festive occasions. This will also motivate users to use the e-payment applications as there are new features and look that brings out the freshness of the application. In the diagram below, it shows the change in theme that is based upon the Chinese New Year festive occasion.
Another feature is also added during this change of theme in NoQ. Users can now select the type of cash they want to withdraw. This is in line with the Chinese New Year cultural aspect and tradition of withdrawing fresh cash for AngPows as it represents good luck and prosperity for the new lunar year.
