Yelp Accessibility Feature
View full case study here
Project Overview
The Challenge
Yelp has been the essential go-to app for anyone looking for more information on restaurants, venues, and much more. However, Yelp and its competitors fall short in letting users know the accessibility accommodations that a business may or may not have.
The Solution
In order for Yelp to remain the industry leader that it is today, an accessibility-focused feature must be introduced. Filters and review sorting options pertaining to be introduced and integrated seamlessly into its existing design system.
Role: UX/UI Designer Tools: Figma, Zoom
Project Goals
People with disabilities need an easy way to assess the state of accessibility in a restaurant/venue in order to have a good experience. An accessibility-focused feature is to be introduced to help Yelp stay at the forefront of accessibility.
In order to deliver that experience to its users, Yelp needs to:
Integrate an accessibility focused feature to display accessibility ratings.
Allow in-depth accessibility filters and sort by options.
Allow users to search and filter reviews based on accessibility.
Allow users to leave reviews pertaining to the restaurant or venue’s accessibility.
Research
In order to understand how to create a worthwhile experience, we first have to understand who our users are. In order to do so, I conducted primary and secondary research to understand the problem space.
After forming a research plan, I began with secondary research. This included market research to understand current market trends and competitive analysis for benchmarking Yelp’s main competitors.
Competitive Analysis Key Takeaways:
Almost all competitors lack thorough accessibility filters
All competitors lack the ability to filter reviews based on accessibility
Apps like iAccess Life are accessibility focused but have too small of a user base to provide a substantial number of reviews
1 on 1 User Interviews
Moving on to primary research, I conducted 1 on 1 user interviews to gain insight into who it is I am designing for. The goal of the interviews was to understand the users’ expectations, motivations, and frustrations with restaurant accessibility.
User Interview Key Takeaways:
The research put into the Yelp project showed that users generally feel that businesses are not fully transparent with the accommodations they offer to people with disabilities. The competitive analysis found a competitor that is accessibility-focused but lacks the user base to leave significant amounts of reviews regarding accessibility.
FRUSTRATIONS:
Lack of Transparency- Businesses are often not fully transparent with their accommodations
Lack of Information Available- Users often find trouble finding readily available information and reviews regarding the accessibility of restaurants/venues
MOTIVATIONS:
Assurance- Users want to know that they will be taken care of, without any surprises
Clarity- Users need the information to be accurate, clear, and presented upfront so that they can make an informed decision
Ease of Use- The users need to have a seamless experience with the feature
Ideation
User and Task Flows
To create a task flow, a key task was defined and the steps a user would need to make to accomplish their task were mapped out.
A user flow was then created to create an understanding of all the ways a user can accomplish a certain task.
Wireframes
Brining over our ideas and layouts from initial sketches, low-fidelity wireframes were built in Balsamiq. These wireframes helped quickly explore different layouts, hierarchies, and functionalities before beginning the main design.
Mobile and Desktop UI Designs
Using our wireframes as a reference we designed the new Yelp accessibility feature integration. The existing design Yelp design system was used to ensure a consistent and natural experience.
What’s changed?
The accessibility filters, search by, and review functionalities build upon the system Yelp already has in place. No new extensive pages had to be added in order to integrate this feature. However, many small changes were made in order to make the integration cohesive.
Mobile- Main Page
A very small change on the main (search) page was the addition of an “Accessible” button to the previous categories provided. This allows users to bypass filter or search by options in order to jump to a pre-filtered results page with displayed accessibility ratings.
Mobile- Filter Functionality
A small change to the filters menu adds accessibility preferences that go beyond just the wheelchair-accessible option that is available currently. It includes other preferences that include those with auditory and visual disabilities, as well as physical disabilities.
Mobile- “Sort By” Functionality
A small change to the sort results by function introduces an Accessibility Rating option. This would allow users to sort results by Accessibility Rating. Restaurants/venues with the highest rating would be displayed first, while those with no existing rating would not appear.
Mobile- Search Results Page (Accessibility Rating Selected)
With the addition of the sort by accessibility rating option, results displayed when the option is selected show the accessibility rating within the restaurant card on the right-hand side. Tapping on the accessibility icon or rating will lead the user directly to the review page (pre-filtered).
Mobile- Review Page
The review page now displays pre-filtered reviews that pertain to the restaurant’s accessibility. The same review system in place will display the accessibility rating, as well as accessibility-related tags below the review.
Mobile- Leaving a Review
The leave a review flow received several changes. Leaving a review now has the option to rate accessibility (this is entirely optional). Tags can be added that now include accessibility-related accommodations.
Mobile- Restaurant Detail Page
A minor change to the restaurant detail page now displays the accessibility rating for that restaurant (if it is rated). This will always be displayed regardless of the filters selected.
Desktop- Results Page
The sidebar filter options changed to reflect the accessibility filters that are available. The sort function change also reflects the new sort by accessibility rating option.
Desktop- Reviews Page
The review page changes mimic the changes made to the mobile version. The pre-filtered results display accessibility ratings as well as correlating accessibility-related tags.
Desktop- Leaving a Review
Leaving a review on the desktop also mimics the mobile version. The option to rate the restaurant’s accessibility as well as leave accessibility-related tags are integrated into the same page.
Usability Testing
Usability tests were conducted in person and recorded with the users’ consent.
Task 1: Find an accessible restaurant using the sort by feature and leave a review (Desktop).
Task 2: Find an accessible restaurant by using the sort by/filter features and leave a review (Mobile).
Priority Revisions
The usability test results were very promising and only a few minor tweaks were needed to flesh out the design.
There was some confusion on the displayed accessibility results. Changes were made so that it was evident that not all restaurants will have an accessibility rating and that only those that are rated will be displayed when filtered (High to Low).