Onboarding wizard: 1st step (Desktop version)
Rojin Maljaei
UI/UX Designer
An onboarding wizard design
Uberall
About the project
Uberall is a brand management tool that helps companies to have better control over their brand's visibility and reputation. In this project, I am going to design a simple on-boarding wizard for business owners to insert their location and working hour data before start using the platform itself. I completed this project with the help of Adobe XD and Adobe Illustrator. Here are the desktop designs:
Onboarding wizard: 2nd step (Desktop version)
Onboarding wizard: Final step (Desktop version)
The mobile views
Few important points
Input status and validation
There are 2 different reactions from each field in the form that the user will see while filling up the form:
- Border focus: While the user is filling up the form, the border of each field will be blue to show the focus on that specific field.
- Mandatory input: All of the fields are mandatory in this wizard, so if the user wanna leave any of them empty and click on Next button without filling up the form, borders of each empty field will get red.
Why full page over modal?
A wizard can design as an overlay modal or a full page. There are different reasons to help you decide which one is more convenient for your design.
I decided to design the wizard as a form in a full page because of these reasons:
1. A modal is an overlay page so there is a background view of the previous page and it may distract the user's focus.
2. When a user comes to this wizard, we want to help him to go further in the process and start using the Uberall platform, so if the user by mistake clicks on the overlay part, the modal will be closed and the user will be distracted.
Onboarding wizard's progress bar from the start point to the end point
Lowering the bounce rate
As this wizard is trying to onboard user before start using the platform, most of the users might not be very loyal to the platform yet. So we should be careful in our design to make sure we keep the conversion rate high and lower the bounce rate. To do so, I decided to break the form down to 2 steps and added a progress bar on top of the view.
As working hours fields can make the form quite long, it might frighten the users. Most of users don't like to fill up lengthy forms. It might encourage them to leave the site.
When we have steps and there is a next button, it solves the problem of lengthy form but some users might think this is a form with many steps and it annoys them. To keep the users calm and encourage them to continue filling up the form, there is a progress bar which shows there are only a few steps and we are not gonna take too much of their time.
Different designs for working hours
In the second step of this wizard, a user should add the daily working hours of his company. The design couldn't be the same in the mobile and desktop view. The reason I made this decision is the differences in tools the user have access in mobile and desktop devices. A mobile device is usually a touchable screen so I designed it in a way that the user adjusting the working hours by finger easily, but I designed it differently for the desktop version to be adjustable by mouse and keyboard very well.
Working hours section in 2 different view of Mobile and Desktop