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
Ticket Analysis
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.
Competitive analysis
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 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
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 – 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.
Photos from our team meetup
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.
Key results for this project
User flow
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 to explore – User flow in FigJam
drag me!
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
Error diagnosis interface design in Figma
Team page
In addition to the core 2FA feature, we added a feature on the team's page that enables team owners to view the 2FA status of their team members. This feature is important as some companies require all team members to enable 2FA in adherence to their security policies.
Team page Interface design in Figma
Two-stage 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
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.
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
Ticket Analysis
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.
Competitive analysis
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 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
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 – 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.
Photos from our team meetup
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.
Key results for this project
User flow
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 to explore – User flow in FigJam
drag me!
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
Error diagnosis interface design in Figma
Team page
In addition to the core 2FA feature, we added a feature on the team's page that enables team owners to view the 2FA status of their team members. This feature is important as some companies require all team members to enable 2FA in adherence to their security policies.
Team page Interface design in Figma
Two-stage 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
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.
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
Ticket Analysis
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.
Competitive analysis
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 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
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 – 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.
Photos from our team meetup
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.
Key results for this project
User flow
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 to explore – User flow in FigJam
drag me!
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
Error diagnosis interface design in Figma
Team page
In addition to the core 2FA feature, we added a feature on the team's page that enables team owners to view the 2FA status of their team members. This feature is important as some companies require all team members to enable 2FA in adherence to their security policies.
Team page Interface design in Figma
Two-stage 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
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.
