SMART

Credit Card Wallet Mobile App

Concept ∙UX/UI

Overview

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.

Timeline

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

Tools

Adobe Creative Suite
Sketch
Principle
Invision Studio

My Role

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

Design Thinking Methodology

discovery

User Interviews

Competitive Analysis

Comparative Analysis

define

Affinity Mapping

Problem Statement

Hypothesis

Persona

ideate

Feature Prioritization

User Flow

Sketching

Wireframing

prototype

UI Design

Interaction Design

Mobile Prototype

test

Usability Testing

Discovery

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:

Discover credit card spending behaviors and trends of Singaporean working adults
Find out their frustrations and pain points when using credit cards
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:

Users find it difficult to track spendings and rewards across cards.
Users like to make use of promotions and deals when they're made aware.
Users want to take advantage of card privileges under minimum spend requirements.
Users want to use targeted cards to get the best rewards.

Define

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.

Hypothesis

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.

Persona

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.

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.

Ideate

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

Testing

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?

Outcomes

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.

Efficiency:

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

Learnability:

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

Iteration Process

Using the real image of the physical card gives users a sense of familiarity.
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.

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.
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.

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.