OpenTable

Design Brief

OpenTable is a real-time online reservation network app that allows users to access, reserve, and rate restaurants. The goal of this case study was to enhance the experience and increase trust for returning users.

Role

UX Research, Product Strategy, UI Design, UX Design, Prototyping, Usability Test

Tools

Figjam, Figma, Maze, Notion

Timeline

7 weeks

  • Gain user retention and an increase of booking conversions.

  • Conducted discovery research and surveyed 30 people in which the following key highlights surfaced

    01 - Users would try a new restaurant if their friends recommended it

    02 - Users find a lot of the reservations apps too time consuming to make reservations

    03 - Users value good photos and high ratings for making their selections

  • Build social media integration which will establish a higher level of trust between the user and the app and higher user retention.

  • I uploaded my prototype in the Maze App and had 20 people test my prototype. Here I was able to see any problem areas in the layout.

  • 01 - USABILITY REVIEW OF APP

    02 - COMPETITOR BENCHMARKING

    03 - DISCOVERY RESEARCH

    04 - MIND MAP

    05 - USER FLOWS

    06 - USER PERSONA & JOURNEY

    07 - IDEATION + WIREFRAMING

    08 - LOW-FIDELITY MOCK UPS

    09 - HIGH-FIDELITY MOCK UPS

    10 - USER TESTING

introducing 3 key features

  1. Social Page - Add your contacts and verified users to follow on a social page

  2. Contact Groups - Add your contacts and verified users to follow on a social page

  3. Groups for Reservations - Use your groups to automatically send out reservation confirmation

How we arrived here

01 - Usability Review Findings

  • Existing features have high design integrity and user flow qualities

  • Opportunity to add value in accessibility and connectedness to the users social network

  • Improve UI & text hierarchy on homepage

02 - Competitor Benchmarking

  • Direct: Yelp

  • Indirect: Tripadvisor

03 - Discovery Research

3 key findings from surveying 30 adults that frequently dine out

  1. People prefer recommendations they trust

    “I would try this restaurant if it had been recommended by my friend”

  2. Users find a lot of the reservations apps time consuming to make reservations

    “Sometimes its faster to just pick up the phone and call to make reservations”

  3. Users really value good photos and high ratings for making their selections

    “Service, Quality, Price, Past Ratings”

80% ask their friends for restaurant recommendations

75% find reservation apps too slow

04 - MindMap

I prioritize my ideas by considering the user value and business value in considering: How might I make it easier for returning users to connect with their friends?

Key Learnings:

  • Improvement- I found that I was passionate about expanding on profile information and personalization features

  • Add- I found adding different ways of integrating the social aspect was something that was high on the priority list

05 - User Flows

Frustrations: There is no option to filter results when viewing reviews. Conducting the discovery research revealed: users really find value in recommendations of people they know and trust.

Solutions: Add Social Page, another avenue to view reviews and also more features while booking a reservation

05 - User Persona & Journey

07 - ideation

Wire framing to sketch out key UI components of my concept with adding the social element to the existing OpenTable app to visualize the user-flow.

08 - Low-fidelity mock up

Analyze initial mockups for opportunities to improve flow and usability before moving on to adding more technical detail and user testing.

current app interface

What’s new

  1. see how many people you know that have visited

  2. adding white space for buffer and spatial break up

  3. improved bar to consolidate options

  4. added groups feature

  5. available times made more visible

  6. improved navigation bar with Social feature and updated icons

#1

#2

#3

#4

#6

new design interface

#5

10 - Usability Testing

What's Next?

Testing, Feedback & Rework! After receiving the user feedback- it was clear where my problems area were in the flow and information users need to navigate through the website. My next steps is to redesign the “next” button and add more information screens to explain the flow best.

Screens to rework

These screen had high mis-click rates as you can see on the heat pattern.

Problem 1: The logo on the top right hand corner was confusing the user- they seemed to want to click it to continue.

Solution: Remove the logo there

Problem 2: Users seemed confused on where to click to make selections

Solution: Add a hover state to the component to make more accessible and easy to understand

Next

SoFar Sounds