OpenTable
A reservation app feature concept garnering more personalized recommendations for users.
Project - Mobile application feature
Team - Team of 5 UX Designers
My Roles - UX Researcher, UX Writer, UX Designer
Tools - Figma, Maze, Miro
Methodologies - User Interviews, Affinity Mapping, Persona Creation, Journey Mapping, Comparative Feature Inventory, User Flows, Application Site Map, Design Studio, Sketching, Wireframing, Iterative Testing, Prototyping, Usability Testing
With a global shift towards more social and personal experiences, we developed a way to garner a new connectedness through the universal language of food while maintaining OpenTable’s position as the world’s leading restaurant reservation platform. OpenTable provides a mobile/web tool for restaurants to manage reservations and for users to explore, book, and manage their personal reservations.
It lacks a social aspect that allows users to share their saved restaurants with their peers and explore a map of only their saved restaurants.
Learning from the User
I looked into what features already exist on comparable platforms Resy, Yelp, Seated, and Tock. This gave us an idea of what features were available to users elsewhere and gave a frame of reference in my interviews.
I discovered the personal and social aspects of OpenTable were non-existent and saw opportunity. Our team conducted 10 user interviews to gage user’s feelings about making reservations, deciding on restaurants, social media use, and how they are influenced in their decision making.
How much value do users place on what their peers say and do? Isn’t this the question everyone’s been asking for ages? Well, our team went ahead and beat it into the ground some more.
Picking Apart the Information
-
100%
of users mentioned going through extensive research just to pick a place to eat. Additionally, we discovered many of them use multiple apps but found the number of review options overwhelming or misleading.
-
60%
of users mentioned they make decisions based on the recommendations of friends. Users placed high value on these friendly suggestions, often acting on the advice of their peers by going to the suggested place IF they were able to remember the suggestion.
-
70%
of users claimed to be easily influenced by social media.
How might we help Owen refine his options in a way that’s personal to him?
How might we help Owen keep track of the favorite spots of his inner circle?
Meet Owen.
With these insights backed by our research, I began to empathize with the typical user, Owen Taylor.
Owen Taylor is a socialite who values the opinions of their peers. They’re always getting recommendations or making mental notes of spots their friends mention in passing or they see featured on social platforms. They have a problem we’ve all dealt with before - finding that talked-about spot to eat.
Owen is untrusting and tired of sifting through reviews on multiple different platforms. Owen feels annoyed when they can’t remember that cool spot their friend recommended.
Design
Now begins designing a thoughtful feature that solves these problems. It took a lot of bouncing ideas around and referring back to research, specifically our comparative feature analysis to review what features other platforms use to counter this problem.
I narrowed it down to 4 main features:
Saving restaurants.
Sharing saved lists.
Refining a map by saved restaurants.
Viewing lists shared with you.
Bringing It To Life
We each solo-sketched out our ideas of how this feature would flow into the existing platform. Beforehand, we established some iconography and page layout based on the current app and its style guide (please note upon completing this project, there have been updates to the overall appearance of the app). Then we got to sketching.
We regrouped and decided the overall layout of my sketch with adjustments and small changes based on a few other sketches in the group was our starting ground. Another draft was drawn and I transferred it to a digital low and mid-fidelity wireframe.
Following a Style Guide
In the mid-fidelity iteration, changes were made to integrate the feature into the existing flow of the platform.
I then reiterated the mid-fidelity wireframe into a high fidelity prototype on Figma and focused on the very specific style guidelines for typeface, font, iconography, copy, navigation, filters, and page layout.
Here you can see specific design patterns we took from the existing app to seamlessly merge our feature.
Testing It Out
We conducted usability testing with 10 people, divided between 2 rounds of testing. Both rounds of tests were conducted through a user testing tool Maze.co which prompted users with 4 tasks and provided detailed results such as click heatmaps, number of errors, and timed results. I also asked a set of interview questions to gather what might have been challenging for the users. After the first round of tests, I made changes based on those results, retested with new users, and then refined the design with additional changes.
We made some important discoveries.
-
40%
of users had trouble selecting the save button because the hit area was limited to just the icon.
I adjusted the hit area to be 33px by 32px.
-
100%
of users did not understand what content they were sharing when clicking the share icon. Post testing interviews revealed that users thought they were sharing an individual restaurant or a reservation they made.
I fixed this problem by adding the text “Share List” next to the share icon. As a result of this change, we saw 100% success in the second round of testing.
-
60%
of users struggled with the task of selecting the restaurants recommended by multiple friends as indicated on the map. Post testing interviews revealed that most users thought the red icon with the star represented a sponsored restaurant, an ad, or they didn’t know what it was at all.
We held a design studio to reiterate the design of the icon, settling for a more universally known friend icon.
For the Future
Based on usability interviews and some additional comparative analysis, I determined what direction and lengths this feature could travel.
Users showed interest in adding notes under saved restaurants to jot down their favorite dish or bits of info they’d want their friends to know about that restaurant. One comparative app, Yelp, had this capability.
I would also want to integrate this feature further into the app, such as in the form of an icon or annotation showing a friend has saved the restaurant while browsing the homepage or restaurant page.
A call to action is needed underneath the “no results” error message.
With this new feature, there is room for growth and expansion, therefore more usability tests are needed to confirm the effectiveness of reiterations.