- The On-boarding Wizard
User on-boarding is the first interaction the user has with the product. It can bring the user in or drive the user away. It is how well you present or explain your product in the first few minutes that counts. My next project was working on designing the on-boarding tool.
American Students Assistance had a website saltmoney.org. The purpose of this website was to educate students about finance and loan management. The user had to register online and then go through an online form so that relevant articles could be presented to the users. Along with need based tools and resources.
The Problem:
The users feedback was that they found the website confusing and could not understand the on-boarding process. The heat maps pointed out that the users were spending very less time on the on-boarding tools.
The issues identified with the on-boarding tool was:
- The users after the login landed on the tool. It was unclear to the users what to do with it.
- The age group using this tool would prefer less text heavy tools.
- The drag drop icons were not visible and not drag drop.
- The option of colleges adding and removing goal choices had to be added.
The Team:
A UX designer, a front end developer and a content writer had been assigned on this 2 week sprint. My role was UX designer for the overlay.
Solution:
As a first step an on-boarding introduction tool was added to introduce what the user needs to do as he or she joins the website. An overlay with images, quick steps and what to expect on joining.
Design:
As I went through the process of designing the introduction tool I researched what would be the best means to give a quick introduction.
Icons: Based on the text provided by the content writer I designed the icons with the brand colours. I decided to give the overlay a unique shape to keep it in line with brand shapes. The shapes gets the users interests.
The progress Bar: The progress bar shapes I researched on the bars, numbers and dotted progress shapes. During my research based on the brand colours the bar was too distracting and heavy on the tool. Since there were only four screens the numbers looked too distracting too. Based on discussions and research added the dotted progress bar.
Quit the tool: A discussion was held around providing the user the option to quit. Since this was a one time introduction discussions were held around that the user should not be given the option. On detailed research and best practices I found that forcing the user to go through the introduction template could annoy the user instead of helping. So a tool quit button was added on the side.
The second part of the assignment was to make changes in the on-boarding tool.
This part of the project I was given 2 sprints to finish. My role was of the designer and front end developer.
Design:
The drag and drop icons: I changed the icons into more recognizable icons so that the user can identify how to rank the goals.
Hierarchy: Added colour contrast, text size variations to create a hierarchy on the page enabling the user to reach the important relevant information that is visible in the first scan. It was also done to achieve the 508 compliance.
Overall shape: Changed the shape of the tool overlay to look similar to the on-boarding presentation. This is in line with the brand design.
Development:
On looking through the existing tool it was identified that an image had been added showing the lowest to the highest. I used SASS to create a line that depended on the goals. With the goals getting added and removed the lowest to highest bar size reduced or became longer.
508 compliance. The tools had to have the ability to change the goal ranking by typing the number in the number places. To enable this ASCII keys were used to restrict the entry from 1 to 4. And based on the goals being removed the numbers would get renumbered.
Based on the ranking the content would get displayed on the dashboard.
Result:
The user tests were conducted and the users responded well to the new on-boarding tool introduction. The goal ranking section also worked well as the page looked more informative.