Q2 – Q4 2019

Badge Scanning Improvements in the Akkroo App

Two devices showing the user inteface for badge scanning in the Akkroo app

Context

Following the brand new app experience introduced with the Major App Update project and the refining of the general experience introduced with the React Native App project, it was finally time for us to redesign one of the most important features of the app: the badge scanner.

Prototype

At this point, the badge scanner functionality was entirely based on the legacy experience that had been designed years prior.

It offered a very rudimentary scanner that would scan any barcode and then display its code string — the users could see the information contained in the badge, but only after the lead was successfully submitted and the badge data was retrieved.

Needless to say, there was a lot to improve on.

Press "scan" on this prototype to try out our old badge scanner.

One of the biggest issues app users encountered when using our app was the perception of having lost data when an action was performed incorrectly — maybe they scanned the wrong code in an event badge, or their marketing manager forgot to correctly set up an integration with the badge provider. On both instances, the scan would never return any data, thus “losing” the lead and the opportunity for our sales user.

While those scenarios could be attributed to user error, we knew there were steps that we could take to prevent them from happening and help build trust in our product.

Badge scanning in Akkroo and similar apps works by scanning a badge, which typically returns a string. These strings are then sent to the badge provider API to be "exchanged" for the data contained in the badge.

Problem

We framed this project around the user persona of the Sales Representative — who we named Serena Sales —, the typical user of the Akkroo app.

Using the Jobs to Be Done framework, we arrived at the following goal:

As Serena Sales, I want to be able to know I have scanned the right badge in order to trust that the Akkroo app will retrieve the data contained within.

Discovery and ideation

When I started to work on this project, the initial goal was to simply fetch and display the badge data immediately after a successful scan. Sounds like it'd do the job, right?

User flow showing an empty badge scanning field, a depiction of a badge being scanned, and a box with the information contained in the badge.
Initial sketches of how we thought the UI would look like.

When we started to look at hedge cases and how users would recover from an error, though, we noticed that it was hard for them to tell when they were dealing with a mistake they had made themselves (e.g. scanning an invalid code) or an issue with the badge provider (e.g. their server being down and not being able to return the data).

Our solution to this was to redesign the feature in a way that would prevent user mistakes (more on that in a bit) and flesh out the interaction to better communicate to our users what exactly is happening.

We achieved by splitting the badge scanning process into two parts:

By doing this, we can help users create a more accurate mental map of this process, and also reassure them when they do everything correctly, even if something does go wrong on the second step of the process.

So we went back to the drawing board and made sure that the entire experience was visually consistent from the moment the users saw the prompt to scan the badge until the moment they got the data back.

A representation of badge scanning process, showing the same UI box present throughout.
The badge scanner stays on the screen and accompanies the user through the entire process.

After having defined the flow, we designed the UI in a way that would:

The badge scanning UI in the Akkroo app showing a warning telling the user that there is no badge integration set up for that event

1. Set clear expectations

Since different events can have different experiences (not all badge providers will let us retrieve badge data in real-time, for instance), it's important to let our users know exactly what to expect from each event.

To achieve this, we give them a brief explanation of what the set up is right as the event is about to begin.

Video

2. Prevent mistakes whenever possible

One of the most common causes for loss of data was that, sometimes, users would scan the wrong code and they wouldn't realise this until much later, when there was no alternative way to collect their prospect's details.

To help prevent these mistakes, we added real-time validation to assure our users that they're scanning the right code and that the string retrieved is in the expected format.

Play the video to see the validation in action.

The badge scanning UI in the Akkroo app showing data retrieved from a badge

3. Give the users what they want, when they want it

By returning the badge data in real-time, we eliminate the users’ anxiety of wondering whether the badge contained real data or not.

By surfacing the information immediately, the users can confirm they scanned the correct badge, that it contained information, and even make additions or corrections.

The badge scanning UI in the Akkroo app prompting the user to scan a badge using NFC technology

Bonus: NFC badge support

In addition to improvements above, we’ve also added the ability to scan NFC badges, a much-requested feature, by plugging it into our existing badge data infrastructure.

Outcome

Prototype

This project is a great example of how you can supercharge a feature just by focusing on the possible points of failure and making sure to design for when those happen.

By doing so, we can build a trusting relationship with our users: they know that our product will let them know if anything goes wrong, giving them the chance to correct the mistake and giving them the peace of mind to focus on the task at hand.

Press "scan" on this prototype to try out the revamped badge scanner.

Value added:

  • Assuring users they have a badge scan integration set up.
  • Assuring users they are scanning the right badge.
  • Assuring users the badge they scanned contained data.
  • Enabling users to scan NFC badges in addition to QR and barcode badges.