Lite Onboarding

Overview

Lite Onboarding is a system responsible for managing employees and onboarding new employees. This project was on a tight deadline and was to be completed in a month, I was responsible for the UI and UX design for the whole product*, designing approximately 30+ new screens and their landing page.

Role

UX Designer

With who? (Stakeholders)

Product manager
Business analyst
A team of engineers
Other founders of the team

What did I do?

High fidelity screen designs
Landing pages
Email designs

*Because of Non-Disclosure Agreement, I am only able to show designs from employee onboarding section.

Process

Kick-off

Timeline and project scope

W2-3

Desk research

*Heuristics Analysis

Competitor analysis

W3-6

Designing

*Landing page (website)

*Employee portal

*Employer portal

Development and release

*Parts I was responsible for

Not interested in process? Click here to view final designs

Understanding the problem

Only 90%

of existing employees (mainly hospitality workers) on the platform filled in all their personal and financial details before the first day of work.

This is frustrating for employers as they would have to chase up tax and personal details.

Business Goal

The goal was to bump this up to 100%, furthermore:

Improve the UX of the page and its responsiveness. This was especially important for the employee portal as many users were students under 18 years old who mainly used a mobile phone to fill in their forms.
Improve clarity in the process. Since many users were young, they didn’t understand how to fill in tax information.
We needed to improve this by providing more guidance in the process.
Redesign the UI of the platform.

Heuristics Analysis

Looking at the old UI, I have noticed there were plenty of room for improvements...

Lacks visual cue in what’s important

When users first enter the dashboard and are informed their information is incomplete, there is no sense of urgency encouraging users to complete their profile

White space and multicolumn form

Multicolumn form takes more effort to scan through quickly. There is also unnecessary white space which separate the page and the page is not mobile responsive

Icons that don’t reflect functionality

Date picker and the 'Add another' button had the same icons, although they had different functions.

Lacks visual cue in what’s important

‘Your profile is almost done!’ But what needs to be done? Interface has no indication into what’s missing and what is complete

Solution

Let’s say you’re a high school student about to enter your first job as a waitress...

And you’re now using the newly designed Light Onboarding to fill in your personal information...

More urgency and indication into what's incomplete

You are now informed of what's incomplete and what requires your attention, using colour and text as indication

Visualisation of progress

A visualisation of what you have completed and what's left in the form

When section is in progress, icon is yellow-

When section is complete, icon turns green -

Improved form filling UX

Knowing that forms aren’t the most pleasant thing to fill in, I have improved the experience to a single column form, with improvements to visual details for better scanning.

Layout

Redesigned to a single column not because it is faster to fill in, but also better implementation for mobile responsiveness.

Colours

With green as the primary colour, I have used the colour purple as a background colour, giving differentiation between green checkboxes and buttons on the form.

Visual hierarchy

Adjusted title and paragraph font sizes to indicate what’s important

Buttons and icons with more clarity

Icons now reflect their function, and are given more visual differentiation between primary and secondary buttons.  
No more confusion!

Explainer information into tax information

More clarity into what are ‘adult’ terms like TFN, how to set it up and what are your options in selecting a superfund.

Mobile responsiveness

Fill in your information even when you leave your desktop. On your bus ride or when you’re out having lunch. Quick and easy :)

Email designs

Redesigned onboarding and reminder email templates matching the new look of the platform with more guidance included.
(Illustrations were chosen from a free illustration library.)

Lite Onboarding

Relevant projects

Search Project

Popsup