Deals on trivago

Deals on trivago Project Cover

Role: Senior Product Designer
Year: 2019

I joined the dedicated "deals" web team in 2019 as a product designer. It's a small and cross-functional group (I was the only designer) with a clear and important focus—make trivago as the place to go for best accommodation prices and expose deals in a meaningful way. It's really important for the company.

The best thing about working on this initiative was the variety of challenges and problems to solve: from UI iterations to crafting a long term vision after various design sprints. The small size of the team allowed us to move fast and take greater responsibility for our output.

Challenge

As highlighted on the graph bellow trivago offers 2 phases in terms of deal comparison:

  • ∙  Across accommodations. Evaluate the price for a given destination. Phase where travellers check what a good deal is and trade-offs for a specific accommodation.
  • ∙  Within an accommodation. People compare prices from different advertisers for a given accommodation. Evaluate rates, room type and amenities included or missing.

Both stages had issues in regards to providing a meaningful exposure of inventory and reflecting user's mental model.  Although the target user group was price sensitive the benefits were expanded to all types of travellers.

Our top line funnel for using the trivago product
Our top line funnel for using the trivago product

Goals

  • ∙  Expose clearly what price range should be expected and what is a good deal for a destination.
  • ∙ Expose information and deals in a more digestible way from different advertisers (price, room, amenities etc.).

Deals Flagging

One of the first and most impactful task was to define a system for deal and special rates flagging.

I decided to make an audit of all the UI elements in our accommodation card related to rate marking. This helped me have a better idea of various contexts and A/B testing scenarios but also create and test the UI system.

UI elements audit that are related to rates in our accommodation card
UI elements audit that are related to rates in our accommodation card

Next I developed a consistent design that communicates what deals stand out without making the whole website feel like a discount grocery store. The dedicated space was needed for cases with multiple tags and long strings for description and translations (opted to abandon the on-hover tooltip pattern because obvious always wins).

Flag module on card and flagging UI system
Flag module on card and flagging UI system

This is just the visual part, next we defined the logic where only selected accommodations have deals. If everything is a discount—it's just cognitive and visual noise.
The copy was written in collaboration with our UX copywriter.

Deals and special rates in context
Deals and special rates in context

Best and 
Cheapest Deal

The majority of our users are looking for the best deal—good value for money. Whereas a significant percentage want also the cheapest possible deal. Currently our main CTA best deal (green View Deal button) doesn't explain why or provide context. The cheapest is hidden under all deals.

One of the possible solutions the team came up with in our design sprints was to clearly expose both deals in our “accommodation card”. I prepared a concept and prototype for user research (stage that I will describe later).

Note: The new design assumes the removal of "other deals" section that currently doesn't have any meaningful logic and primarily acts as indicator of our business model—metasearch.

Accommodation card with old design vs new “best / cheapest” concept
Accommodation card with old design vs new “best / cheapest” concept

Design Sprints

In parallel with working on improving price comparison on results list level we needed a solid concept for comparing rates within accommodations—once you decided which hotel or apartment to book.

For this we organised design sprints with the core team and "experts" from other department  that we knew have valuable insights in terms of tech, content and product development.

"Deals" team with stakeholders working on a concept during a design sprint
"Deals" team with stakeholders working on a concept during a design sprint

The main concept from the sprint derived from the idea that everything should revolve around rooms (after all this is what you book and not the hotel lobby). Plus a better visualisation of what's included in the prices (here we kept the same recommended vs cheapest logic)

Image of the concept as an outcome of the "Deals” team design sprint
Image of the concept as an outcome of the "Deals” team design sprint

Prototype and User Research

Because of the specific interaction design pattern that still suits best our product needs at trivago—the accordion style slide-out to expose additional content (we don't have a dedicated accommodation details page yet). I felt like the prototype should respect this essential aspect and thus have same fidelity and feel.

The only options for me in terms of tools to use were: vanilla css/html or Webflow. I opted for the last mainly for the following advantages: speed, quick iteration visually and hosting for delivery to participants (even for the free version). The modular aspect of Webflow (you simply add or remove sections on same screen) had a huge benefit in terms of productivity. Invison for example would have required more than 50 screens and with rudimentary transitions (after all you work with linked images).

High fidelity Weblfow prototype for new deals comparison

User Research Learnings

The goal of the research was to understand if the concept in deals within accommodation helps users to determine the best deal in a more informed manner. In-house user test with 10 participants.

All users completed the task scenario of finding the cheapest deal matching a certain criteria (specify attributes, room type and advertiser).

The biggest strengths of the new concepts were:

  • ∙  Highlighting the cheapest deal.
  • ∙  Extended filtering options
  • ∙  Table for included and not included attributes

Things that users considered needed improvement:

  • ∙  Information regarding the room at first glance was missing (room type, bed type etc) as it was provided only on hover
  • ∙  Scanning the table by price was difficult in ascending order due to introduction of 2 deals per room (cheapest and best value)

Based on the learnings I iterated and created another concept that provided less cognitive load but keep the same amount of extra features and information. The concept will be A/B tested to gather quantitative insights this time.

Concept for new deals comparison post user research
Concept for new deals comparison post user research

Business Metrics

As the goal of the initiative was tackled from multiple angles, we also introduced and A/B tested these redesigns independently.    

Without revealing precise numbers because of proprietary information, all concepts described in this case study had positive impact on trivago's main business KPIs.

The team has already in the pipeline iterations designed by me to possibly improve the experience even more.

Variations of accommodation card
Variations of accommodation card

Conclusion

I’m a strong believer in using the right tool for the job (like the Webflow example) and definitely also using the right approach and process to solve a specific problem.

We tackled this initiative this way because of the scope and sensitivity but also to respect the mentality of trivago as a company when handling these crucial product changes—incremental and small quantifiable iterations.  We didn’t build a game changing feature or implemented a big redesign and sometimes this is the right path.  

Looking back I would have taken this even further and made use of our A/B/n testing capabilities to create more granular variations and study what design changes were most impactful (alignment, size, colour etc.). This would’ve allowed us to make more informed iterations at that time but also for the future.