master.png
iconfinder_icon-ios7-search-strong_21181

Discover

Stakeholder Interviews

Competitor Analysis

Application Audit

Screener Survey

User Interviews

Define

Affinity Mapping

Personas

Scenarios

User Flows

Develop

Design Studio (with client)

Paper Prototypes

Mid-fidelity Wireframes

Clickable Prototypes

Usability Tests

Deliver

High Fidelity Prototype

Client Presentation

Deliverables handover

Mastercard

An iOS mobile banking application for a prepaid multi-currency card 

The problem

Mastercard’s 'Cash Passport' is a safe and convenient way for customers to spend their money in-store, online or at ATMS at millions of locations worldwide using their own prepaid funds.   However, 20% of their customers need to call every year for help with the product and only 20% use the product more than once.

 

Mastercard came to our team at General Assembly to help them rectify this. With a focus on helping them redesign three user-centred journeys for card management, lost or stolen card and pin retrieval within the 'Cash Passport' mobile app.  

The toughest challenge

Building the journey for a new card delivery wasn’t part of our initial brief, however through user testing it became a real focal point of the lost card journey.  It took several rounds of usability tests to get this right, as we needed to uncover users' motivations and frustrations through testing rather than initial research. Yet, in doing so we uncovered a real potential USP and selling point for the product and the app.

Client 

Mastercard

Timeline

2.5  week sprint 

My Role & Tasks

UX Designer & Researcher

Stakeholder management,

4 User Interviews,

3 Competitive analyses,

Designed low to high-fi wireframes,

8 Usability tests,

Workshop facilitation,

Client Presentation

Team

Zena Zerai

Márta Zimányi

Shuk Hing Ho

Davide Tremolada

The solution

My team designed a brand new card management system and information architecture within the app. Enabling users to access their card details, freeze their card, retrieve or change pin and report lost or stolen card. We incorporated  a new card delivery and tracking system. This gives the user much more control within the app to solve any issues, consequently minimising their recourse to the customer service helpline.

Read the in-depth case study below

Client kick-off meeting

We held an initial client meeting at Mastercard's head office in Canary Wharf. Here we were able to clarify the scope of the brief and find out any additional information to help set us on the right course for our research and designs.

The brief was to design the journeys for the following within the app:-

  • Card Management

  • Lost or Stolen Card

  • Pin Retrieval

2a. My card (Balances tab)_2x.png
5e. My profile Reveal CVV_2x.png

Existing designs for Cash Passport homepage and card detail page.

The lay of the land

We conducted a broad range of competitor research, looking at mobile banking apps for traditional banks, modern fintech banks and travel companies. This enabled to spot what was and wasn't working in the marketplace.

  • Pin retrieval  |  The more traditional banks required numerous security steps and retrieving the pin wasn’t an instant process. In some instances taking days for the pin to be physically delivered by post.

  • Card details  |  Half of the competitors we analysed, allowed you to access card details within their banking app.

  • Freeze card  |  A minority enabled you to freeze or block the card within the app.

Analysing the current offering

IMG_5204.JPG

We tested the current Cash Passport app on a number of users to find out where there may be issues.

 

My Profile | Card details were stored here however, users felt ‘profile’ referred to only personal details.

Lost/stolen card  |  Users wanted to be able to freeze the card quickly. They struggled to find this area within the app.

Pin retrieval |  This was hidden deep within the hamburger menu and settings and users wanted to be able to access this quickly.

Getting to know the users

42 screener respondents

8 user interviews

Finding out about users' motivations and frustrations while using mobile banking apps and their experiences using holidays abroad was really important.  Using the data from a screener survey and the in depth interviews, we were able to identify the most common points. 

  • Touch ID security is trusted by most

  • Speed and ease of use is important when using mobile banking

  • Users find too many security steps frustrating

  • Users need reassurance an action has happened within the app e.g. frozen card

Defining our user

Screenshot 2019-04-15 at 12.20.13.png

We designed a persona called Abby to help encapsulate the motivations and frustrations of our users and formed scenarios around this persona. This helped give direction and purpose in the ideation stage.

Ideating with the client 

We then held a design studio with the Head of Product at Mastercard, to come up with some rough solutions to our scenarios. This helped us get the client on board early with our design decisions and to get their valuable input based on their in-depth understanding of the product and the business.

IMG_5320.JPG

Testing our designs with users

44 users tested 

4 rounds of usability tests

Through conducting usability tests we were able to design the best user experience within the app.​

  • Not all users understood the word 'Reveal', this was amended to 'show' 

  • Users liked the easy one step click to freeze and unfreeze

  • We originally had the three journeys under an urgent button based on design studio, but this was deemed too stressful by users, so we changed to 'card'.

  • Users wanted to a secure pick up location for card delivery and to amend the location

  • Users wanted to be able to track the card delivery

  • Happy with two-step verification for the pin.

1_LvPCFPZTw7sLIADNrBpwaQ.png

Final Design

Screenshot 2019-04-15 at 18.03.13.png
Screenshot 2019-04-15 at 18.32.12.png

Card | Changed from 'profile' and included on the global navigation for easy access to all things relating to your card. 

Screenshot 2019-04-15 at 18.32.16.png

White background |  To enable users to read information and call to action buttons more clearly. 

Screenshot 2019-04-15 at 18.32.20.png

Show card details | An additional level of fingerprint security to show details based on user testing.  

Screenshot 2019-04-15 at 18.32.24.png

Freeze button |  One tap option to freeze and unfreeze in the event a card is found.

Home screen and card screen

Screenshot 2019-04-15 at 18.32.12.png
Screenshot 2019-04-15 at 18.32.16.png
Screenshot 2019-04-15 at 18.32.20.png
Screenshot 2019-04-15 at 18.32.24.png
Screenshot 2019-04-15 at 18.39.34.png

Address | Different secure pick up point options and delivery dates.

Map | Option to amend your delivery location if you are travelling elsewhere.

Confirmation page | Reassurance of the delivery date and that the customer will be sent notification of the card delivery.

More details | Option to find out about how to access money in the meantime and how to get in contact with the bank for further enquires

Track your card | Users wanted a way to monitor the card delivery particularly when abroad. 

Screenshot 2019-04-15 at 18.03.06.png

New card delivery screens

Conclusion

5fbc9a33-a060-4e5e-864d-962e54d2c372.JPG

We presented our findings to the product team who were extremely happy with what we had achieved in the short space of time. 

We were able to user test the necessary security levels needed to ensure users felt the app was prompt but also secure and were able to build on the application's USP of card delivery abroad.  

What I learned

  • Importance of copy |  This is even more significant for a global brand. The words need to be universally understood.

  • Flexibility | While you may have goals within the initial brief, it's important to be open to change. This may have the potential to open up a whole avenue of growth for the product and its USP.

Next Steps

  • Security  | An alternative to fingerprint ID, as it didn’t always work well everyone's mobile devices.

  • Lost Card  | An option to call Helpdesk earlier in the journey.

  • Card  | Option to report card lost or stolen straight away and order the card at a later date.

Thanks for reading!

If you'd like to learn more about the project or just have a chat, please feel free to send me an email.