Restaurant reservation experience
TripAdvisor co-op
July-August 2019
Two Months
Background
TripAdvisor's restaurant search has two main monetisation strategies – 1) through in-app ads and 2) through its paid premium memberships for restaurant owners. A key metric that measures a restaurant's footfall is called 'cover table metric'. It covers a diverse set of measurements including engagement with the restaurant page as well as making an actual reservation.
My brief for this project was to improve the restaurant table reservation experience for end-users, by helping them navigate to the restaurants that suit their interests and budget.
Restaurant owners already have an option to offer discounts for reserving tables at certain time-slots. Thus, I explored how the design of these discount-added table reservation buttons might influence a user's decision to book a table at a restaurant.
In addition, I collaborated with a UX copywriter to improve the consistency and regional localisation in the UX copy for table reservation across the web and mobile platforms.
Before
After
Final design
Design explorations
.jpg)
.jpg)
Explorations with different button shapes and styles to indicate the discounts on the timeslots.
Explorations in form and color
Different variants of buttons in different brand colors on the list page on web.
Process
I iterated the design options based on the competitor benchmarking and the prior knowledge of team members who have conducted usability studies on restaurant table booking scenarios. Finally, the design options were evaluated for their "click time" and "success rate" on the Usability hub.
In order to keep the consistency with overall Tripadvisor's app, we continued to work with the green-yellow color theme and tested the designs for shape and information layouts.
Unfortunately, the details of the test can not be disclosed due to an NDA.
Here are the three variants of the buttons we finally evaluated –
Variant A
Variant B
Variant C
Three variants of the buttons which were tested in Usability hub.
Results
We conducted the test with 250 participants on Usability Hub. Variant B was the most preferred design for the users to indicate discounts on a time slot. The users who chose variant B said that the design "popped out", looked like a "temporary badge", and appeared "professional", and thus, got their attention.
From a visual design perspective, this option was also flexible to adapt to geo-local changes. For instance, adding the word "off" (e.g., -10% off), when translated to other languages (e.g. "off" translates to "de descunto" in Spanish) was challenging to accommodate in the small space.
The Variant B was further taken to a 20% slice test for two weeks on the live Android app. The test resulted in a 3.2% increase in bookings on Android. After a successful test run, the design was rolled out to the 100% traffic on Android platform. It was my first design work at Tripadvisor, which made it to the live app.
The new design resulted in a 3.2% increase in the restaurant reservation-booking on the Android app.
UX copy consistency and cultural context
In addition to the visual experience, I also initiated an effort to improve the UX copy for the reservation experience across platforms. I observed that we use a different UX copy for the same user action across the product.
Example of how the UX copy within the product was inconsistent.
I also observed that there two main UX copy themes – "Book a table" and "Reserve a table" to refer to the restaurant table booking experience. I further explored Google trends for the different search terms used for table booking and observed that the term "Reserve" and "Book" search terms are comparable in US and Canada while the term "Book" is more popular in the British Commonwealth countries.
This initiative resulted in a UX copy spec for the web, Android and iOS apps for different geolocations.
I audited the UX copy for the restaurant booking experience for consistency and localization.
How different competitors use the UX copy for their reservation experience.
Google search trends comparing US and Canada with UK, India, and Australia.
Takeaways
This was my first major (and end-to-end) project at TripAdvisor as a co-op -
-
As a designer, it is important to strike a reasonable balance between user's needs and the organisation's business goals. For instance, in this case study, the design of the discount button while improving the user experience, also helped meet business goals.
-
Despite being seemingly trivial as the design of a button, which occupies a small part of the UI, it was worthwhile to prototype multiple design iterations and get regular feedback from team members across the board.
-
It is valuable to seek answers from folks with prior knowledge on the subject matter. In this case study, using the prior experience of the team members as a secondary research source not only saved time but also helped eliminate design iterations that would not have worked.
-
Sharing regular work in progress can help one get feedback at the early stages. I would often stick the paper prototypes and designs on the walls so that our team could take a look, ask me questions, and discuss the thought process I was following.
Design responsibilities:
UX design, UI design, Design systems, Usability testing, Slice testing
Tools used:
Sketching on pen & paper, Sketch, Adobe illustrator, Usability Hub