RoadWarrior Onboarding
Context
Problem
Goal
Timeframe
Aug - Oct 2024
RoadWarrior is a powerful route planner used by tens of thousands of professional drivers and dispatchers. It is available as a mobile app, used mostly by drivers, as well as a web platform used by dispatchers.
After users install the RoadWarrior Android/iOS app and see the first screen, where we immediately ask for their email, only 45% of users who install complete this step.
With the redesign of onboarding, I aimed to make the process smoother and more interactive, guiding users to provide their details to get started with the app.
Deliverable
Detailed Figma mocks, currently in development
My role
Lead Product Designer on a team with a Project Manager, Product Owner, and several developers
Overview
RoadWarrior is a route optimizing navigation platform available both as a phone app and a web app.
RoadWarrior has over 500,000 platform downloads, used by both solo drivers and fleet dispatchers.
Current onboarding flow and its problems
.png)
⬇️ Currently only 45% of new users who install get past the first registration screen.
Sketches & Conversations
I drew up a quick sketch of the onboarding at a basic level to easily visualize the process.
I used these sketches to run working sessions with the stakeholders and engineers to narrow down requirements and get some clarifications.
I kept the line of communication ongoing with stakeholders and developers - through Slack, Figma comments, and working sessions.
I used the information from these sessions to create some How Might We? questions to drive problem solving and desirable outcomes.
Hi-Fi Mocks Iterations
I turned my sketches into hi-fidelity mocks, then noted some key areas of changes needed using the conversations with the stakeholders and developers.
One button or two? 🤔 dilemma
Among the iterations of the mocks, I questioned if simply having a "Get started" button that would capture the user's email, then branch out new accounts vs existing accounts would be the best first point of interaction.
How do I choose which approach to go with?
🧪 Guerrilla testing to the rescue!
I prototyped up both versions of the onboarding flow, asked 5 friends if they can spend five minutes running through two flows and telling me which one they prefer.
I prototyped up both versions of the onboarding flow, asked 5 friends if they can spend five minutes running through two flows and telling me which one they prefer.
The results were in...
Most participants in the guerrilla test cited having both options to choose from in the beginning were simple enough to start. The explanatory text about the app checking if the email belongs to an existing user proved to make things more confusing.
With this newfound information, I moved forward with the mocks using the two button approach.
Final Mocks & Outcomes
Goals: apply user testing results and create final mocks, accounting for error states and caveats
I had an open line of communication with the engineers through comments on Figma, plus clearly marked states and pages.
I worked with a motion designer to create a simple logo animation for the splash screen.
🎬 Final mocks
On first load, the splash screen appears, followed by the launch screen with two buttons - Sign up or Log in.
I ensured the experience had friendly imagery and tone, as well as value-add screens that were visible by swiping.
For new user signups, I kept the flow to create an account simple and easy - grab their email, set their password.
I made sure I included error states and in-between states - like when the account exists already.
For new user signups, I kept the flow to create an account simple and easy - grab their email, set their password.
I made sure I included error states and in-between states - like when the account exists already.
After a quick two-question survey, new users are asked to allow location access and push notifications.
Each type of user is shown a tailored message for location and push notification access.
New users are shown a quick animation, then taken to the initial landing screen that guides them to create a new route.
For returning users, I ensured they have a simple email or username input, and I accounted for error states.
For returning user password input, I also accounted for error states and caveats to make the login process as seamless as possible.
Outcomes
The RoadWarrior onboarding experience redesign is currently in development.
Quick initial testing showed 90% of participants preferred the new prototyped flow over the current one.
I was able to lead the design of the entire onboarding experience, working closely alongside the lead developer and product owners.