Mobile app

01. The Challenge

Brief: I was challenged to add a feature to an existing mobile app while following the existing visual design guidelines. I choose to add a feature to the Yelp mobile app. Yelp is a company that lets people write and read reviews on a variety of business types, mostly dining and shopping businesses.

After conducting discovery research to identify the problem space, I added a current wait time feature to let users report current restaurant wait times, and to filter search results to find places to eat with an acceptable wait time.

Tools: Sketch, Adobe Illustrator, Marvel, Maze, InVision

02. Empathize

I first conducted research on Yelp and its competitors in order to compare features offered, as well as to see where Yelp currently falls in the business landscape.

Yelp has several competitors- mainly Google Reviews. I learned about the various features offered by competitors and tracked them on a competitive feature analysis chart to learn where Yelp had room for improvement. This process also helps to determine what features users come to expect from similar businesses.

Feature Comparison Chart

I then created a market positioning chart to unveil the potential blue ocean for Yelp. I plotted Yelp and the competitors based on how many features are offered, and how much business variety is on the platform.

Market Positioning Chart

I then conducted more specific internet research on Yelp to uncover habits and pains. Primarily, users found they had a large number of businesses they'd bookmarked but never categorized. Some users compained about the "Get Directions" functionality only working with Apple Maps.

I next conducted interviews with 5 Yelp users. They all mainly use Yelp for finding places to eat. It was challenging to receive information on pain points; the only pain users were mentioning was that the quality of photos could use improvement. I then tried broadening my interview questions.

I started asking about pain points that users have when dining out (rather than just when using Yelp), then began receiving much more information!

The main pain point users mentioned was waiting a long time to be seated or to receive their food. One user stated, "I hate waiting! Usually when I go out to eat, I'm already pretty hungry."

03. Define

I used the value proposition canvas, which helped me organize findings, identify jobs to be done, & get a good idea of market-fit. Given that Yelp is a mature product, I found more value in devising a job story to address the main user pain, rather than creating a user persona.

The job story that guided my brainstorming is:

When users need to decide on a place to eat, they want to find a good option with a minimal wait time so that they can have a satisfying, positive experience.

Value Proposition Canvas

04. Ideate

I devised “How Might We?” statements, then began to ideate solutions. Once I’d generated various ideas, I selected the ones that would best solve user pains and plotted them onto an impact vs effort chart.

Feature Prioritization

The solution is a feature that displays current restaurant wait time to be seated, and that lets users filter search results to display only wait times they are comfortable with. The wait times will be self-reported by Yelp users currently at the restaurant. To incentivize submitting wait times, each submission will help the likelihood of achieving Yelp “elite” status.

05. Prototype

I then created the user flow, which mapped out all screens and decisions the user would encounter while navigating the happy path through the product. This enabled me to create the lo-fi prototype with all the required screens.

User Flow

My next step was to sketch out lo-fi wireframes, the main screens are shown in the photos below.

Low-Fidelity Wireframes

06. Test

I prototyped the lo-fi wireframes in Marvel, then did usability testing with Maze. I tested with 6 users, while sitting beside them so I could hear their comments and notice any troubles. Users felt the scroll picker format to filter search results was intuitive, so I kept the same format for the mid-fi wireframes.

Mid-Fidelity Design Elements

Next, I did usability testing on the mid-fi prototype with 5 different users.

Some users wanted to arrive at the Italian restaurants screen via a different route than the one prototyped: “I would just prefer to narrow it down to restaurants first, because if I type ‘Italian,’ then it’ll show me Italian bakeries and grocery stores and stuff.” This is a prime example of the importance of research and usability testing- users’ mental models often don’t reflect our own!

One user tried to scroll the max wait bar rather than click directly on the “20 minutes” area (this would have led to success in the real product). Some users also wanted to sort the search results, rather than to filter them. This provided valuable information; users should have the option to sort (and not just filter) results by wait time.  

In terms of the given wait times for each business, one user stated, “I didn’t even see any wait times” despite it having been present. I took this feedback into account and made this more prominent in the high-fi's. I also added a small clock icon to further highlight the wait time.

Before moving on to complete the hi-fi prototype, I devised a design inventory using atomic design. Small components such as icons, typographic choice and size, and colors are considered atoms. Atoms combine to form molecules, which further combine to form organisms. This ensures efficiency when it comes time to develop the design (because the code for the various elements can be re-used).

I followed the style guidelines on Yelp’s branding page to maintain consistency with the existing app.

Style Tile

I then finalized the hi-fidelity prototype, with the changes I made after having tested the mid-fi prototype.

07. Conclusion

Completion of this project left me with two main take-aways. Firstly, it’s important to create hotlinks for all areas on the screen which a user could click and still get to the desired result. This is important to get a more accurate misclick rate.

Secondly, sometimes we need to go broad when asking questions and approaching solutions through design. Asking about frustrations with the Yelp app yielded only quite minor complaints. It was only went I went broad by stepping back and asking about pains when dining out in general that I started learning about more major user pain points. Amazingly, design & technology have the potential to solve very non-technical, real-life problems (like waiting a long time for your food!)

Success to evaluate success of this feature include rate of users sorting and filtering by wait time, as well as time to task completion. My next steps are to prototype the path a user would take to report a current restaurant wait time.

Thanks for reading!