2FA-Login Experience

Build the 2FA-login feature for SaaS HCM system.

Type

Launched Design (B2B Human Capital Management System)

Company

Orca HCM

Duration

2 months

My Role

UX Design
UX Research

Tool

Figma

Team

2 Designers
1 Product Manager
2 Developers

Overview

Team Goal

The team wanted to optimize our current login function according to the rise of internet security regulations, providing users with more secure environment while using our system.

Outcome

I planned the MVP 2FA login of our product with several team members and finished the overall UI design of both RWD & app individually in 1.5 month and successfully helped solve salespersons' current difficulty on selling.

‍→ Click to go Final Solution

Background

About OrcaHCM

Orca HCM is one of the largest HR Human Capital Management (HCM) software in Taiwan which provides flexible modules to support HR training, facilitate management efficiency and convey information across organizations.

Orca HCM | SaaS

Context

The Problem

Taiwan's Financial Supervisory Commission is asking that every financial enterprises should access internet service with information security protection mechanism.

Most of our clients that we provided systems with are in the financial industry, so information security will surely become a key factor while enterprise clients choosing the HCM.

Research & Plan

made discussions with product teams, sales and customer service team

In the early phase of this project, I dig out the basic information security needs of our potential clients and current users and how can we optimize our product.
In addition, I compared the features of information security with other 2 main competitors that launch HCM systems in Taiwan.

What do our potential clients care?

Cyrus, our sales representative

Potential clients that we are contacting with mention that comparing similar products is often a critical factor that influences their purchasing decisions. Our system lacks some key functions that clients expect compared to other similar systems, which makes potential clients tend to choose other HCM system instead of us.

Analyze current product

What do we lack?

We found that almost every potential and more and more current clients are expecting or will need to have an advanced authentication verification function while using the system based on the earlier research, especially during the login process.

Also, this is the one we are currently lacking on our product and it obvious a disadvantage of our product compared to others'.

Product Goal
The team decided to put our first step on providing users with 2-factor authentication(2FA) during our login process in the future.

MVP

Launch the new 2-Factor-Authentication(MVP) during login process

After a few rounds of discussions, we formulated principles that what we should follow when developing this.

Easy to Use
‍Make sure that the new function is easy for both potential clients and current users to understand how it works and be used.

Finding Balance
‍‍We should not only consider potential clients' needs but also current users'. Current users expect our product to be up-to-date but also still be applicable to their enterprise regulations or work environments after the product updating.

Planning details of the 2FA function

Constraints that need to be considered

We discussed thru product team's meetings and held a design review with other teams.

During discussions, we discovered constraints that need to be considered such as:
1. Some of our current users are not able to bring their personal mobile device during work. So, verification thru personal phone number might not be applicable.
2. Since functions may vary among different phone models, some of the verification method are only applicable to specific models of phones.

Iterations

Who has the authority to modify the 2FA setting?

At the earlier phase, the product team hope to create as much flexibility as we could for users, so we were planning that not only system managers but also general users could turn on/off the 2FA settings based on their preferences(when the administrator has not enforced the 2FA login setting).

However...
‍After presenting this mentioned idea to other teams, we received feedback such as "it would be challenging to launch it within the limited time". Plus, we realized that most of the clients and users ask for managers' setting at this phase, so we decided to narrow it down, letting only mangers have the authority to modify the 2FA setting.

the iteration when planning the function

Final Product

Create seamless and secured 2FA-login experience for SaaS HCM system

Enable/Disable the setting of 2FA login

If a company requires all its employees to log in to the internal system through two-factor authentication(2FA), the managers must visit the setting section first (which our system already has) and enable the 2FA setting in advance.

➊ Mangers should set the daily limit times of sending the verification code to an account. (Prevent users from requesting unlimited message sending when th 2FA is enabled.)
➋ Mangers have the authority to enable/disable the 2FA login setting for entire site's users. If the setting is enabled, users will be asked to finish 2FA starting from the next login.

2FA setting section

Notify every user when the 2FA setting is modified

When the 2FA is enabled/disabled, the system will send a notification to every user's email which is originally registered in the HCM system and notify them that the 2FA login has been turned on/off.

Personal profile section

notification mail to every user

Users login to the system with two-factor-authentication

Our MVP 2FA login setting is formulated to be verified thru personal email. When the 2FA is enabled, every user will go through the original login process first(type correct Account ID & Password), and then enter the second-verification page.

2FA login process

The verification page will display the email address to which the code has been sent. Users have to check the verification code which will be expired within 10 minutes, and come back to type down the correct one.

Check your verification code

Verified and login to the system successfully!

How user finish this quick and easy 2FA verification during login.

our MVP 2FA login

Learnings

It is quite intensive to deliver our MVP 2FA login within limited times because we need to finalize the best decision for this version after collecting a bunch of opinions but also picture potential future developments of this function
‍
Designers not only need to design the feature itself, but also need to consider where the feature fits in the existing product and what our potential/current users are used to when using our product