Portfolio – NoQ


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


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


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.


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


Amaranth color (shade of red) symbolizes the arrival of spring and it will evoke the festive mood of lichun and Chinese New Year.


节(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


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
  • Default account saved on App to speed up Withdrawal and Deposit process flow
  • Presence of Express Withdrawal Amount Button at Main Menu
  • Weekly reminder to withdraw the regular cash amount
  • Function to locate nearby ATMs
  • Button design
  • Welcome screen wallpaper
  • Variations in design theme based on festive occasions
  • Transfer user point of interaction from Smartphone’s screen to ATM’s screen in process

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


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.

Concept Video