Onboarding Tutorial Feature
Client Project with On The Go LA
I worked as the main UX Researcher on this project. I conducted user research via interviews, market research, user stories, and usability testing. I was also the lead spokesperson, and organized and presented data to our clients.
Tools: Miro, Figma, Adobe, Maze, Google Suite, Slack
My Role
Our user’s pain points showed the need for an increase in onboarding support and legal help. We tackled increasing support via tutorials, video walkthroughs, and an account login portal that could guide new users.
The Design Solution
This project had me working with our clients to improve their site so that their users would have a more supportive and enjoyable experience. To do this, we were assigned to design a feature that would recommend parking locations for their food trucks. The data quickly revealed that this was not something users actually wanted, at least not initially, and we had to pivot our design direction to match our user’s pain points.
Challenges
About on the go la
Origins
Based in LA, Gabriel and Enrique had a vision to help struggling restaurants toward an adaptable, mobile, and user-friendly environment! With innovation and hard work, they created On The Go LA! They are a food truck rental agency that’s geared toward first-time truck owners—especially those in the restaurant business trying to transition to something more mobile!
Ideals
1) convenient
2) innovative
3) economical
The Process
Initial Research
Our clients provided a list of previous users. However, we immediately encountered problems connecting with all but one of them. We created a survey to find users within our target audience.
Our target audience became new food truck users - restaurant owners that were trying to transition to a food truck, or a more mobile environment for their restaurant.
Data shows that users encounter many problems as new food truck users, but most of those problems stem from the initial onboarding process.
We discovered users weren’t as confident starting their food truck business and wanted more help and support.
The Problem.
On the Go LA clients need help with their onboarding process so that they feel reassured in operating their business from a food truck.
The Solution.
We designed a new website feature that guides new clients through walkthrough videos and giving them access to other useful resources to help them begin their journey.
Market Research & Personas
Competitive Analysis
Some research for our design phases included a C&C analysis, where we compared On the Go LA with their competitors and their available features. Here you can see the how other competiting companies might have an advantage over OTGLA due to the addition of more onboarding support and legal help.
primary Persona
Chelsea was our primary persona, she highlighted our user’s most inherent and immediate needs. When prioritizing our features, we kept Chelsea’s needs clearly in front.
Needs:
An easy onboarding process, help with truck equipment, immediate access to help in case of emergencies
Pain points:
Feeling apprehensive about new environment, feeling lost and unsupported
Secondary Persona
Lucas, while still representing our target audience, was our second persona. While not the priority and biggest influence on our design decisions, Lucas would still be affected by our designs. Therefore, his needs and pain points are still relevant to our prioritizations.
Needs:
More cohesion between his business and his truck, a way to keep consistency and shared info between all his trucks, and marketing help
Pain Points:
Feels disorganized and chaotic switching between programs
journey map
The journey map allows us to track the thoughts, emotions, and actions of Chelsea—giving us more insight into what she needs and why she’s not getting it.
(click images to see enlarged view)
What features are we looking for?
Convenient
We created a quick and easy navigation and video play style
Innovative
We introduced a personal training system specialized to each truck and user need
Economical
Everything is online—making it quick and easy to find
Design Elements
When prioritizing our features, we came to two essential ideas.
1) Clients needed a Login/Account page
2) Clients needed access to a gallery of walkthroughs and help videos
We determined these features through design studios and the creation of a moscow map (a design activity to identify and prioritize features). These features were considered key to solving our users problem and to help build confidence in our users while also building more trust and dependency on the company.
Prototype & wireframes
After the client creates an account, they will have access to all their information, settings, history, and training tutorials on their homepage. An account page is essential for a business renting food trucks, and can provide On the Go LA with important foundational information to further enhance their features in the future.
Here, you can see some lo-fidelity screens where we sketched out the basic outline of shapes. We designed these off the style and aesthetic of the original client site.
Mid-Fidelity Prototype
When first joining, users will be greeted by a welcome message and an offer for a quick tutorial for navigating the site. Here you can see the guide indicating where the training tutorials can be found. Users can exit this guide at any time, and gain access to it via the help button on the top right.
Once users are ready to view videos, they will find a multitude of grouped videos for their training needs. We anticipate that users need the most help with onboarding (gaining information on their trucks and included appliances), legal permits and licenses, and staffing.
In this image, the user chose to access the onboarding videos. They can gain access to the video gallery by the button on the left. They can also see their progress (how much content they’ve accessed already) by the progress icon on the right.
We’ve added the option of creating an account—this will save company info, data, customers, parking spots, etc. This also allows users to quickly gain access to training tutorials and support.
overview
Our goal was to discover the user’s ease and hardships with navigating the site
Users tested: 4
Tools: Figma, Maze, Zoom, Otter (transcribing)
Usability testing
Results
We found no major concerns with users navigating the site. However, we did discover some issues with accessibility. This was due to the way the colors were/weren’t contrasting.
Overall though, the general impression from the testing was that the designs and site navigation was intuitive and easy to follow. All users were able to easily finish their tasks within a short time period.
Recommendations
We recommend a change in colors for the site. The colors don’t have a high enough contrast (or in some cases, the contrast is too high), making some areas hard to read and not as accessible.
We also recommend keeping the icons minimal and to use easy to understand/familiar icons. Introducing a new feature can sometimes cause confusion to existing users as well, so keeping that in mind is also important.
High Fidelity Prototype and Mockup
Here you can see some mockups of our client site. We have yet to create a mobile prototype.
Next Steps
While we have designed features for onboarding, I would have really liked to delve into other options for helping users. For example, our idea of introducing tutorial videos and walkthroughs might not be as helpful for users already used to the appliances and tools on food trucks. Instead, I would like to potentially design features to help users with staffing, event finding, or even (the originally asked for) recommendation engine.