Backstory

01. The product

Orca Go is the app version of the company’s product Orca HCM, which is a SaaS platform for enterprise with clients from various industries, including Retail, Hospitality, IT, Insurance, Academics....etc. Although the core function of the app is mobile learning, the user cases and scenarios are very diverse and complex.

02. The problems

Orca Go was designed as a public app for all our clients, after the users (usually the employees of our clients) installed the app, they will see a generic login page where they have to enter the URL of their company's platform to login. Therefore, our clients complained that:
1. Users find it troublesome to enter site URL, which is usually long and hard to remember.
2. Unlike the web version, Administrators cannot configure and style the login page as they wish, which made it difficult for their users to recognize the site.

Login screen

▲ This is the original login screen.

Research

03. Discover

To better understand our users, I conducted two types of research:
1. Review the feedback & use cases submitted by the Sales team and CSR team. (Quantitative 2nd hand data)
2. Go to our marketing events and observe how the participants use the app. (Qualitative 1st hand data)

And I had following discoveries:

General Users (Employees)
1. Many of our users are over 40 and not very tech-savvy.
2. Some users only install and open the app when they are required to (which it not frequent), they would delete it after use, and then install it again the next time.
3. Sometimes user do not use their personal device, but a shared device assigned by their company or the event organizer.

Administrators (Management)
1. Some companies take their CIS (Corporate Identity System) very seriously and want to keep all the sites and services they use in the same style.
2. Some companies may use the platform for non-employees, such as partners or future candidates, so they also need to allow for open registration.

04. Constraint

Orca Go is a hybrid app and the login screen must be made with React Native but not HTML5, and if we want to change the design of the login screen, the whole app will have to be repackaged and published again. That's why our clients can't change it unless they pay for the customization cost to make it another app, but then there would be further maintenance issues.

05. Conclusion

The goal of this redesign would be
1. Streamline the login flow and improve the experience for end users.
2. Find a solution for our clients to set up the login screen and rules with flexibility and ease.

Ideation

06. Brainstorming

I took this issue to our weekly meeting to discuss with our engineers about possible solutions, and had some helpful findings:

1. We can give each client's platform a distinct Site ID, so that user only needs to enter this ID for connection.
2. We can make a variable & configurable login page as HTML5 Webview page, but it can only be loaded after the user connect to the specific site.
3. We can bind user's device to the specific site once the connection is made, so he won't have to type again.

Design

07. User Flows

For general users, there are different scenarios and combination of methods for them to log in to any specific site. Here I listed some of the examples, or you can view prototype on Axure here.

Scenario 1: When User installs the app for the first time, and wants to log in to Site A with an existing account.

Login flow 1

Scenario 2: Having logged in Site A before, User now wants to log in to Site B

Login flow 2

Scenario 3: User hasn't logged in to any site but opens a Quick Menu as Guest, and then chooses to log in with his Facebook account.

Login flow 3

Scenario 4: User doesn't has an account, and wants to register & log in to Site A.

Login flow 4
08. Administrator Functions

For Administrator's needs to configure the login page, I designed a centralized setting page under "Appearance" function in the web version, where Admin can configure the overall style of both the web & app versions of their site.

Configuration page
09. UI Design
Initial screenConfigurable login screen

Outcome

I made this design in 2020 Q1, before I quite the company. Although it still hasn't been developed, we would be the 1st among our competitors (in Taiwan) to offer a flexible solution for clients to design their login flow and login page without having to customize a stand-alone app, which would increase the incentive to use our app.

Next Project>