Overview
Gallivant, a travel planning startup in its infancy stage, has a mission to integrate separate tools into one platform in order to ease the pain in planning. Gallivant had a limited product sandbox that allowed visitors to explore features of the platform but received confused reactions. While a redesign is not possible until Gallivant launches, I collaborated with the Product Management Lead and the Founder to replace this sandbox with a How it Works page to help onboard the user onto this platform.
Role
Product Designer
Duration
2 weeks
Type
Onboarding Experience
How it Works
Startup
Team
Nguyet Ly, Founder
David Hernandez, Product Manager Lead
Carolyn Nguyen, Product Design Lead
Alison Abrams, Data Analytics Lead
Sinai Sampson-Hill, Marketing Lead
Problem
Gallivant’s “See the Demo” introduced features and tools with little context, leaving users feeling confused about its services.
First impressions generate returning users
A sandbox can be a powerful tool, however, users became overwhelmed with the amount of information they were thrown into.
This could leave a negative first impression before users may want to sign up and wanted to test more.
Research
Identifying Pain Points with Initial User Testing
Since the product hasn’t launched yet, I turned to our team members who fit into the second group of user personas. I tested the demo on them to find what was confusing. I put together a script outlining tasks that the user can do and asked questions.
Here were a few examples of issues we ran into during user testing:
Design Goals
How to clear the confusion?
1. Fix the design
2. Onboarding experience
Fixing the design
Currently, redesign is a low priority due to the amount that the founder has already invested in outsourced design and development. The founder and I came to a compromise that once the product launches, we can better identify pain points with the design with a bigger and unbiased user audience.
What kind of onboarding process?
I do believe that there are amazing tools provided here, but there is little context to help the user understand what’s going on.
However, we can focus on the onboarding experience. For now, we wanted to focus on a “soft” onboarding experience: a quick tutorial walkthrough or a “How it Works” page. This would fit within the budget to develop.
Ideation
Comparing “How it Works” Flows
I compared different How it Works pages of the following products due to their good design and intuitive use despite the complicated nature of their product: AirBnb, Netflix, Uber, and Slack.
From this, the key insights I took away were:
- information was fed at 3 or 4 chunks at a time
- static page vs dynamic page = tradeoff between scrolling and clicking
- Headers were short and focused on the task
- Summary of each section was short and 1-2 sentences max
- Can have links that lead users directly to that feature
Sketch to visualize different layouts
From the comparative analysis, I brainstormed several ideas of information layout based on my findings.
High-Fidelity Designs
Translating sketches to high-fidelity screens
I wasn’t sure how it would look on the landing page vs a separate page for itself, so I mocked the sketches into high-fidelity designs since the style guide was already established in Figma. It was nice to see how it would look on the product itself.
Final Design
Finalizing Gallivant’s How it Works page
The Founder and I went over the designs and my thought process. We decided to go with a separate How it Works page that is now implemented.
“How it Works” will replace “See the Demo”
- because the benefits outweigh using a sandbox
- so that new visitors can understand the big picture
- Each button will push the user to either Log In or Sign Up to make an account if they want to start using the platform
Reflection
The “now solution” vs ideal solution
This project taught me multiple important perspectives as a designer:
- The design that designers ideally want may be too costly, difficult to implement, or exist when the product is more mature.
- Design needs to be aligned with other disciplinaries:
- Product
- Marketing
- Development
- The design that is chosen depends on the context of the following factors:
- feasibility
- cost/budget
- timeline
Excited for the next steps
This project focuses on the “soft” onboarding experience. As the Beta product launches, I want to gather feedback to assess for redesign and a deeper onboarding experience.
