Yelp’s current mobile web list/map interface gets the job done, but can be better.
Redesign Yelp’s mobile web list/map view interface.
Understanding the Interface and Target Audience
To accurately understand how Yelp’s web interface is used, I made sure to:
- Understand the goal of the web interface.
- Be aware of the audience Yelp serves.
- Understand when and where users would interact with the interface.
My Redesign Process
- Define the problem.
- Define the target audience.
- Analyze similar apps providing similar services as Yelp.
- Draw sketches & create wireframes.
- Create the first interface and get user feedback by A/B testing.
- Redesign problematic interfaces using feedback received from users.
- Prototype final product.
By completing user testing of Yelp’s web interface, I defined issues with current workflows. In doing so, I learned what needed to be improved and which pieces of the interface caused problems for users.
Problems & Pain Points Affecting Users’ Workflow
- Buttons — In a few places the search and cancel buttons were swapped or duplicated. Both cause the user to have a harder time completing their desired task.
- Filters — Users do not know if they are applying filter. Instead of showing an apply button after adding filters, a second search button is displayed.
- Times — The cards within the search interface do not show hours. In turn, users add another click to their workflow to find a place to eat.
Understanding how a user is likely to use Yelp was key to an intuitive web interface. By storyboarding, I knew what parts of the interface needed prioritization.
Impact & Effort
I completed a competitive analysis of other apps which provide similar services to Yelp. I found that these apps utilized different elements such as list and map option or cards. To see which was the most ideal I compared them using an Impact / Effort Matrix.
Beginning Sketches & Wireframes
While reviewing the interface, I drew a few wireframes to help combat problems I found. After defining existing pain points, I completed a speed sketch. This helped me understand how Yelp's interface could be redesigned.
The First Design
The first interface fixed problems with Yelp’s current web interface but created new pain points. After A/B testing, the feedback received told me changes needed to be made.
- The map interface caused cards to feel cluttered. The shopping bag which symbolized ‘pick up’ confused users and caused them to ignore the icon.
- The map interface also caused users to feel overwhelmed. They felt the List and Map View switcher was too prominent and it was a challenge to reach the zoom buttons.
The Final Interface
After taking feedback from users, I understood what made their processes more manageable. From their feedback, I made both the list and map interfaces cleaner.
- In the list interface, I made sure to clean up the interfaces and build the cards into it. This made the interface more understandable and made the switcher less prominent.
Metrics for the Yelp Redesign
- A quicker decision on whether to tap on the restaurant card.
- Users will have a quicker understanding of the information presented.
- A higher rate of interaction on each restaurant card.
Thanks to small-scale A/B testing and getting feedback from users, I was able to make my design more usable. By focusing on the steps users take when finding a restaurant, I understood the best ways to uncover existing pain points in Yelp’s interface.
What can I do better?
- Find a set of people who use Yelp and ask for feedback on the design.
- Check for new pain points in the first design.
- Use different methods to share and display the project when it was complete.
What I am aware I did wrong.
- I sent my final design and case study to Uber unprepared. I thought I was sending an easy to understand case study. However, it was cluttered and did not touch on my whole design process.
Though Uber did not hire me, I am looking forward to future opportunities.
If you have any questions about my Yelp Redesign please feel free to reach out or say hello: [email protected]