Two-factor authentication
For big companies with strict security needs, two-factor authentication (2FA) is a must-have. Nutshell was missing out on business because they didn't offer it, so I designed a 2FA system to keep Nutshell competitive and its customers' data safe.
The challenge
Nutshell recognized that the absence of two-factor authentication (2FA) in its product was costing them potential customers. In an industry where security is paramount, the lack of 2FA was a deal-breaker, especially for larger organizations. They were losing business opportunities, and potential customers were compelled to choose a service that provided the security that Nutshell could not.
It was clear that incorporating 2FA was our next strategic step, and I was tasked with designing it, marking my first solo design project at Nutshell.
Researching existing approaches
Numerous implementations of two-factor authentication already exist. Rather than trying to reinvent the wheel, I decided to start with extensive research. I studied over a dozen different products, scrutinizing everything from the language used to the styling of the input field for security codes.
My findings led me to particularly admire the experiences provided by GitHub and Hubspot. Throughout the design process, I frequently referred back to these two products to design something compatible with our app.
A table organizing my research findings from many different SAAS products.
Designing 2FA for Nutshell
Sufficiently inspired, I started considering how all the elements would fit together in our system. Throughout this phase, I frequently sought feedback from our VP of Product Development and our most experienced back-end engineer.
Flowcharts of the separate and overlapping 2FA information architecture for admins and non-admins.
My goal was to understand how 2FA would function within Nutshell and to maximize component reuse for various scenarios:
- A single person setting up 2FA for their account
- An account administrator enforcing 2FA for their entire team
- A person logging in after their account administrator has begun enforcing 2FA
The design process
I began with low-fidelity designs, which serve two primary purposes:
- They allow for quicker design changes
- They encourage more honest feedback
For this project, I tried to solicit feedback on major user flows before proceeding with more detailed designs. After about four rounds of quick iteration, we were in agreement on how the overall system would work.
Low fidelity mockups of the 2FA experience in Nutshell
Next, I translated everything into high fidelity designs and created detailed written and visual specifications. While there are slight variations depending on the person and their choices, the final 2FA experience looked something like this:
Click 'Enable two-factor authentication' from your security settings.
Select an authentication method: authenticator app or SMS.
Verify whichever method you've chosen.
Enter the code provided by your authenticator app or a text message.
Download your recovery codes and confirm you're ready to move on.
A final confetti blast to confirm you've set things up successfully!
The 'Enabled' 2FA section in settings where future changes can be made.
Impact & lessons learned
The implementation phase marked the exciting transition from designs to reality. Working closely with engineers, including our software engineering intern Craig, was a critical part of this process. Despite the formal "handoff" of design materials, my involvement was far from over; I was constantly available to answer questions and review progress.
This project was a unique learning experience as Craig, tasked with implementing the front-end entirely by himself, consistently impressed me with his attention to detail and thought-provoking questions that challenged my design decisions. This collaboration underscored the value of open dialogue between designers and developers in refining and improving the final product.
The rollout of 2FA, following internal testing and the resolution of a few remaining engineering challenges, was a significant milestone for Nutshell. Not only did it enhance security, but it positioned them competitively to secure larger deals.