Votell

Group travel. Made simple.

votell hero image

Client

Trivago N.V.

Role

UX research, UX/UI design, usability testing, branding, illustrations, social media campaigns and other visuals.

Introduction

Trivago came to us with a problem: a big percentage of users don’t find their ideal hotel on the platform. To match users expectations better, they wanted to experiment ways to gather better data about their users and their behavior in order to predict, filter and present suitable options. Trivago shared their research with us and from that data, some clear starting points emerged.

Millennials, who were going to be the target audience for our product, increasingly book hotels spontaneously, even upon arrival at the destination, and they tend to plan the whole trip with their mobile phones rather than desktop, hence we later on focused on mobile solutions. The inspiration for their holidays comes from Facebook, You Tube and Instagram.

Also, millennials tend to plan trips with groups of friends, and there’s a lot of exchange of information when planning a trip as a group. That exchange can potentially generate a lot of user data. Additionally, the assumption we had is that planning trips as a group can be challenging and we could potentially explore those pain points and work out solutions.

The challenge

How might we design a playful and inspirational solution for collaborative holiday planning that creates new data streams for Trivago?

votell poster

Concepts

The first concepts, generated in a workshop setup, were intended to envision new, experimental ways of collaboratively planning and booking holidays that would engage groups of users in playful interactions to narrow down preferences and hotels. The idea behind it was to use machine learning to analyze the big amount of data generated, and by doing so learn about the user’s preferences and be able to devise a better algorithm for prediction.

First prototypes

After reviewing and narrowing down the first concepts with the client, we put it all together and in a couple of basic prototypes, which we tested internally and iterated upon. Users would be swiping through simple yes or no questions to build a better profiling.

Once the profiling would be narrowed down enough, the app would start showing hotel options that the groups could vote on. The simple and immediate nature of the decision tree seemed to make the selection of options faster.

first prototypes
user interviewing session

User research

To validate our assumptions and learn more about our target audience, we planned a couple of weeks of user research. With the prototype and an interview guide in our hands, we went out in the field and interviewed lots of people to find out their current behavior, struggles and needs when it comes to booking holidays.

We carried out guerrilla testing and interviewing throughout Amsterdam (Foodhallen, Vrije Universiteit and Schipol airport), speaking to about six people or groups per session. We focused mostly on millennials who plan trips with groups of friends or family.

Findings

Our main findings helped us shape our personas and storyboards describing the situation as is. The group planning pattern surfaced again: it turns out that millennials do struggle significantly when booking trips in groups. The most dominant people in the group feel like they have to do all the work and nothing gets started if they don’t take the lead. They also feel the pressure of making everybody happy, since people in the group have different needs. On the other hand, people in the group who are a bit more prone to just follow the flow, feel like they don’t have a say.

Once the planning starts, communication is challenging. People send each other locations and hotels in WhatsApp groups, where things get lost easily and it’s hard to keep track. At the end, compromising often feels forced, and the process takes so long that sometimes the places people looked at are already fully booked by the time a decision is made, and the group needs to start over.

Personas and storyboards

With these consolidated findings, we created personas and storyboards. It seemed that our product, thanks to its playful and simple decision making process and voting system, already was a good starting point for tackling some of the pain points we found, but we also started adjusting the prototype to meet the user needs even more. We were going more and more towards a collaborative planning tool.

personas

Personas and storyboards

With these consolidated findings, we created personas and storyboards. It seemed that our product, thanks to its playful and simple decision making process and voting system, already was a good starting point for tackling some of the pain points we found, but we also started adjusting the prototype to meet the user needs even more. We were going more and more towards a collaborative planning tool.

storyboards

Value proposition

Making group travel planning easier by involving everybody in the research and decision making in an engaging way.

Main flow

At this point the main flow of the app was starting to consolidate: one person can create a trip on the app and invite the rest of the group. Via the app, people can individually narrow down their preferences, look at places and hotels where to stay, then save hotels in a common list.

All participants can view and vote on the hotels in the list. Like dot voting in a workshop, this silent voting here provides a voice for all participants, and a simple tool for everyone to get involved.

wireflows

Usability and iterations

We then went on to iterate on the prototype and interaction, to perfect them based on what was feasible and what could help Trivago gather useful data about their users. Aside from that, we kept testing with people focusing more and more on the usability of each element of the app.

Mapping and prioritizing

