Travelly: the design thinking process from UX to UI. Cover image

UX/UI Case Study: Travelly

The solution for those who want to organize group trips and not die trying.

Carlos Casas
Bootcamp

--

You have a few days off and your biggest dream is to organize a trip with your group of lifelong friends. You know it won’t be an easy task, but you are still willing to try (determined people rock). In the beginning, everything is good intentions and excitement, but as the days go by, problems arise: people don’t confirm and prices go up, you can’t agree on almost anything… in the end, the trip doesn’t take place and you stop talking to each other for a week. Enough is enough!

Tavelly was created in response to this problem.

My role?: product Designer.

The team?: single-person project

How long?: 10 days (November 2021)

UX Tools: surveys, interviews, lean UX, empathy map, user persona, user journey, user scenario, user flow, moscow, card sorting, sitemap, crazy 8, low-fi & mid-fi prototype, concept testing.

UI Tools: moodboard, desirability testing, stile tile, style guide, high-fi prototype.

We started researching the subject.

Research stage: Let’s get down to work

First of all, it was essential to verify if people had this problem when planning group trips, so we launched our surveys and began to conduct face-to-face and telephone interviews to learn about the habits of our public when organizing a trip and to determine what problems they usually have. What did we get? To begin with, we realized that this was a sensitive topic for most people, as many had had some bad experiences. In numbers, this translates into: 80% of the respondents regularly organize group trips, of which 72% used to have problems during the organization process.

These were the results:

  • 82% highlighted that they couldn’t agree on dates when organizing a trip with their group.
  • 70% said that the organization process took too long, which resulted in the trip being suspended.
  • 68% stated that they used to have communication problems within the group and a lot of information was lost in Whatsapp chats.

With all this data on the table, we confirmed our suspicions about the problem and moved on to the next stage.

Problem definition

With all the information we got during the research it was time to organize the insights and determine what problems we were going to tackle to land our MVP. To do this, we first used tools such as the lean UX, the affinity diagram and the empathy map.

With this, we reached our user persona and, thanks to the user journey, we were able to understand perfectly what their problems would be during the organization of this kind of trip.

Mónica. User persona tool
Mónica. User persona

We determine 2 main problems to be tackled at first:

  • The difficulty of our users to reach a point of understanding with their group on different aspects of the trip.
  • The lack of collaboration of certain members of the group during the organization of the trip (there’s always someone who gets away!).

In addition, a thorough competitive analysis of the current market led us to understand that these problems were not yet being solved, so we began to let our imagination run wild to find a solution. It’s time to get creative!

Ideation: we start to give answers

With the problem defined, we conducted brainstorming sessions to land all the ideas that had emerged so far. It was also time to use tools to organize the solutions such as moscow, sitemaps, card sorting to determine the structure of our application and, finally, we defined the user flow to get an idea of how it would be a usual journey through our app.

After this, we continue with the crazy-eight tool to define the most problematic wireframes that the app will contain. With this, we concretize the structure of all the components in an accessible and simple way for the user.

What’s the solution? Keep scrolling…

The solution: Travelly

We finally get to the solution we proposed. Let me tell you:

Travelly is a collaborative travel planning app that allows each of the members of a trip to determine their budget, the dates they are available and start a vote whenever they need to make a change, such as destination. Oh, I forgot, do you remember those dear friends who forget everything when it comes to organizing? Well, there’s a prize for them, I’ll tell you about it below. Let’s see how it works:

From the home screen, the user will be able to create a new trip, see the activity of others that are already being planned, such as confirmations or requests for changes from other members of the group, consult the information of those already confirmed and some suggestions of plans provided by the app.

In our user flow, we would first create a new trip. To do this, you would have to enter your fellow adventurers, either from the agenda, manually or by reusing a previous group. Then we would add the destination, the dates our user can travel, his budget and, finally, we would set a deadline for the rest of the participants to confirm. In this last screen of the process, each member will be able to choose a punishment for the traveler who doesn’t confirm within the stipulated time. We will see below how this system works.

The other members would also fill in these screens with the dates they are available, their budget and other necessary information for the trip.

Explanation of the 6 steps to follow to create a trip with Travelly
Process of creation of a trip

How do we make sure that all members of our travel group participate in the organization? With our punishment roulette (evil laughter). If any member of the group misses the date, our roulette will determine what punishment is due, whether it’s inviting the rest of the group for a round of beers, cleaning the apartment on the next trip or cooking for everyone.

Punishment roulette screens in the app
Roulette system screens

What if a group member doesn’t agree with a travel parameter such as the destination? For these situations, Travelly incorporates a voting system through which all members will decide between the options presented. Easy, fast and drama-free.

Travelly voting system screens for requesting changes to a trip
Voting system

Want to take a look at what the usual full user flow through the app would look like? Here is the video:

Travelly Hi-Fi prototype

UI Design System

Here are some of the tools we use to define the UI of the project to keep the consistency in each screen, based on the look&feel of the brand:

Style Tile (left) | Aligment, shadows, consistency, spacing (right)

Landing page

For all users accessing through a web device, they will have a landing page, where they can easily understand how to use the app. This way, we can inform the user of what the product will be when it is released.

Travelly landingpage with the main features of the app
Landing page Travelly

Next Steps: what now?

During the ideation process, we came up with solutions that would continue improving the website user experience, but we had to leave them for later, due to the limited time we had for the project. Do you want to know what we will implement in the future? We’ll tell you:

  • Booking from the app. Once the trip is organized, users will be able to book directly from Travelly, without wasting time searching on other platforms, which could lead to new problems.
  • Information about your routes. Travelly will also incorporate a travel information section, with comments from locals.
  • Comparison of budgets. Finally, the app will include an automatic quote comparison system whenever the user needs it. In this way, users will be able to easily choose one plan or another when the budget is decisive.

What did we learned? Key points of the project

Throughout the development of the project we have had to face several difficulties, but we can highlight one in particular during the problem definition stage: it was difficult for us to focus on solvable problems in a project of only 2 weeks, taking into account that it is it would be an MVP. During a feedback session with our colleagues, we realized that we were trying to cover too much, so we re-applied key tools such as moscow to find out what the priorities would be and thus we managed to get out of this stop and define the product.

And that’s all! Thank you very much for reading it and if you have any questions, do not hesitate to contact me: carloscasasruiz@gmail.com :)

Travelly isometric iPhone mockup

--

--

Carlos Casas
Bootcamp

Product designer with an industrial design background | Passionate about people and technology | Born to create 👨‍💻 | Ironhacker