Credit Card Mobile App

Overview

I became the principal designer for the Credit Card Mobile App when I moved into the Digital team, taking over from an agency that had created the main portion of the app. Upon moving, I gained access to the roadmap which gave me insight into the new features being added.

I have been working on some big new features for the app, among other small changes. These include:
• Transaction Enrichment
• Freeze Card
• View Card PIN
• Request Replacement Card

Watch a Video prototype of the features

‍These are all a work in progress and so far none of the above features are live in the app. Research has been done in the form of competitive benchmarking which has formed the basis for the designs. The next step is to carry out usability tests to understand if there are any blockers in the journey.
‍
Worked with: Mobile App Product Owner, App IT Analyst, Senior Business Analyst, Technical Project Manager, Credit Card Product Manager & App Development Team
Tools used: Figma, Userzoom

Transaction Enrichment

Transaction enrichment involves giving the user enriched data relating to a particular transaction. In the case of a credit card app, this includes data such as merchant, time and date of purchase, location of merchant, product or service bought and whether the transaction was online, debit or credit.

Competitive benchmarking

Revolut shows a map, automatically categorises the purchase type and even displays a logo for the merchant. Good layout but feel the merchant name and price is slightly lost by the impact of the rest of the info below.

Monzo clearly shows the category under the map. Ability to add your own notes and photo of the receipt for expenses purposes is a nice touch. Both Revolut and Monzo push the bill splitting feature.

Amazon credit card with Newday. Small modal with little information other than the price and a mixed sentence containing merchant and address. Two dates is confusing and fraud message is too distracting.

Santander is the least rich in data. Information all bundled into one sentence and a large icon displaying the money went out. Would be nice to split the info further or fill the white space below.

RBS splits the information but again the two dates is confusing. The data in "More information" is not helpful and the capital letters focusses the eye on it. I like that you can export as a PDF.

Design

Using the competitive benchmarking as inspiration for what works well and what doesn't, I created 4 versions of the transaction enrichment screen for the app while still following the brand guidelines. These were created for iOS and Android.

Freeze Card

Freezing your card allows the user to put a temporary hold on their card to help them stop spending, or in an emergency if their card has been lost or stolen.

While doing research into other banks that have the freeze card feature, I stumbled across a UX Consultant by the name of Built for Mars. He predominantly audits user experience journeys, and on his website goes into detail about banks that have the ability to freeze card. This was a very valuable piece of research that came in handy when thinking about the design for Sainsbury's Bank.

Competitive benchmarking

Freeze card in Revolut is easy to switch on and off, however unclear whether that CTA will freeze straight away, or take the user to another screen.

Freeze card is in the easiest position in Monzo. Right below the graphic of the card and even has a nice animation showing the card freeze.

Switch is used in Amazon Newday to freeze/unfreeze card. No information about what the freeze actually stops though.

Santander don't seem to offer freeze card as a feature. All in all, their app is the weakest in terms of UI.

RBS gives a short description about what the freeze affects and even has a tooltip to give the user more info.

Design

The main "Settings" screen in the app was a very minimal screen. The only items were "Log out" and "Enable Face ID". As the majority of the new features would sit in the Settings screen, I redesigned it. I made sure to give users a good understanding of what each CTA would do and where it would take them. This would help with decision making and hopefully improve the user experience.

The first screen below is the updated Settings screen and then the following 3 are the journey for freezing your card. To unfreeze your card is the journey in reverse.

View Card PIN

View Card PIN is useful when the user forgets their PIN used to access their account at a cash machine. However, this feature provides the biggest challenge when it comes to fraud, risk, information security and compliance. There are so many issues with the fact someone could potentially steal someone's money if they knew their PIN, so this feature is probably the furthest away from development.

Competitive benchmarking

Viewing your PIN was easiest in Revolut and Santander. Revolut had a timer that the PIN was viewable for. The only step to get to this screen was biometric ID for security.

Monzo required your app PIN, followed by a picture of your photo ID and a quick selfie video. This seems drastic compared to Revolut but then again it's critical information for fraud.

Amazon Newday had these clunky boxes with padlocks that revealed on clicking each one. Nice idea but could be executed a little better. Also like the note for screen readers, just hope this is read out.

Santander was relatively simple. Just biometric ID and then the pin was revealed on the screen. Unlike Revolut's 5 seconds, Santander revealed the PIN for 20 seconds.

RBS doesn't allow you to view the PIN in app, rather it requires you to enter all your personal details on their website and then they email you the PIN. Not sure if this is safer as emails aren't the most secure.

Design

The first screen the user would see when trying to view their PIN would be either biometric security or app PIN security. The app PIN is a 4 digit code the user creates at registration. Once they are successfully past the security screen, they can then initiate a timed window where the card PIN is visible. For users with visual impairments, the screen reader would read out the length of time they have to view the PIN or for it to be read aloud by the device. The length of time is still to be decided - not too long that it causes risk, but not too short that visually impaired users don't have time to adjust.

For this journey, a few different variations were designed - timer controlled by switch, tap and hold to view, and switch on and off.

Security

Timer controlled by switch

Tap and hold to reveal

Switch to reveal

Request Replacement Card

If a user's card is lost, stolen or damaged they will require a replacement. This feature will eventually all be automated through the app but stage 1 will involve only being able to request a replacement through the app if their card is damaged. If it's lost or stolen, the user will need to phone the call centre.

Competitive benchmarking

To request a replacement card in Revolut, you have to first freeze your card. This isn't clear from the menu and took me a while to figure out how to access the replacement screen.

Monzo is very straight forward. From account, there is a CTA labelled "I need a new card". From here you can select why you need a new card, what address to send to and even change the name on the card.

Amazon Newday is fairly straight forward. You have the option to say whether it's lost, stolen or damaged and whether your PIN has been compromised. One of their nicer looking journeys.

Santander includes a lot of detail in their journey. They have steps to make sure you haven't had your PIN compromised and they check your address before sending.

RBS is simple, large CTAs for each option and clearly you have to call the contact centre to report it stolen for fraud reasons. Big font sizes here make it easy to know what to do.

Design

The app won't support the request for a replacement if the card is lost or stolen, but I decided to keep those options in the journey to help direct the user to the number for the call centre.

If the user selects lost or stolen, before they are directed to the call centre number, the new journey offers them the chance to freeze their card to avoid any fraud payments being made.

If the user selects damaged, they have to confirm their address and then are presented with a success screen that contains a link to FAQs. These FAQs have answers relating to the process of receiving a new card, whether they have to register it or not and how long delivery is likely to be.