Scan your card

The problem

This was for Nedbank's enrolment process. We were specifically looking at a part of the enrolment were the user is asked to scan their card with their phone. There were two main concerns about this part of the journey.

Firstly, users didn’t understand how to scan their cards, so we had to think of a way to explain this in the most user-friendly way possible. Secondly, users didn’t understand why they had to enter their card details (when the scan failed).

The solution

To write very clear, instructional copy while keeping the users' possible trust issues in mind.

The process

The team focused on specific user pain points that they picked up through analytics. The formal testing was done on a varied group of people (25-45) from very different backgrounds and with very different income and education levels.

I would’ve done extensive research on the different types of people that we want to register on our app. I would then try to find out the specific problem of each persona, in terms of enrolling, and would then focus on each one of those problem statements separately. 

The UX Designer and I ended up working closely together to solve the new problems that each version would bring. There was a big focus on language since we were having problems with English comprehension as well as trust.

Iteration 1 (above, left)

The first version was put through guerrilla testing. People on the street were asked to try to enroll onto the app with their bank card. People didn’t understand how to scan their cards and why there was a picture of a camera.

When the scan fails, a screen would appear asking the user to manually enter their card and PIN details. It also warned the user that scanning was more secure.

Very few knew how to scan, and nobody felt secure, it failed the guerrilla test.

Iteration 2 (above, right)

We added a card icon to the camera icon and I tried to make the scanning instructions a bit clearer than “Scan card”.

Since some of the users in previous testing didn’t understand why they had to enter their card and PIN details we thought of adding two screens to clarify this point.

The one screen (below, left) informs the user of what went wrong and what the next possible steps are. The second screen (below, right) tries to explain why the user now needs to enter their card and PIN details.

We relooked it and, in the end, decided to scrap the two screens and to rather have one that: a) informs the user of what went wrong and b) tells the user what to do (without scaring them).

This screen would appear if scanning isn’t successful within 20 seconds.This version went through proper usability testing and the outcome was that 60% of users could scan their card.

It was also noted that the younger market could easily use the app. But people were still confused as to why they needed to enter their card and PIN details.

Iteration 4 (above left)

Some guerilla testing was done on Iteration 3 and it was found that the scanning instructions were still not clear enough to some.

I tried to make the copy even more explanatory. When the user is a second language speaker you need to be especially careful about your word choices.

Iteration 5

More people successfully scanned their cards in Iteration 4. But users still didn’t fully understand why they needed to give camera access or why they needed to enter their card and PIN details.

We decided to add some primer screens (centre and right) to try to explain the process better.The user is told what’s going to happen and that it’s secure. 

By adding the second screen (below left) we made sure that if the user denies camera access it’s made clear that he/she is choosing to add their details manually instead of scanning their card.

Iteration 6 (above right)

In this iteration the copy really works hard to emphasise that it’s safe to enter you card and PIN details. This version wasn’t tested due to booking and administrative issues. At least we learnt a lot that informs many ideas/changes that went onto the backlog. Some take-aways are that people aren’t comfortable with sharing their card details but will do so if it’s the lowest barrier to entry.

Luckily, the biggest portion of our targeted clients/new users are young and upwardly mobile, so they’re more likely to successfully interact with the app.

Unfortunately, after all the time spent on the scan functionality, it ended up not being included in the app enrolment process because it made the app size too big.

If it had gone live, I would’ve kept checking analytics to see whether users were reaching their goals and where the stumbling blocks were so we can look at previous findings and further improve the user’s journey.