U Trust
Credit Card x Compass Card
in your mobile wallet
Overview
In this school project, we were assigned to create BC student pass. Initially, it is the card that has the same concept as "U Pass" - transit pass of students in BC.
However, based on our findings in user interview, we discovered other users’ pain points and needs which leads us to the idea of the U Trust card that not only combines credit card and compass card but also able to add to user virtual wallet.
Interview users to explore problems
We interviewd 5 international students in Vancouver. In addition to simple questions like name / age / type of school, we designed our questions to ask about:
- Their living experience in BC as an international students
- Their spending
- Good and bad experiences with BC transportation and
- What they think, if being offered, could improve their living experience
How Might We?
We analyzed our findings from the interview by categorizing user problems. We find that “discount” is the most popular area where users have concerns with the most as well as the "virtual card" option.
This leads to our 2 How might we statements as follows:
​
-
HMW design a service card for international students to help them with general daily expenses?
-
HMW combine the service card with virtual wallet so that users don’t need to carry physical cards?
Solutions
From finalized HMW, we brainstormed solutions on the topic that we are interested in. Eventually, we saw that all the solutions we were thinking of are already available features for credit cards. So, we decided to create a special offer credit card to BC students that partnering with stores in BC.
User Flows & Sketch
As this is a new product, we had to design the user journey ourselves. Based on the HMW statements, our product requires 3 journey phases:
Sketch
We work individually on our idea sketch for the main features of the product. Then later we presented and discussed our ideas with each other. After the discussion and adjustment of our sketch, below are the screen for our main product feature for us to work on wireframes in the next step.
Wireframe
Flow 1: add card to apple wallet > pay for grocery > confirm your cashback received from the purchase
Flow 2: check for store that give the highest benefit for grocery shopping
Flow 3: check latest transaction on compass card
Usability Test
After finished our 1st prototypes, we conducted our usability test with 3 users. All our 3 tasks were completed successfully. Below are the points where we observed while moderating the usability test:
Testing flow 1
1. There is a little confused by the word ‘Balance’ and ‘Available’ of their credit card summary on the homepage
2. One user would like to see cashback amount summary on the credit card summary session on the homepage
Testing flow 2
Users cannot go straight back to homepage from reward page
Testing flow 3
Users cannot go straight back to homepage from compass card summary page
Iteration
Testing flow 1
1. Team discussed the idea to add cashback amout balance on the homepage, but we find that it will confuse our users evenmore with too many number. Also we did competitor analysis with mobile banking applications, they also don’t put this information on the homepage. Team decided not to add this information.
Option 1
Option 2
2. Changed design of credit card summary to a credit card shape to create better hierarchy and reduce users cognition
3. Added total cashback amount on the payment confirmation page to make users happier! ><
Testing flow 2 & 3
Added tab bar to ‘Rewards’ and ‘Transit’ screen for users to easily go to main screens
Hi-Fi Design
Define a style tile
We would like to make our application in dark theme as it gives users an innovative feeling. Our target users are international students, so the modern theme will be suitable. Our Primary and secondary colors are yellow and blue respectively as those are the colors of the compass card which application users can easily understand and link our digital product with the physical one they are used to.
In terms of typography, we chose Sans Serif style - Montserrat as its modern style aligns with our theme concept. The font is easy to read and has many varieties for us to create hierarchy.
Mock Up
Conclusion
Users feedback
-
The flows are smooth and easy to understand
-
Using virtual transportation card is more convenient. And there will be less chance for them to loose the card
-
Good idea to have everything in one place
-
Concern about security, in case they lost the phone
-
Some banks require deposit to issue credit card, not convenient for students
Future feature
Every students (international / local / public / private) get the same transportation benefits by partnering with compass card.