UX case study: Redesigning the onboarding experience of a travel app
A look back at the first project I completed from a 10-month UX Design program and applying lessons I learned after graduating
Oof, what a journey. The bootcamp I signed up for was split into 5 phases, Design Essentials, Process Phase, Studio Phase, Client Phase and Portfolio Phase, each lasting from 6 to 12 weeks.
The Design Essentials phase was very content heavy; hour upon hours of required readings and videos every week (you can read more about the program by reading my cohort mate, Adam Bassett’s article linked below). They threw us into the deep end by also requiring our first project during this phase. Learning by doing, I get it. And while I wouldn’t say my end result was terrible, I definitely had some good thoughts behind decisions, it needed some fine tuning.
Bon Voyage is a travel app the provides recommendations in different cities around the world. Since it was our first project and in a six week timeframe, we were provided with three transcripts from user interviews. From there, I sythensized the data and realized the biggest problems were the following:
- Lack of authentic experiences from recommendations
- Need a way to collaborate and share itineraries
- Inability to have a customized experienced based on individual preferences
I did my best to tackle all of the problems in my original iteration but something wasn’t sitting right with the customized experience. Fast forward 10 months and I decided to take another stab at it!
For this case study, I focused on ways to improve the onboarding process. How can I effectively gather users preferences to create a more personalized experience?
Sign In or Sign Up
The onboarding process was probably my biggest change in this project. A quick google search on how to design an onboarding experience will give you countless articles and recommendations. Seeing as most users tend to not particularly enjoy the process, it can be tricky to get it right. My first attempt was basic and very safe. And to be honest, not effective at all.
The first change I made was simplifying the sign up or sign in screen. When thinking about signing into apps, you usually only have to sign up then the app remembers you. The only time you would have to sign in is if you are using a new device. So I think it’s a safe assumption to make that majority of users who will see the first screen are new and will have to create an account. This assumption allowed me to remove a screen and is one less click for new users.
Another useful addition was the password requirements so it’s no longer a guessing game. I also added an option to display the password (little eye icon) which then removes the requirement to confirm by retyping.
Again, I do not think my thought process behind the old design was terrible. It was just my first project, so hey, you live and you learn. Things I still wanted to incorporate from the old are:
- Alternative ways to sign up besides email
- Option to skip and explore the app (but yikes, you can barely even see that option in the old version)
- Make it easy for users to access the sign in screen without having to hit a back button
Now onto the hard part…
Onboarding attempt #1: The Nickel Tour
Often referred to as “The Nickel Tour” or “Coach Screens,” this onboarding type is a quick slideshow explaining the value proposition of the app. While the most common type of onboarding, this process isn’t very useful. Usually only a few screen long, it then leaves the user on their own to figure it all out.
But since it is the most common, I had the false bias that this method must be the answer to my own onboarding needs. I incorporated highlighted words that directly relate to the bottom navigation, thinking that these brief explanations would properly set the user up. Spoiler alert: it doesn't.
The app gains nothing from this and neither does the user. The thing that stuck out to me the most and was the catalyst to the redesign was the last slide that says “set up your profile.” Why not now? Why not walk the users through that process so the home feed is already customized for them the first time they ever see it?
Onboarding attempt #2: Customization
Now that I had a goal for onboarding in mind, I had to figure out how to gather information from the user and not be obnoxious about it. If you saw a sea of text inputs and drop downs, wouldn't you feel overwhelmed and just skip it? I know I would!
While learning about UI Design, this one video stuck out to me:
It’s a comical approach to a very good point. As you can tell by the title, there’s tons of profanity so please don’t get mad at me if you hit play around your children.
It made me think, why does filling out your information have to be so boring? I could use autofills and location services to make some aspects quicker, but what about filling out your preferences? That’s when gamification came to mind. How can I make it seem less like a task and more like a game? Which then will hopefully help with completion rates.
Side story: I got my first iPhone in 2008. The only app I honestly remember from it was this game where you pop bubble wrap. And you compete to see how many you can pop in a certain time period. So simple yet so addicting. Like so addicting. I’m pretty sure I only had friends so they can take my phone and play it. It made me realize that the quickest gesture on phones is tapping and tapping can actually be fun…? Am I really saying that?
So tapping is my answer! And after some research, I saw that Apple Music and Beats had very similar approach (I’m a Spotify girl, don’t @ me). I noticed Apple Music allows you to long tap on music categories you enjoy more which is a great feature, but wouldn't translate so well in this travel app. Instead the initial taps of categories would inform more specific questions on the next screen. It does add an extra step but there is always a skip option if users do not care to get into that level of detail.
So there you have it — an onboarding flow that actually has a purpose! And since this app is all about collaboration, why not help out the user and use their contacts to quickly find people they might connect with? Already off the bat, this newly designed onboarding process makes the app feel more customizable.
Think about what you need to get out of the users during onboarding and avoid pointless screens.
Click here to view the project `Bon Voyage`
This prototype brought to you by InVisionApp