How we pitched the vision of our new trivago app

A story how a team ideated and conceptualised a fresh product inside a company.

Artboard Copy copyArtboard Copy copy

I’m a product designer working for trivago , yes the hotel metasearch with those funny commercials, and would like to share some insights into one of our biggest projects we tackled in the last period. Well, from a product design perspective at least.

Pitching

I’m lucky enough to work in a company that appreciates initiatives to evolve the product, and not just on paper but we actually have a process in place for that. At that time it was called “pitching” — a trivago sort of version of sales client pitch. You create a prototype/flow/sketch whatever, pitch it to management and your colleagues with hypothetical improvements in business metrics and if you manage to create enough excitement and gather a team around your “pitch”, you’re good to go for a proper project. Check more regarding this process in our blog post.
 One of these projects , you guessed it, redesign the trivago app.

736C3C6B-3CCB-44B6-BFB5-9F62D194FC7E copy736C3C6B-3CCB-44B6-BFB5-9F62D194FC7E copy

Amazing view from one of our offices. Palma de Mallorca

Changes

This new mechanism of proposing ideas coincided with the time the app’s team started to have more and more concerns regarding the state of the product: it seemed we were always catching up on the mobile web features, design and core function. At one point we asked ourselves:

What’s the point in downloading the app from the store when you can do the same thing in the browser ?!

So we decided to change that. All of us in the team: EngineersProduct OwnersDesignersResearchers and QA.

Following step was to propose our idea of the new app in a way that we:

  • Follow trivago’s business model.
  • Blend seamlessly with other trivago products and mediums.
  •  Bring additional value to travellers. Remember the why download the app thingy?

 

And it was challenging I can tell you that, but super exciting as it seemed each of us took the role of a startup founder. The team came up with the following vision statementfor the new app:

 

Empower users to discover and book their ideal hotels by providing a simple, innovative, and emotionally-engaging mobile experience.

Together

Then followed workshops, brainstorming sessions, design sprints all tailored to shape the new app proposal with the above statement in mind. 
We discussed features, flows and most importantly what are the traveller’s problems we want to solve as a trivago app. To increase efficiency we created “feature teams” (each had at least one designer, QA and engineer from Android and iOS) that worked in parallel.

Enlight18 copy 2Enlight18 copy 2

Ideations, sketches and wireframes during our workshops and design sprints

My main achievement as a product designer was to guide discussions and proposals into a more cohesive product because often “feature teams” got too much into details about a specific app area (map, filtering, inspiration etc.) and there was a need for somebody to “glue” and prioritise all the features into a user journey that makes sense and works seamlessly .

More than that I had to gather all the ideas, sketches and mockups and create the realistic high-fidelity prototype, the culmination of team’s effort put into a presentation with a touch of a new visual direction. The new app pitch.

 

I’m going to walk you through the most interesting parts and try to keep description as short as possible

 

First Screen Inspiration

Added inspirational content area to help travellers without a specific destination in mind.

ezgif.com-resizeezgif.com-resize

Profile Preferences 

Define your ideal hotel and destination as parameters in your profile.

ezgif.com-resize-2ezgif.com-resize-2

Map 

Custom map UI. Added basic attraction section for travellers that are not very familiar with things to do around the hotel they want to book.

ezgif.com-resize-3ezgif.com-resize-3

Search and Results 

Bolder search results and a more inspirational hotel list.

ezgif.com-resize-4ezgif.com-resize-4

Filters 

Full screen filters for increased usability and more content. Left screen is old app and on the right the vision.

filtersfilters

Hotel Details 

A more linear , magazine style design with section overview for most basic info first and possibility to navigate into a more detailed view.

ezgif.com-resize-5ezgif.com-resize-5

Deals

Additional deals list screen divided by room type. Left screen is old app and on the right the vision.

dealsdeals

In Conclusion

Everybody liked it. We designed and developed the new trivago app for iOS and Android and took this vision as a basis

The shipped product and design went through significant changes because of: technical limitations, available content, time constraints and further refinement based on user research. Nonetheless I found important to share how it all started and in some aspectcs still our product vision for the future. 

Here is a comparison excample of the old app, vision and new app in the store: 

comparecompare

It was one of the most exciting times I’ve spent in the the company. Felt like working in new startup even if trivago is a well established company already. Did I mention we spent only 1 month to do all this? 

If you liked this article and curious about how we designed the final product that is shipped make sure to follow me on Medium or Twitter. I’ll definitely delight you soon with more insights from the trivago apps kitchen. 

Download the trivago app from App Store for iOS and Google Play for Android.

 

Thanks to the amazing team that made all this happen. Special thanks to my design buddies: Georg BednorzRichard Child and Bruce Lui

 

[unex_ce_button id="content_iq28d0tcb" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="#1a1919" button_padding="10px 48px 10px 48px" button_border_width="1px" button_border_color="#1a1919" button_border_radius="4px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#888888" button_border_hover_color="#888888" button_link="http://www.ostirbu.com/?page_id=147" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]Back To Home[/ce_button]