top of page


Credit Card Wallet Mobile App
Concept ∙UX/UI


Project Summary

SMART is a wallet app for credit card users to decide the best card based on its rewards and T&C. According to the survey, there are 1.6 million credit card consumers in Singapore and with there being close to 8 million credit cards circulating in the country, credit card consumer owns an average of 5 cards. SMART aims to be the platform that allows credit card users to make better decisions on the best card to use in every situation based on all the consolidated information of their rewards and spendings. 


9th Dec - 14th Dec 2019 (6 days)


  • Adobe Creative Suite

  • Sketch

  • Principle

  • Invision Studio

My Role

● Project Planning    ● UX Research   ● UX/UI Design   ● Prototyping

Design Thinking Methodology


User Interviews

Competitive Analysis

Comparative Analysis


Affinity Mapping

Problem Statement




Feature Prioritization

User Flow




UI Design

Interaction Design

Mobile Prototype


Usability Testing


User Research

I started this discovery process with one-one interviews which would give me the depth of information needed in these areas of focus:

  1. Discover credit card spending behaviors and trends of Singaporean working adults

  2. Find out their frustrations and pain points when using credit cards

  3. Find probabilities of improving their experience of using credit cards


Research Goals


To find out

  • How credit card users deal with their various cards and rewards

  •  What they use their credit card for

  • How they feel towards credit card cashback/ air miles/ rewards


To explore opportunities to create a design solution for them


Target Audience


  • Working adults who use one or more credit/debit cards regularly

  • Aged 23-50, Singapore residents

  • Female and male

  • Single and married


Research Insights

Through affinity mapping, I uncovered credit card user trends and patterns and 4 key insights emerged:


  1. Users find it difficult to track spendings and rewards across cards.

  2. Users like to make use of promotions and deals when they're made aware.

  3. Users want to take advantage of card privileges under minimum spend requirements.

  4. Users want to use targeted cards to get the best rewards.



Problem Statement

Users need a quick, clear way to understand credit card spend and perks because they find it difficult to remember and decide as to which card they should use for the best deals.


We believe that by developing an app that allows users to track their credit card spending and reference the card perks, we will help them decide on the best card to use in each situation.


With the insights from our target audience, I identified a primary persona for the potential SMART user and created a storyboard to illustrate the possible use case scenario.


Competitive Analysis

Based on the findings above, I was able to identify those companies and services with established shares in the current marketplace that provide solutions to credit card users' problems and frustrations. By arranging them on a matrix, it is easier for us to understand the user's latent needs and explore new opportunities.

feature matrix.png

New Opportunity

Comparative UX Analysis

Besides, I also sourced inspiration and studied direct/indirect competitor products to see how they design for their users. They can serve as creative inspiration for new product features or design solutions.



At this stage, I translated the key insights into several feature opportunities and prioritize them on a 2x2 matrix. The features falling in the essential and low effort range were prioritized to be included in the MVP (minimum viable product). After that, I began to layout a user flows chart in order to get a sense of how my proposed design solution would work.


Sketching & Wireframing

I sketched out my initial ideas on paper to create an interactive prototype for testing. After a few iterations,

a high-fidelity prototype was built by Sketch and Invision Studio.


Figure 1: Paper Prototype

Figure 2: Hi-Fi Prototype


Usability Testing

To test the validity of the proposed solutions as well as seek improvements on usability, I conducted 3 testing sessions with 5 target users using the digital interactive prototype. They were assigned a task with the following scenario:


You are buying groceries at the NTUC Fairprice, the cashier tells you that the items you bought cost $50.00. Now it’s the end of the month, which credit card would you use to pay for them?




Task Completion Rate:

All 5 users were able to select the best card to use in order to enjoy the maximum benefits from the bank.



The average time spent was less than 1 minute to decide on the best card for payment.



On a scale of 1 to 5 (the easiest), the users rated the task a 4 on average in terms of its difficulty level.

SMART 2.gif

Iteration Process

paper prototpe1.JPG
Home Copy 2.jpg
  1. Using the real image of the physical card gives users a sense of familiarity.​​​   

  2. Total spending and minimum spend should be separately displayed because cash rebate is not awarded on certain expenses such as annual card fees, installments, tax payments, interest, and late payment charges.


Home Copy 2.jpg
Home Copy 2.png
  1. Users comment that the interface is cluttered with numbers, so I adopt a loading bar for cleanliness and also as a visual cue to alleviate their mental workload for calculation.

  2. The theme color is changed to black and red with reference to DBS bank since it is widely used in Singapore. Again, familiarity breeds security.


No Card.jpg
  1. Users could not intuitively understand what the purpose of the round shape and the round button is. Therefore I replace them with a card shape to emphasize the emptiness and a plus sign together with the word"add" as a signifier for the CTA button.  


What have I learned from this project?

During the usability testing process, I realized how important it is to recruit participants from the target audience. My first participant was a 44-year-old female who had never used credit cards before and couldn't understand the minimum spend requirement and cash rebate. In overall she did not understand how a credit card works, let alone this credit card management app. 


While the whole project was a huge learning experience, I especially learned that a low/mid-fi digital prototype is crucial to testing because I spent too much time on the high-fi prototype creation and its details. A low-fi would have saved me a lot of time if I had built it during the iteration process instead of jumping from paper to hi-fi prototype.

bottom of page