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
_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
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
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.
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.
Final Design
Card | Changed from 'profile' and included on the global navigation for easy access to all things relating to your card.
White background | To enable users to read information and call to action buttons more clearly.
Show card details | An additional level of fingerprint security to show details based on user testing.
Freeze button | One tap option to freeze and unfreeze in the event a card is found.
Home screen and card screen
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.
New card delivery screens
Conclusion
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.