AuthcorePass Banner

Overview

Authcore.io is a startup that focuses on cybersecurity related projects. We work closely with our clients to meet their security needs. ​

2018-2020

My role

Product Designer@Authcore.io.      

Background

Authcore.io 1.5 can already support passwordless
sign in.

However, the users still need to go to their emails or SMSs messengers to check and input the one-time code. Also we want to push the boundaries for even safer and user friendly authentication methods.

  • What if the users can sign in to the account with their preferred method biometrics?
  • What if there's a sign in manager that works similarly to authenticator apps?

Competitor Research

Key patterns

  • Sign in and create account are separated in two sections - Why?
  • Overwhelming social media list - ?
  • Emails and mobile requires password and often users forget about their passwords
AuthcorePass Competitor Research

Design opportunities

  • Design for recovery. The backup and restore features are not fully developed or supported in most of the competitors' app. How might we design a better recovery path for the users?
  • Passwordless experience. Explore the possibilities to sign in to an account passwordlessly with the authenticator app.

Information architecture

Aim to keep the structure very simple

We mapped the must have features, then sorted those features under different groups 01 Start, 02 Restore, 03 Add account, 04 Accounts, 05 Sign in and 06 Settings.

AuthcorePass Information architecture

AuthcorePass app sign in flow

As the AuthcorePass app works with the Authcore Widget. We start mapping the user journey from before using the AuthcorePass app, while using the app and after using the app.

AuthcorePass Sign in Flow

Development

UI Design

Following the Design principle and the information architecture to draft the user interfaces.

AuthcorePass UI design

Key features

  • Accounts - If the user uses AuthcorePass as a authenticator app,
    the accounts will be displayed on the account list. Input the 6-digit code to continue with the sign in process.
  • One-time code - Select Pass account in the sign in widget then FaceID authenticator will pop up. Input the one-time code to the sign in widget to complete complete the passwordless sign in process.
  • Approve sign in - Select email or mobile in the sign in widget, select a number on the AuthcorePass app that matches with the number displayed on the widget to complete the passwordless sign in process.
AuthcorePass Key Features.

AuthcorePass

Adobe XD prototype

  • The video below demostrated how Authcore Widget and AuthcorePass works together with the approve sign in feature.