Summary
The company's Security team had identified a user population whose emails had been compromised. To further protect these user's Personal Identifiable Information and Health Information, the product team was requested to implement a secure account creation and sign in processes utilizing both a Knowledge Based Authentication (KBA) and Multi Factor Authentication process (MFA). I was tasked with developing the user experience for these scenarios.

Status                    Live Product
Timeline               09/01/-12/15/2020
Major Tasks        Develop UX/UI for a KBA and MFA experience
Platforms             Responsive Web and Mobile App
Design Tools       Sketch
                                   Marvel
                                   Usertesting.com
                                   Jira
                                   Twilio
                                   Veratad
UX Methods       General Research
                                   Comparative Analysis
                                   UI Concepts
                                   User Interviews
                                   User Flows
                                   Usability Testing
                                   Prototype
Collaborators     Andrew Kington, Senior Front End Developer
                                   Jared Homsley, Product Manager
Process
Research and Planning
Initial Research
Before diving into the design, I started by reviewing the current create account flow. Since the timeline for the security enhancements was short, there wasn't time to rework the entire sign in experience. For the enhancements, we would be inserting the security features into the existing flow. 
Comparative Analysis
To familiarize myself with current account security standards, I began researching the industry standards for both Knowledge Base Authentication and Multi-Factor Authentication. I reviewed how several other companies handled these extra security features including Google, LinkedIn, Microsoft, and Bitwarden.
Documenting Scenarios
Next I sat down to document all the possible scenarios a user could see. I took the basic user flow the Product Manager had provided in the project's requirements and expanded upon it. I recorded the different scenarios a user might encounter; such as, losing a cell phone, failing the KBA verification, or editing their MFA device's phone number.

Prioritization
Since the security request was a high priority item, the design and development timelines were condensed into just under 3 months. With this in mind, I went through the scenarios and prioritized the work to complete first with features that could potentially be added later or if there was extra time. I started with the initial create account and sign in flows then the user self support features, and finally the customer serves items.
User flow for KBA/2FA with Current Registration Process
User flow for KBA/2FA with Current Registration Process
User flow for KBA/2FA with a revised simplified Registration Process (not implemented due to timeline)
User flow for KBA/2FA with a revised simplified Registration Process (not implemented due to timeline)
–––––––––––––––
Design
Create Account
I developed 2 main flows for the create account and 2 factor authentication sign up flow. In 1 flow the KBA questions were shown in a single list, and the 2nd they were presented one at a time. 
I initially had planned to present the questions in a single list to allow the user to quickly read and answer the question; especially since the vendor providing the question imposed a 90 second time limit on form. However, since the vendor also recommended the 1 at a time approach, I decided to explore both.
Sign In
My first iteration of the secure sign in experience used a seperate screen that would appear for the user after entering their username and password. 
However, during further iteration, I decided leveraging the existing sign in page to deliver the prompt for the 2-step verification code would be a more seamless user experience. The user wouldn't have to wait to be taken to a new page, and would have access to the FAQ section the login page already provided.
Initial layout for the full page Secure Sign in experience.
Initial layout for the full page Secure Sign in experience.
Revised Secure Sign in experience to seamlessly follow the Username and Password Prompt
Revised Secure Sign in experience to seamlessly follow the Username and Password Prompt
User Self-Support 
Since the security update would require 2 steps when a user set up their account, I wanted to be sure users had resources to support them if they were confused by the process or received an error. I decided to update the sign in page's FAQ section to handle this. I reorganized the current FAQs into 3 groups to make the section easier to scan. I also added 3 new FAQs to support the KBA and MFA security steps. The goal of adding this self help information was to help mediate the number of calls the customer service team received around the security implementation.
Customer Service Tooling
While the self help features did provide the user with some options troubleshooting help, there was still a need to provide support for users who could not complete the KBA on their own and to help users who may have lost the device they registered for the 2-step verification with. 
I created an amendment to a tool the customer service team already used and introduced a new tool to handle the support for the KBA. I began this process by talking with customer service representatives about what common account access issues they currently handled.
This conversations helped me gain empathy and better understanding for our customer service teams. I came out of the discussions having stronger working relationships with the team and a better understanding of how I could support them in handling calls regarding the new security updates.
New Customer Support Tool
New Customer Support Tool
Revision to existing Customer Support Tool
Revision to existing Customer Support Tool
–––––––––––––––
Testing
KBA Form A/B Test
I created a short A/B test to help discern which model to use for the KBA questionnaire: the single list or the 1 question at a time approach. 
The user preferences for these tested practically equal in the qualitative test. Because of this, I looked specifically at the preferences of the test users who belonged to our highest age demographic. This demographic showed a slight preference for the single list version. 
When factoring in the 90 second time limit, the project timeline and the work it might take to implement a multiple page questionnaire, it was clear the single page version was the most optimal choice for this project.
Usability Test
I drafted usability tests to test the KBA/MFA setup and the account sign in processes on both mobile and desktop platforms.
I asked users to create an account, sign in, and review the support FAQ section. The results didn't uncover any major usability issues. However, one user did mention a scenario that had not been covered in the FAQ support section. Based on this, I revised the content in the FAQ section to include this user's concern.
Editing the MFA
The next test I completed surrounded the usability of the user account settings. To support the additional security features, I revised the product's account settings to include a way to edit the phone number used for MFA sign in.
The main takeaway from this test, was the initial user facing name that I had chosen for the MFA process, "Secure Sign In", was unclear to users. When testing where they would go to edit this number, it was unclear that "Secure Sign In" had anything to do with settings. Because of this, I drafted a follow up test surrounding what naming convention would be clearest for users. 
This secondary test found that most users tested prefer 2-Step Verification. With this in mind, I updated both the create account and sign in screens to reflect this new feature name. 
Customer Service Tooling
After putting together the initial concepts for the customer service tooling, I met again with the customer service team to review the designs in 2 seperate usability tests. These tests concluded that the tooling met expectations and identified areas where I could simplify the information the customer service representatives were being shown. I took the feedback from these tests to refine the experience. Then proceeded to reviewing the tooling with the Product Manager and Lead Developer, where we worked together to prioritize the tooling features.
–––––––––––––––
Impact
Developer Handoff
As each portion of the project concluded, I documented the design notes for the developers and handed these off along with the prototypes. We worked in tandem, developing and designing in consecutive rounds so that the limited timeline could be maximized.

Customer Service Processes
As the project concluded and the live launch date grew nearer, I worked closely again with the customer service teams to develop usage documentation and quick reference guides to be utilized in a training for the customer service representatives. 

Conclusion
The implementation of the security features were launched January of 2021 and the team plans to continue adding supplementary features as outlined in the design documentation and Product Manager's feature plans. 
During the team retrospective, 3 aspects the team mentioned that helped expedite the project included: the detailed documentation in the user flows, handoff materials, and the high fidelity Marvel prototypes both the developers and QAs could reference throughout the process.
This project demonstrates my comprehensive thinking and detailed design processes, even when constrained by a short deadline. It challenged me to adapt quickly to changing requirements, and shows my intuitive ability to work successfully with cross functional teams.
Back to Top