The Request: “We want to make a mobile application for iOS and Android that leverages our biometric authentication software development kit to enable 1 or more users on a mobile device to enroll, then verify their identity using a variety of biometric modalities.”
The Response: I worked with executive, product, developers and QA to come up with a design that made a series of complex tasks, for a large variety of use cases, into a simple user experience.
The Challenge: Unlike most apps, this was directed at companies that wanted security, not an end user who would find it off the store. However it still needed to be easy and enjoyable so that a company's users would easily adopt the new technology.
My Process:
1. Research, task analysis & discovery
2. Persona development & ideation
3. User journeys & task flow
4. Wireframes
5. Style guides, mockups & prototypes
6. User testing and refinement
7. Design documentation
1. Research, task analysis and discovery
My overall research goals:
1. What was the full definition of the product?
2. Who is the customer and who are their end users?
3. What is the goal of the customer?
4. Which was more important to our customers, security or ease-of-use?
5. What was considered an “acceptable” level of friction?
The product and the customer
The first question I needed answered is what was the scope of the product, and who were our target customers? To obtain these answers I approached the company’s Product, Executive and Sales teams. From them I discovered that they all agreed on:
They agreed on:
* The product was a biometric security application with a primary goal of verifying the user’s identity.
* They wanted portions of the application dealing with verification messages, to be white labeled to match a company’s branding.
* The customers were financial, healthcare and similar companies that had sensitive information they needed secured with more than a password.
* The customer’s end users were employees and members who would be required by the company to use the app in order to use the company’s services.
But there were also points they differed on:
* Executive wanted to register multiple accounts on the application so that a user could use the app to log into multiple companies, such as a work computer and bank website.
* Product wanted multiple accounts so that the application could be placed on a tablet or kiosk to be used by multiple people within a company.
* Sales wanted multiple accounts so that they didn’t have to wipe their userid clean after each demo of the app.
* Executive wanted the biometric verification process to be locked down and so secure that only the enrolled person could ever hope to verifying, even if that meant 30% of the time a person was falsely rejected.
2. Persona development and ideation
Who is the end user?
To define the purpose and function of the app we needed to understand the end user. Since I now knew who the customer was, I had an idea of who the end user would be. I was looking for:
* Working adults in financial, tech or healthcare
* Between the ages of 25 and 60
* Educated
It was still a fairly broad range, but narrowed enough that I could start talking to, and observing, their behavior. I talked to a variety of people including a company’s CTO, a healthcare worker, a head of IT and a data entry specialist. From these I created three personas that covered typical use cases.
With the personas defined I could narrow down the focus of the app to the following:
1. The application’s #1 purpose is to securely and accurately identify a person’s identity as quickly and efficiently as possible
2. Security means that the only the registered user will be able to verify their identity or manage their account on the device
3. The application needs to thoroughly and successfully enroll a person’s biometric to ensure an easy verification
4. Verification requests can be time-sensitive so the app needs to showcase those
5. The typical user persona will have their own smart-phone
6. Getting into, and out of, the app quickly is critical to a good user experience
With this information I was able to define the “multi-user” question as a single user with optional multiple accounts.
Is it security or ease of use?
Since I had user personas, and identified their goals, it was obvious that the most important element of the application was security. HOWEVER, it would still need to be juggled against ease-of-use. My job as the user’s voice was to help our company walk that fine line between easy and secure.
How do I make a 'sometimes white labeled' cohesive application?
This question involved a lot of back and forth brainstorming with product, executive and development as everyone had a slightly different vision as to what we were building. After many meetings, white board exercises, and emailed discussions we finally decided that the verification message would be easily customizable, within limits, by a customer while leaving the rest of the application alone. I wanted to develop this page to be easily configurable by our customers.
3. User journey and task flow
With the product and the product’s users finally defined I could start working on simple and complex user journeys. These enabled me to identify the pitfalls, errors and path that a user would take. A journey was created for each activity the user was expected to take: onboarding, enrollment, verification, adding new accounts, deleting their account, failing a verification, etc.
These were shared with the product stakeholders and refined before coming to consensus. From these journeys I could start the work on error messaging and wireframes.
4. Wireframes
Wireframes
Wireframes were created for each of the primary app screens that the user would encounter. This outlined UI, text and image placement. These were also shared with the product stakeholders, then submitted to the visual designer.
4. Style guides, mockups & prototypes
Style guides and copy writing
Working with the visual designer, we identified a minimal impact style guide that utilized icons, graphics and expected user experiences to communicate information in lieu of wordy explanations. An important aspect of this was, for sections that required text such as error messaging, to distill down information into short, concise ideas using easily understood words and concepts.
Mockups
With the style guide established, the visual designer and I created high quality mockups in Sketch of every different screen the user would experience in the app. These were presented in both iOS layout, as well as Android. A “golden path” prototype was created in Flinto to communicate the typical user experience with the company’s stakeholders.
6. User testing and refinement
User testing
Using the prototype, I approached a few people that represented our user personas to conduct user testing. My task was to determine if the workflow was intuitive, the UI easy to interact with and the messaging easily understood. From these interactions I made some adjustments to the UI and workflow design.
Example workflow and refinement:
Receiving and responding to an "Alert" was the primary purpose of the app. These Alerts could come from a variety of companies with different lengths of messaging and branding requirements. The companies would decide which biometric(s) they wanted their users to identify themselves with and those would be presented as options to the user. Thus the Alert needed to scale for text, allow for 1 to "N" biometric options, yet still be simple for the user to quickly view and respond to. "View, respond and move on" was the mantra of the app's design.
Initial test
Our first pass at the Alert used an icon carousel at the top with a large VERIFY <selected biometric> button under, then a scalable text section under that. Rejecting the alert was done by a big red button with a trash icon.
When we tested this with our users we discovered that, while they liked interacting with the icon carousel and found the scalable text section easy to understand, the "VERIFY" button was outside of their easy activity area and that the big red button either got overlooked, or wasn't intuitive. Some even thought that they needed to press it to close the Alert.
Refinement
I went back to the drawing board and redesigned the Alert. I kept the aspects that our users liked: scalable text, icon carousel and large, easy to use buttons. Using the rule of "the thumb zone" I placed all UI buttons, clearly labeled each with it's function, at the bottom of the page, put the text at the top and did not resize the icons to avoid distracting the user.
7. Design documentation
Once everything was approved, I worked with developers and the QA team to create written documentation that organized all elements of the application into a complete design that could be iterated and managed as new features were added and refined. These were broken into sections based on the User Journies, and entered into JIRA for tracking and development.
Next steps
The iOS and Android applications are expected to be relased in mid 2020. My next steps were to take the apps and run some usability tests with them to determine what and how to refine the user experience for the next iterations.
Programs used: Adobe Photoshop and Illustrator, Sketch, Flinto, Lucidchart, Google Docs, JIRA, Confluence
