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.
*Because of Non-Disclosure Agreement, I am only able to show designs from employee onboarding section.
Process and stakeholder
Stakeholders I have worked with were:
2 Product Managers
External stakeholders who were a part of and co-founded the project
of existing users on the platform filled in all their personal and financial details before the first day of work, the goal is to bump this up to 100%
The previous onboarding system was also not responsive and the UI and UX needed a refresh. The client also wanted new brand colours for the system.
Working closely with the a developer of the team, I had to follow a design framework, which was pages.revox.io for the whole of the design process.
I have then generated new designs responding to these heuristic problems, and while following the design system, refreshed the colour palette of the screens.
Use of colours to indicate urgency
Using colour tags and text, visualising what is incomplete and what needs to be completed, prompting employees to complete their profile
Visualisation of progress
Following Jakob Nielson's Usability Heuristics of 'Visibility of system status'. With this in mind I designedprocess indicator of what is completed, what is incompleted and what is in progress.
When section is in progress, icon is yellow-
When section is complete, icon turns green -
From multi column to single column
Research have shown users complete single column forms (in average 15.4 seconds) faster than multi column forms. I have removed this to a single column form.
I have used the colour purple as a background colour, giving differentiation between green checkboxes and buttons on the form
Buttons and icons with more clarity
I have ensured icons reflect their function, and given more visual differentiation between primary and secondary buttons.
Using colour to grab attention to important information
In sections where there is important information, I have used a blue text box to bring attention.
It was reported many employees used mobile to complete their forms so mobile responsiveness with consideration to usability was crucial. I have designed a sticky call-to-action bar so users would don't have to scroll down to find the button if they ever scrolled up to change information.
I've also designed emails for onboarding and reminding employees to fill out information. Illustrations were chosen from a free illustration library to save time.
Keeping a design system
Ensuring consistency, I have developed a library of components on Figma, using variants.
Working on a tight deadline - I had to hand in my designs for development in 4 weeks, where I was only working 2 days a week. Designing UI for the whole portal, landing page, emails and forms was hectic, but was possible as I organize my time wisely and reuse components.
Designing for users of different target groups - For the rest of this project, I was asked to design a portal for employee and employers. These were audiences of different age groups. The employee portal were used by mainly young people. Therefore, I was asked to design a more fun looking UI, in opposed to the employee portals, where ease of reading large amounts of information was the priority.