Once the main features were consolidated, we mapped the whole thing so that all the features would be logically arranged in the app. We prioritized the features that were feasible and crucial for the MVP.

information architecture trello
information architecture
branding workshop

Branding

As development started, Trivago also decided to dedicate more space to this project and treat it as an independent endeavor. An internal start-up project in a way. That meant for us that we needed to differentiate this product from the Trivago brand. So we started planning more workshops with the team to nail down brand values and move from there. We needed a new name, color palette, typography and so forth.

As we had a solid user research foundation and we knew our users quite well by then, it was natural to base our brand exploration on our personas and their values. We brainstormed and grouped values and keywords. Based on the four groups of values we narrowed down to, we then created mood boards with images that would resonate with our target audience and express those values. We also paid special attention to the colors in those images.

moodboards

As we had a solid user research foundation and we knew our users quite well by then, it was natural to base our brand exploration on our personas and their values. We brainstormed and grouped values and keywords. Based on the four groups of values we narrowed down to, we then created mood boards with images that would resonate with our target audience and express those values. We also paid special attention to the colors in those images.

Eventually we focused on one mood board (which we called “Vivid and Young”), as it seemed to represent the most relevant values for this project. Then we started narrowing down colors, imagery, fonts and visual grammar.

In this process, we also looked at plenty of other brands in the market, in many different industries, to try and position our brand and find inspiration. We particularly focused on apps such as Deliveroo and Duolingo.

votel logo studies

Votell was born

We explored many naming option. Eventually Votell emerged as a preference. The name Votell is a combination of vote, hotel and tell. It represents the value proposition: simplify group holiday planning by allowing groups to vote on hotels. Tell is about the communication and new way of telling each other about preferences. Moreover, this name is memorable, short and easy to pronounce.

branding studies logo
branding studies colors
votel logo animation

Visual language

We also explored many different UI styles based on the mood board. The colors are vivid, strong and contrasting, expressing a young brand. This perception is amplified by the use of dynamic shapes and lines. The same principles apply to typography and imagery.

The illustrations that we created fully represent the brand: they are vibrant, colorful, bold and strong. Based on the newly designed brand, we also created icons, components, backgrounds and animations.

visual style

Final product

The MVP we eventually built is made up of four main sections: hotel finder, group matches, group dashboard and your trips.

Walkthrough

To quickly summarize the main features of the app as users open it for the first time, we put together a walkthrough.

final design group matches

Walkthrough

To quickly summarize the main features of the app as users open it for the first time, we put together a walkthrough.

final design hotel swiper

Hotel finder

In the Hotel finder section, users invited to a trip could individually set their personal preferences and find hotels. At this point, I was still concerned that the swiping interaction would be just a gimmick, but people seemed to love it: narrowing down to one hotel at a time simplifies the choice, it becomes a yes or no question, making it easy also for the less decisive people.

Group matches

In the Group matches section, all the hotels that anyone in the group liked would be collected. Here people could vote, individually and silently. Eventually the hotels with the highest number of votes would be pushed to the top of the list.

final design group matches

Group matches

In the Group matches section, all the hotels that anyone in the group liked would be collected. Here people could vote, individually and silently. Eventually the hotels with the highest number of votes would be pushed to the top of the list.

final design group dashboard

Group dashboard

In the Group dashboard, location, dates and people in the group can be found and edited. Since we were building an MVP, we had to de-scope some interesting features, such as collaborative decision making for dates and location.

Your trips

We also needed a place where users could find all their trips, access them and create a new trip, but also find and edit their profile. This space needed to be hierarchically overarching the trip itself. For that we opted for a navigation drawer.

final design your trips

Your trips

We also needed a place where users could find all their trips, access them and create a new trip, but also find and edit their profile. This space needed to be hierarchically overarching the trip itself. For that we opted for a navigation drawer.

Promoting Votell

To help the product launch in the Netherlands, we also worked on a number of visuals for Facebook and Instagram campaigns, as well as a web landing page for the app.

campaigns and website

Conclusion

The project was successful and Trivago took it internally to keep working on an improved solution. The product as it was when we launched was just an MVP, so some more functionality would be needed to really make use of the full potential of the idea.

Collaborative decision on the date and place itself could be helpful in that sense, as well as the possibility to book directly from the app rather than be redirected to Expedia.

As for the interaction, swiping yes and no for preferences and hotels is only one way of doing it and it can present some issues for some more analytical users, so testing its validity further and working out possible alternatives could be beneficial.

You may also like...