MasterCard — Pre-Paid Card Management. A UX Case Study.

How to solve problems in-app, following users’ goals

This was a live project with MasterCard (www.mastercard.co.uk) as our client.

Brief: MasterCard asked us to develop a successful flow to allow users to manage their pre-paid cards as well as to resolve problems like lost/stolen card and PIN recovery. Their existing product is called Cash Passport (www.multicurrencycashpassport.com/)

UX Methods
Competitive Analysis, User Interviews, Affinity Mapping User Flows, Personas, Scenarios, Design Studios, Sketches, Paper Prototyping, Digital Wireframes, Usability Testing

The Team
4 UX Designers

Sprint Duration
2 weeks (March 2019)

Overview — MasterCard

FIRST — MasterCard wants to allow users to manage their card and solve problems in-app.

To do that, they requested a redesign of the card management section, which would provide a clear and simple flow, where users feel secured.

SECOND — As KPI MasterCard will track the number of calls to its service centres

To reduce the calls we needed to understand the primary needs and goals of the users when different problems arise, especially during holidays abroad.

Constraints — Security and Usability

• Our solutions need to be integrated into the existing capabilities and offers of MasterCard, to reach maximum results with the lowest costs.
• Security was one of our primary concerns. We were given space to propose alternatives and shorten its steps.
• Catering also for older and not tech-savvy users meant keeping our focus on intuitive steps and clear, simple copy.

№1: Research — Competitors & Current Experience

COMPETITIVE ANALYSIS — BANKING APPLICATIONS

For this competitive analysis, we examined 5 major banks and 2 fintech startups broadly used on the market.

Goals of Competitive Analysis

1. How the different applications allow users to manage their cards
2. What steps are needed in case of stolen/lost card or forgotten PIN

Main Findings

• Half of the competitors have an option to see the card details in-app
• 3 out of 7 allow you to freeze and block the card on the app
• To retrieve the PIN most of them has an additional level of security
• Retrieving the PIN often requires waiting and it cannot be done instantly

CASH PASSPORT — CURRENT USER EXPERIENCE

We analyzed and tested the card management options in the current Cash Passport application.

Goals of Experience Analysis

1. What is the current user flow in the app? Is it clear for the users?
2. Can users find and retrieve their PIN easily?
3. What are users’ expectations in case of lost or stolen card?

The current screens of the Cash Passport app: homepage, card management, settings

Main Findings from Experience Analysis

• “My Profile” in the navigation confused users
• Finding the PIN required cognitive effort
• Users expect to find the PIN in the card management section
• Users expect to be able to quickly freeze and block the card

Users’ quotes from the testing sessions we conducted with the current Cash Passport app

Key Insights from Testing and Interviews

• Ease of use is the primary focus for the card management
• Facing problems, users expect clear and quick actions
• Too many security steps can create a bad experience
• The digital fingerprint is a trusted security measure

Two sessions of Affinity Mapping after rounds of interviews and testing

№2: Discover — Persona & Scenarios

To summarise the insights generated from testing and affinity mapping, as well as to inform our upcoming ideation phase, we created a persona and two scenarios.

PERSONA

It represents the users’ main needs and pain points, which were discovered through the research process.

Abby: our persona representing the insights gathered from all the interviews

SCENARIOS

Next, we created two scenarios, which we kept in mind during the design phase as well as during the testing sessions.

• This enabled our testers to navigate through the app with purpose.
• Also, it was useful for us to keep the user’s goals at the centre of our design process.

The two scenarios we used during the design phase and the testing sessions

№3: Ideation — Design Studios, Wireframes, Testing

• After gathering all the findings and insights, we moved into the ideation process. We run and facilitated a Design Studio with our stakeholders.
• This allowed us to involve them in the creative process, gather numerous useful ideas and develop a shared vision.
• We then ran another design studio as a team, to further refine them.
  We chose the best ones to put together and test.

The Design Studio: we set down with MasterCard and together created different possible ideas and solutions

Findings — Usability Testing

• Users need feedback at all stages and to be reassured
• Users want additional security, but with fewer steps
• The fingerprint is an expected and trusted security measure
• A careful user flow will let them trust the app, without the need for additional support

№4: Iterations — From Pen & Paper to High-Fidelity

We created a paper prototype to run different rounds of testing. After gathering the findings, we moved into digital wireframes and tested them again.

This allowed us to quickly let go of problems in the design, and to build on what worked.

Order a New Card — Confirmation page:

The information was prioritized to better suit the users’ needs. Steps to finding more about emergency cash and live support were included, as well as an option to track the card shipment.

The bird was not liked during testing and was replaced by a much faster and reliable spaceship!

Card Management Page:

The design was improved, using both words and icons to make each action easier to understand. Clear messages, when the card is frozen or blocked, were added to provide instant feedback to the user.

Organizing the buttons vertically gave more space for a clearer description, providing also ease of use.

№5: Delivery — Clickable Prototype

Our deliveries included a high-fidelity prototype of the card management as well as a detailed report of our research insights and findings. A simple and clear presentation outlined all our processes and results.

The Prototype

Video of the prototype

Animated gif of the prototype

ACHIEVEMENTS

Using research and testing were fundamental steps into understanding the real needs and pain points of the users. More importantly, they gave us the knowledge to solve each step in an effective and smooth way.

We were able to work closely as a team, prioritizing a supportive approach to ideas and sketching instead of endless debating. This allowed us to concentrate on the essential and focus our energy with clearer goals in mind.

Key Achieved Goals

• Users found the experience easy to understand and repeat
• Feedback is provided during the flow, reassuring the users at each step
• Users felt confident in resolving the problems through the application, with seldom use of the service centre option

CONCLUSION

This was the second project with a live client during my the General Assembly’s immersive course. It was a deeply interesting experience. Working with a global brand like MasterCard was exciting and also extremely positive.

One of the main learning from this experience for me is that, with small brands or international companies, delivering clear results and recommendations based on actual research and users’ feedback, is extremely valuable for you and your clients.

We applied our knowledge and UX methodologies to further the improvement of a great product. Being supported and encouraged by our stakeholders at MasterCard to explore different directions and solutions has been a highly gratifying experience.

About the Author

I am a graduate from General Assembly, London, User Experience Design Immersive (UXDI) programme. I am always happy to exchange ideas and meet for a coffee or a quick chat.

My design works can be viewed in my portfolio.

Also, leave your feedback to help me improve.