Orchestrating Identity: Optimising onboarding

The team had been working in stealth mode on this project and was starting to scale up. With a new front-end developer joining, they wanted to refine their initial work and create a comprehensive set of front-end tickets to advance the product to a market-ready state.

Together with their tech team, we reviewed the existing prototype and mapped out the user journey to get an overview of the experience so far. This analysis helped us pinpoint areas where the onboarding process could be enhanced.

The current prototype lacked clear descriptions to guide the user, making the multiple ID checks feel disjointed and confusing at times. We discussed a plan to implement some UX best practices around onboarding to enhance user comprehension.

Additionally, the UI's theming used the brand colour liberally on the background element. While this might not look bad in some cases, it could easily look garish with certain brand colours.

With the current flow in hand and an understanding of the processes we needed the users to follow I came up with a flow for their team to implement. This new flow focused around an 'Overview' page that would inform the user the process and at what point they are currently in it.

Once a user had signed the T&Cs and added their personal information, they would land on this new 'Overview' screen that would guide them through the process. Once they start an 'Activity' (Biometrics or ID processing) the user is shown what's going to happen before they jump into the task.

If the user finishes an 'Activity' and has more to complete they will loop back through the 'Overview', with the conformation that that prior step is done. Otherwise the user will end up at the 'User verified' screen to complete the process.

With the flow adjusted and then agreed upon, I moved into UI design. I used a Figma UI system (for the form and button elements) to save time and build my mockups in high fidelity. As an onboarding flow we kept the templates as static as possible; replacing the content in the forms and adding additional cards.

To help the authentication flow fit 3rd party experiences it needed to be responsive and white labeled. To make sure that brands could achieve cohesion we came up with some rules:

• Use system fonts — Allowing custom brand fonts was out of the question, so we settled to use the system font to blend in whatever platform the user was on.
• Forced aspect ratio for the logo — This keeps the logo unified across all platforms. After development started a square ratio was decided, so that we could suggest to users to pull theirs from their social platforms.
• Simple colour options — For colours we only allowed 2 options: The brand colour for the top bar and button to add a big splash of the brand on the UI. Followed by a Heading colour, that could be set to brand, brand secondary or a darker colour as needed.

Using Figma I created a file for the font end team use. This had the proposed flow, UI mockups, and examples of how the white labeling would work. We used this file to discuss further details during development and made further edits based on issues that arose once work began.