On-boarding for biometric payments… UX and React Native rapid prototyping case study— part 1!

Finger-based biometric platform FingoPay approached us to help with their super-cool payment system a few months back earlier in 2018 and, needless to say, we’ve had a blast helping them create proof-of-concept digital products that tapped directly into their finger-scanning technology.

So when they asked us to create an on-boarding experience, using React Native, to place within pubs that was both user-centred and used their APIs in just 2 weeks — well, we gave them the thumbs (not fingers) up! 👍👍👍

To do this we decided to design a rapidly researched and tested prototype in just one day before letting the devs run wild with the tech-side of things. Or ‘magic’ as i like to call it.

This is the first part of this blog, the second half will be from our man in Barcelona — Horacio, who harnessed the speed and power of React Native to create this piece of tech badassery.

What we were aiming to discover and create

The guys at FingoPay needed to get the wheels in motion for an effective on-boarding process — a key process for any product I’m sure you’d agree!

The overall goal was for users to walk into a pub and happily sign up to FingoPay without fussing or fighting with the onboarding process/barman. We just had to discover the happy-path user flow between walking in and signing up.

So, in a nutshell, here’s what we were looking to do on our rapid prototyping day:

Researching behaviours/motivations/painpoints

• Discover from users what information they’re prepared to give over during a signup process whilst in a real world (pub) situation
• Find out what devices do people use regularly and also have with them
• How simple/efficient an on-boarding process has to be in a pub for people not to get pissed off
• Whether a new type of payment system could be a painpoint

Create & test interactive prototype

• Create a tablet-based prototype
• Test with five users in a pub

Prototype ready for development

• Validate with dev team throughout
• Handover to devs for next stage.

Not much to do then! haha 😬😁🤓

Setting up the day — the prep

Anyone who’s ever done anything that yields quick results (workshops for example), will tell you that it’s all in the preparation.

Thankfully, the guys at FingoPay were incredibly helpful with our mission and were able to secure permission from one of their partner pubs, The Thirsty Bear in Southwark, to work from their lovely establishment for the day.

The pub is a good place to do the test, because it’s a pub where you can register your payment and then self-serve your own beer. That’s right, self-serve beer!

This meant users who were there were used to a different way of paying for drinks (which taps into the FingoPay product)… This is an advantage for testing, but not so much for research as we are looking for the underlying motivations, attitudes and behaviours that people have when signing up to a new process — especially a payments-based process.

Therefore, I did a few interviews at The Thirsty Bear, and a few at another pub round the corner — Doggets Coat and Badge. I think it’s good to mix venues up when you’re working so rapidly — however, your feet can get tired running around everywhere! haha.

We also felt that it was essential that it wasn’t just me on-site that day. We are called LeanJS and that means working lean, which means cross functional teams working closely! Therefore, Will and Alex joined me at The Thirsty Bear to do prep work for development as well as guide me on feasibility of design (more on that later).

Research insights

After doing quick-fire interviews with 5 people (to discover the majority of key issues — this is MVP after all!), the key findings were:

Giving over personal details in a signup process…

• Generally quite trusting — if users are getting something for it
• Would trust a big brand much more (Tesco, Apple, Wetherspoons etc)

General digital signup experiences

• Hate being bombarded by marketing emails
• Don’t like information being passed onto third parties

Signing up to services in pubs/restaurants

• Quite happy to sign up to something (eg. Wifi) if there’s something in return

Devices users have on them in such locations:

• Smart phones
• Tablets

Contact details they’re happy to share

• Secondary email address

Other random insights…

• Users would like an incentive
• Would want to see other people doing it (social proof)
• Bar staff would like it!

With that information, there was no time to waste!!!

Prototype creation

As I said earlier, preparation is everything (see what i did there), so before the day, I’d do some research into onboarding generally and turned to the Foolproof’s excellent principles for onboarding as a basis from which to create any prototype.

Obviously, I reviewed these principles in light of the the type of onboarding we were designing and the key user findings. This mean that we concentrated on the following:

• Remind users why they need your product
• Maintain momentum
• Do > Show > Tell
• Reward progress
• Use the goal gradient effect

With these principles in mind, and much rubbing of chins I formed a design idea for the general process. Filling in the gaps from our original Users would:

1. Walk into the pub
2. Present their ID
3. Scan their finger
4. Present their payment card
5. Add contact details
6. Walk away happily signed up to FingoPay
7. Have an awesome time in the pub
8. Eat a kebab

OK, so the last point probably isn’t part of the standard user flow, but an essential one in my opinion. 😁🍻🤕

Using the branding that FingoPay already had, I designed a prototype process with all this included:

1. Open screen with overview of what the user was going to do and why
2. An introduction page — covering how FingoPay works and providing reassurance about data protection and privacy
3. ID capture, utilising ID recognition tech and the ‘selfie’ camera of the tablet
4. Finger scanning, using FingoPay’s cool AF system that is unique to every person and cannot be hacked
5. Payment card capture, utilising card recognition tech and — again — the ‘selfie’ camera of the tablet
6. Contact email address
7. Overview page
8. Success/failure page

Although it’s about 10 screens in total, we’re aiming it to feel like a 5 stage signup, steps that are in manageable, bitesize chunks that didn’t feel like it was going on forever.

Utilising the possibilities that the latest tech in card/ID recognition or biometrics has to offer is one thing… but the not-so-sexy stuff around reviewing and confirming each input, progress bars and reassurance/explaining why FingoPay needed users to complete each step is absolutely just as important. Just definitely not sexy.

It’s funny how UX has become this super-duper-desirable buzzword yet THIS is the stuff, everyday stuff, the seemingly unsexy stuff that‘s really important… It’s these things — easily overlooked — that ensures that users trust your designs and interact with them. It’s all about trust!

Usability testing

So then, by the time I’d got here, it was 6pm and the pub was really starting to fill up — it may’ve been a Monday but people were still drinking after work!

Thankfully, although I was looking a little crazy from the tiredness, I was able to lure 5 willing victims into my web of usability testing and the results? Well, the findings were incredibly encouraging:

• Users found the process quick and easy
• They wanted more information in the finger scanning section
• Understood card and ID scanning processes
• Intro pages answered questions people may have about data privacy
• Intrigued by the idea but would want social proof

From here, I made some quick changes on the finger scan, most notably:

• An ‘information box’ added to the finger scan screens that provided information about why FingoPay needed the scan, including a link to a video explaining the whole biometrics ID process
• Logos of corporate partners on the intro screen to reassure users that major brands back this system

Next steps…

From InVision to React Native! We had proof of our design concept — users were happy with it and so it was to handover to Horacio, Alex Lobera and Will to put this vision into the development world.

It’s worth noting that our design solution was the best case scenario and the challenge I’d laid at the developers feet was not insubstantial. All those new technologies and APIs combining into one product… Well, it was over to those magicians to turn my design dream into a reality! Part 2 coming soon… :)