YELP ITINERARY
-
Collaborated with two other designers to add an itinerary feature to Yelp so users have a way to plan and record points of interest for a trip
-
Understood pain points of travelers through the process of user stories and competitive analysis
-
Successfully addressed the needs of different types of travelers while maintaining Yelp brand
Overview
Time Frame
2-Week Sprint
Skills
User Research, Competitive Analysis, Affinity Map, Medium-Fidelity Wireframes, High-Fidelity Wireframes, Interactive Prototype, User Testing, Animation, Presenting
Role
UX Team Members
Dan Staton
Nancy Lao
Susanna Quilter
Team Leader, UX Designer, Visual Designer, Motion Designer
Itinerary List
3D Touch View
Map View
User Research
Our team of three decided to interview people based on their travel habits, and figure out why they stick to itineraries and what pain points they have while going on a trip.
Traveler Interviews
"I find itineraries beneficial because I like predictability."
-Sarah (last traveled to Chicago)
"Itineraries are a blueprint, but when I'm there I'm flexible."
-Aaron (last traveled to NYC)
"I spend a lot of time trying to figure out how to get from point A to point B."
-Diane (last traveled to Haiti)
Affinity Map and Insights
Based on our interviews and user research, we made an affinity map including "I" statements.
I like the availability of tools like bookmarks, filters, and maps to help me contextualize my options.
Whether I plan loosely or in detail, time constraints are a pain point.
I like to share my experiences for the benefit of others.
Competitive Analysis
Each of us researched a travel app to get an idea of what other features could be possible for Yelp. I focused on Sygic Travel (Susanna looked at TripCase and Nancy looked at Roadtrippers). It was cumbersome to use when searching for points of interest, but the itinerary was really easy to edit.
I was interested in what users would think about Sygic. So apart from my team, I conducted a user story, asking users to complete tasks and then rate their feelings during each step.
It was clear that users had trouble searching for restaurants and events in Sygic, but once they found what they needed, they loved editing their itinerary list.
For Yelp, the opposite happened. People found it easy to find points of interest, but then users got frustrated when they tried to organize any bookmarks they saved.
Personas
Our team focused on two types of travelers: a loose planner and a tight scheduler. We came up with Lucy (loosey-goosey) and Titus (time manager). Susanna created the final images.
Storyboard
The storyboard we created stems from Titus above. He is a tight planner, and thought we could talk about a trip he could be taking to DC. We all came up with ideas for each frame, and then Nancy illustrated them.
While mom is away, Titus takes his daughters to DC!
He discovers a new feature in Yelp as he tries to find things to do in DC.
Back at home, the girls share their favorite memories from the trip.
While mom is away, Titus takes his daughters to DC!
Defining the problem
Design and Testing
Sketching and Testing
We set a timer for ten minutes, and each sketched out as many frames as we could. We narrowed down the sketches to five frames, and combined our thoughts on the whiteboard.
Users could create a new itinerary in one screen, and then view it in a list or a map. I had the idea to add a 3D touch features as well for shortcuts.
Nancy sketched out on paper what a clearer picture of these whiteboard frames would look like. A paper prototype was then put together (click button above).
After user testing we determined that users should access their Itineraries in the same place where their Bookmarks would appear; within the user profile.
Through more testing we determined that users need to have both categorized as well as uncategorized bookmarks (thus addressing both the needs of Lucy and Titus). So we had an unsorted bookmarks section, and then a section for each day that events could be dragged to.
Medium-Fidelity Wireframes
I created all of the medium fidelity wireframes for this job. Check it out!
From the paper prototype, we tested more users and found that they were confused by the slider icon that allows people to drag items to other days. They thought it was a hamburger menu, so we changed that in the interactive prototype. The icons on the top left were ambiguous to them, and the day names were too small.
They also did not know that in the map view we added a feature where the user could see each day individually, but they did not know how to access that, so I changed the way that appears in the prototype.
High-Fidelity Wireframes and Animation
I created all of the high-fidelity wireframes and an animation of the map.
Part of the Yelp brand is to be fun and add delight factors for users when possible, so I created this fun animation for the map view when you switch between different days using Principle animation.
Next Steps
What's next?
Notebook feature where users can take notes before, during, and after each point of interest
Multiple owners per itinerary so families can share
Add travel information such as flight numbers and hotel reservations
Redesign Yelp’s User Flow and streamline its numerous features (we put the Itinerary feature in the "More" tab because that's where the rest of Yelp's features are, so there needs to be a way to clean that up).
Success of the final product would be measured by having several travelers use the app during a short trip and asking them to record on a scale of 1-5 of how easy it would be to edit points of interest. This would be accompanied by how they would be feeling while using the app.
Did you know?
I love public speaking. I presented this to a group of experienced UX/UI designers, and they were overjoyed with my team's work. Take a look at our presentation!