Improving the onboarding experience for an employee management system
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.
UX Designer
Product manager
Business analyst
A team of engineers
Other founders of the team
High fidelity screen designs
Landing pages
Email designs
*Because of Non-Disclosure Agreement, I am only able to show designs from employee onboarding section.
Timeline and project scope
The goal was to bump this up to 100%, furthermore:
Looking at the old UI, I have noticed there were plenty of room for improvements...
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
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
Date picker and the 'Add another' button had the same icons, although they had different functions.
‘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.
Redesigned to a single column not because it is faster to fill in, but also better implementation for mobile responsiveness.
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.
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.)
