A new, unified checkout experience that supports both the hotel and restaurant sides of the business. This new checkout experience will be a key component of the new Tripadvisor Management Center, improving customer experience and driving business growth by providing a seamless and intuitive checkout process.
[FYI: Those pages are not public-facing and only accessable by verified business owners on Tripadvisor. Pricing shown in design is only for demo purpose and is not reflecting real life cost of the products.]
Goals:
The project’s primary objective was to establish a seamless and unified checkout experience for the new Management Center (MC). This involved creating a versatile framework capable of accommodating diverse checkout scenarios, including a single property purchasing one product, a single property purchasing multiple products, and multiple properties purchasing one or more products for each of them.
Context:
In the legacy B2B management center, two distinct checkout flows existed for hotel and restaurant owners. Developed by separate teams with disparate requirements, these experiences exhibited divergent UX and UI designs along with unique features. Addressing this challenge necessitated devising a solution that could harmoniously cater to both business facets.
Challenges:
- The project was tough because we needed to combine two different checkout experiences into one that works for both Hotels and Restaurants.
- The new checkout flow needed to let users buy any number of products for any number of properties, making the design increasingly complex.
- There are four types of savings and discounts, but they often only apply to some products, not all. Figuring out how to explain this to users was really hard.
What did I do?
Work Process
01
Contextual Study
A thorough analysis encompassing diverse checkout flows, Baymard evaluations, and existing design.
02
High-Level Flow
Establishing the fundamental flow structure, entry points, and step count; securing stakeholder consensus on the overarching flow and design direction.
03
Rapid UX/UI Iteration
An intensive phase involving the creation of numerous design compositions to explore diverse UX and UI possibilities. Iterations were fueled by continuous feedback.
04
User Testing
Figma prototypes were created and tested separately with hotel owners and restaurant owners.
05
Feedback-Based Iteration
Refinement of design details through multiple iterations to achieve a finely tuned final design for handoff to engineering.
Highlights
2-in-1
Successful consolidation of two complex checkout flows into a singular, user-friendly solution.
Complexity simplified
Introduction of a straightforward mechanism to effortlessly add, remove, and manage multiple locations and products for each property within a single cart.
Information clarity
Empowerment of users through clear, digestible information and intuitive features, fostering a sense of control and informed decision-making throughout the experience.