Deals on trivago
Role: Senior Product Designer
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.
As highlighted on the graph bellow trivago offers 2 phases in terms of deal comparison:
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.
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.
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).
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.
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.
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.
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)
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).
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:
Things that users considered needed improvement:
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.
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.
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.
© Oleg Stirbu, 2019