I was approached by NXP’s IT team with a request to design a 2-Factor Authentication (2FA) Login/ Settings page so users on NXP.com could add an extra layer of security (a phone verification code) to their accounts. This feature was shipped in March 2018 and is available for NXP employees and anyone with a business email address under the “My Account” section of NXP.com
To kick off the project, our IT team provided me with a few pages of functional requirements and directions for the project. My first challenge was to distill this information into something our UX team could actually understand (click the images below to expand).
I set up my own 2 Factor Authentication on several popular services such as Google, Facebook, Amazon, Paypal, and Bank of America to understand how these services were already implementing this feature. I wanted to design NXP’s 2FA setup similar to other services that NXP users may already understand how to use.
After analyzing these different 2FA flows, I noticed some repeating themes amongst all services. The image below is a visualization I created of the basic flow that all popular services make their users complete to set up 2FA and change the status from OFF to ON / vice versa, not accounting for edge cases, yet.
My initial research revealed an issue with IT’s functional requirements for the project. The IT team wanted us to give users the ability to turn on 2FA, turn off 2FA, receive a code by SMS or voice, confirm a code, change their phone number and email address all from a single ‘Settings’ page. Through research and sketching out ideas, I discovered that trying to squeeze all of this functionality on a single page would be overwhelming and confusing for users. We needed to break the functionality into several flows like every other service I analyzed.
I created a user flow chart that visually accounted for all of the technical requirements of the project. I presented this flow chart along with my research findings to the IT team, in order to convince them that we needed to break the functionality into several flows, rather than trying to fit all of the features on a single page. I emphasized the importance of taking some extra time to create a good experience so more users would protect their accounts from hackers with 2FA, and they agreed with my reasoning.
After aligning with the IT team on the flow, I worked through a few rounds of high-fidelity wireframes with my UX manager to polish the copy. A few critiques I took into consideration included:
This project provided a valuable experience in handling conflict with a team that overlooked certain aspects of the UX design process. The IT team felt that the technical documentation they created was all that was necessary to complete the design portion, but our UX team (myself + my manager) pushed back and requested a more formal UX review to understand the nuances of designing a 2-Factor Authentication.
By analyzing other services, creating user flows, and iterating on our wireframes, we were able to create a 2FA Login/ Settings that is intuitive and matches most users’ mental model of a 2-Factor Authentication.
I learned that when working with other departments, it is important to create visual artifacts early in the process that help all stakeholders align on the same vision of the product. Aligning on the small details as early as possible will save many communication issues later down the road.