Summary
Discovery
Building MVP
Next Steps
Impact
Learnings
Lumeto
Two-Factor Authentication (2FA)
I led product design process in a 3-month project to implement two-factor authentication
(2FA) on Contractbook. The goal was to enhance user security without sacrificing UX. To
achieve this, we chose email 2FA for a faster implementation and quicker value delivery to
users.
Key results
•
Enabled 2FA for all the
Contractbook's users
•
2FA health ratio reached 75%
•
Closed the gap to
Contractbook's competitors
Role & Timeline
•
Product Designer & Researcher
•
July 2022 - September 2022
Methods
User Research / User
Journey Mapping /
Competitive Analysis /
Design Audit / Visual
design / Prototyping /
Testing
The Challenge
I was part of a crucial team tasked with closing the gap between our competition and us
for Contractbook, a cloud-based contract lifecycle management software for small to
medium-sized businesses. As the Product Designer, I led the product design process for
adding a two-factor authentication (2FA) feature to the platform. Our challenge was to
enhance security while improving user experience and reducing friction during the login
process.
Final results
Defining the Problem
User Testing
As a Product Designer, I implemented Two-Factor Authentication (2FA) for our platform.
To understand users' needs for 2FA, I analyzed HubSpot service tickets and found few
mentioned not adopting Contractbook due to a lack of 2FA and security regulations. To
gather more data, I sought ways to understand user needs.
User Testing
User Interviews
We used Pendo to recruit current Contractbook customers for interviews about their 2FA
experience. After users clicked 'interested' on the modal, I sent them a screening email to
confirm if they were a good fit for an interview.
Example screening questions:
•
Does your company have a security policy related to 2FA?
•
Which method of 2FA is your company using the most? Have you had any problems
with it?
Then, I conducted problem discovery interviews with the users who passed the screening
to learn about their experience with 2FA, identify potential opportunities, and learn about
their compliance requirements.
Identified opportunities:
•
Users believe that "anything is better than nothing" when it comes to 2FA.
•
The authenticator app is the most preferred method, but users don't mind using any
other method.
Notes and scripts for user interviews in Notion
Past Interviews
I conducted a competitive analysis to identify commonalities among competitors and
gather valuable insights for building our product. This research allowed us to differentiate
ourselves and provided a basis for product development.
Notes in FigJam from competitive analysis session
User Journey Mapping
After gathering the initial insights, I led a User Journey Mapping workshop with my team
of seven to identify persona, goals, scenarios, and steps for users logging in with 2FA.
The workshop helped visualize the process.
Drag to explore – N+1 User Journey Map in FigJam
drag me!
The outcome of the workshops was opportunities, which helped to identify how the user
experience could be optimized. As well as the insights about
"What needs to be done?
What are the biggest opportunities? How are we going to measure the success?"
The
workshop was not only important for developing the product, but also benefited the team
in having conversations and aligning the team's mental model.
Live actor training
The shared vision from the mapping session helped communicate and understand users
and became the basis for decision-making. Understanding user needs was critical in
informing the design and creating a clear plan for our MVP.
Old vs new scope
Production schedule
I created a visual user flow to align with the team on feature functionality before designing
the interface. This also contributes to a smoother navigation experience, helping users
accomplish tasks efficiently.
drag me!
Production and development process workshop
Voice Recording
As a Product Designer, I implemented Two-Factor Authentication (2FA) for our platform.
To understand users' needs for 2FA, I analyzed HubSpot service tickets and found few
mentioned not adopting Contractbook due to a lack of 2FA and security regulations. To
gather more data, I sought ways to understand user needs.
Voice recording studio
Mocap recording
As a Product Designer, I implemented Two-Factor Authentication (2FA) for our platform.
To understand users' needs for 2FA, I analyzed HubSpot service tickets and found few
mentioned not adopting Contractbook due to a lack of 2FA and security regulations. To
gather more data, I sought ways to understand user needs.
Mocap studio
Development
With all the necessary foundations, knowledge, and preparation in place, I began to
design the interface for 2FA. We prioritized email 2FA as it's widely used, faster to
implement, and all users have verified email on our platform. The design aimed to add
security without compromising efficiency and prioritize user-centricity, along with easy
error recognition, diagnosis, and recovery.
Re-prioritization
As a Product Designer, I implemented Two-Factor Authentication (2FA) for our platform.
To understand users' needs for 2FA, I analyzed HubSpot service tickets and found few
mentioned not adopting Contractbook due to a lack of 2FA and security regulations. To
gather more data, I sought ways to understand user needs.
Workshop with team to identify highest impact features
Design considerations
As a Product Designer, I implemented Two-Factor Authentication (2FA) for our platform.
To understand users' needs for 2FA, I analyzed HubSpot service tickets and found few
mentioned not adopting Contractbook due to a lack of 2FA and security regulations. To
gather more data, I sought ways to understand user needs.
Workshop with team to identify highest impact features
The MVP
With all the necessary foundations, knowledge, and preparation in place, I began to
design the interface for 2FA. We prioritized email 2FA as it's widely used, faster to
implement, and all users have verified email on our platform. The design aimed to add
security without compromising efficiency and prioritize user-centricity, along with easy
error recognition, diagnosis, and recovery.
Interactive prototype in Figma (you can press "R" to refresh the prototype)
click me!
Log in screen
To inform users of the necessary action, I used the header "Check Your Email for the
Code". Additionally, I provided contact information as a solution for users who encounter
difficulties logging in.
Log in screen interface design in Figma
Receive and enter verification code
To prevent email stacking and help users quickly recognize the email with the verification
code, I included the Time-based one-time password (TOTP) code in the email header.
Additionally, I enlarged the verification code in the email body to make it easier for users
to find. However, due to technical limitations, we had to postpone the implementation of a
copy function for the code in email for a future iteration.
Receive and enter verification code interface design in Figma
Resend code
To assist users with expired codes or email delivery issues, we added a "Resend
Verification Code" button. Clicking this button triggers a new verification code to be sent
to the user's email, providing a simple and efficient solution.
Resend code interface design in Figma
Error diagnosis
To ensure users easily recognize errors, I used traditional error-message visuals and
simple language to explain what went wrong, avoiding jargon. When clicking on the
support email, it prefills the subject line for quick issue recognition and resolution.
Error diagnosis interface design in Figma
Product Launch
After designing the interface for 2FA, my PM and I decided to divide our feature release
into two phases: a Sample Rollout to a smaller group of users, followed by a General
Availability launch to all Contractbook users. This approach allowed us to gather feedback
and address any issues before releasing the feature to all users, ensuring the success of
our MVP and delivering business value quickly.
Launch planning
Impact
After the General Availability launch of 2FA, we utilized Hotjar recordings and Metabase
data to track and address any usability issues, ensuring the achievement of our business
goal. With a 2FA health ratio of 75%, we were able to calculate the number of 2FA codes
required to log in to Contractbook's platform. Users who require more codes have shared
accounts, which make it more challenging to receive the code in their email. Overall, the
project was a success.
left: Marketing materials for feature announcement; right: feature announcement on app.contractbook.com/home
Post-Launch
After the General Availability launch of 2FA, we utilized Hotjar recordings and Metabase
data to track and address any usability issues, ensuring the achievement of our business
goal. With a 2FA health ratio of 75%, we were able to calculate the number of 2FA codes
required to log in to Contractbook's platform. Users who require more codes have shared
accounts, which make it more challenging to receive the code in their email. Overall, the
project was a success.
left: Marketing materials for feature announcement; right: feature announcement on app.contractbook.com/home
Master Instructor Course
To ensure users easily recognize errors, I used traditional error-message visuals and
simple language to explain what went wrong, avoiding jargon. When clicking on the
support email, it prefills the subject line for quick issue recognition and resolution.
Error diagnosis interface design in Figma
Pilot Study
To ensure users easily recognize errors, I used traditional error-message visuals and
simple language to explain what went wrong, avoiding jargon. When clicking on the
support email, it prefills the subject line for quick issue recognition and resolution.
Error diagnosis interface design in Figma
Next Steps
Looking ahead, we also continued to think about ways to improve the user experience,
such as adding additional 2FA options e.g., an authenticator app or SMS.
Reflection & learnings
The main challenge for this project was debating and discussing 'which 2FA method is the
best?' As the sole designer, I kept an open mind but had to prioritize features that could
deliver value and impact for both the user and company within the given timeframe.
The biggest lesson learned was the importance of a User Journey Map. It uncovers
problematic and opportunistic points early on, providing a basis and visual aid for
effective collaboration among all stakeholders throughout the process.