Maria Meireles
Designer

Go Travel

Collect experiences, not boarding tickets

Image alt tag
Go Travel

What is Go Travel?

Go Travel is a travel agency that is currently outside the digital market. 

It wants to not only go online and expand brand awareness but also to become a digital service. Allow customers to book flights, hotels, and vacation packages online. 

Why go online?

  • Be a big name on the travel agency business, especially in Portugal
  • Expand business and increase sales
  • Create loyalty on customers


Target Audience

People that travel on vacation or business

People interested in booking online 


Research

Comparative Assessment

Comparative Assessment was a big part of research because not only does the travel agency wants to go online but also wants to be a known brand in the digital world. The market for booking online is really strong and demands a better understanding of how it works.


Select 4 main booking agencies online and understand:

                Navigation  ·  Functionality ·  Visual Design ·  Usability ·  Contents


Booking Agencies:

  • Airbnb
  • Kayak
  • Booking 
  • Momondo

What to analyze:

  • Main Page
    • What is the focus?
    • Different sections for flights, hotels, and packages?
    • What do users see when they arrive at the main page?
    • Types of visual design and images + Fonts used 
    • Copy mood
    • It's possible to create account/log in?
    • Do they suggest recommendations? 
    • On which segment (flights, hotels, packages) and on what order?
  • Search engine
    • Types of inputs
    • Order of inputs
    • Changes according to sections?
  • Results Page
    • Possible to change the search to change results?
    • Default order
    • Possible to compare results?
    • Copy and images inside cards
    • What can the user do inside a card?
    • Recommendations for relatable products from other sections
  • Filtering and order
    • What filters and order options exist
    • Possible to see results on a map?
  • Product Page
    • Info and order on the page
    • Types of images and who takes them
    • How do the reviews work? Stars, possible to take photo, etc.
  • Booking 
    • Steps necessary 
    • Where can we start the process 
    • Users info, where and what info is necessary
    • Payment options
  • Responsiveness 
  • Languages and Coin


Weaknesses Found

  • Types of search adapted to section but change the site layout
  • Inputs and form inconsistencies
  • Aggregators can't finish booking inside the same website
  • Info lost between sections
  • Not focused on map location
  • Not allowing to search without destiny

Strengths Found

  • Search engine always present 
  • Results cards organized 
  • Allowing different inputs on search 
  • Search adapted to section 
  • Search autocomplete
  • Recommendations connected with the search done by the user
  • See location on a map 
  • Allowing reservation without login or done by another user
  • Share booking and prices
  • Plan entire trip (flight, hotel, etc)


Oportunities

Consistency between sections

Search always present 

Exact location and possible to see on map

Possible to choose payment plan

Compare prices

Search without destiny 

Wizard on the booking form

Simple and clean design + copy

Suggestions on inputs

Recommendations based on search

Personalization of recommendations if log in

Create trips and share with other users



Airtable and Figma were used to organize the work and store content. Click the hyperlinks to see more.

Airtable was the website used to organize the content. Click the hyperlink to see the complete content strategy.

Airtable was the website used to organize the content. Click the hyperlink to see the complete content strategy.

Content Strategy

The content strategy plan was though to be modified at every step of the research. The first features were written after the comparative assessment by taking advantage of the opportunities and strengths found. The weaknesses were also important to keep in mind what not to do when creating a feature. 

The content strategy plan was only finished after the final user flow was done and we were able to close the necessary features to approach the design phase. 


Miro was the website used to do the site map. Click the hyperlink to see the site map.

Miro was the website used to do the site map. Click the hyperlink to see the site map.

Site map

After the first iteration of the content strategy was made, a site map was created. As you can see in the image, a post-it board was used in order to keep the idea that the site map can be changed during the research process and even at the beginning of the design phase. 

The main sections follow the findings from the research: Homepage, Packages, Flights, Hotels, Experiences, Promotions. These pages have the same structure: search, personalized promotions, and recommendations. Only promotions follow a different approach: you can see a list of main promotions and them list of recommendations based on each section. 

The booking process is possible to start on all sections: the user can send items to a shopping cart that is always accessible. It's on the shopping cart that the wizard booking process begins and finalizes with a confirmation. 

A Login section was also added to allow the user to store info and simplify future bookings. It's also possible to save future and past bookings, trips, and favorites. 

Airtable was used to store the questions script and to write a summary of the responses from the interviewees. Zoom was used to do the interviews and record them.

Airtable was used to store the questions script and to write a summary of the responses from the interviewees. Zoom was used to do the interviews and record them.

Interviews

Since the project was done during the COVID19 quarantine was impossible to physically interview people who would fit the target audience of the project. 

It was decided that Zoom would be used, so we needed a more straightforward approach to the script. Simple and easy to answer questions that followed a certain logic and did not demand a lot of explanation from the interviewees.

The set of questions follow this order:
- Demographic
- Tech 
- Shopping  
- Online shopping 
-Travel 
- Online Travel

Travel and online travel were the main set of questions.

The interviews' answers were them organized on a table by questions and them on a matrix by theme and patterns found. 

Personas

After the analyses of the interviews, and from the patterns found, it was possible to create three personas: 
- Travel on vacation: a young adult with friends to explore
- Travel on vacation: adult with the family to relax
- Travel on business: adult, alone

They all faced different challenges.
The first add difficulties splitting the booking bill, liked good filtering, and to know the exact location. 
The second does not like changes and likes to have a lot of good options at reasonable prices. She loves to save ideas. 
The third had issues with billing the company and find a good location. Wants a smart completion of forms. 


We decided to select one persona and create a flow based on it. 
The one selected was António.
Travels on vacation with friends to explore. Usually, he travels two times per year on short holidays and likes to explore. 
Likes robust filtering and quick and easy booking forms (especially on the payment step). Both usually a headache given the fact that travels with friends that want different things and have different ways to pay. 


Persona Generator was used to create the final personas, visible on the above images. Miro was used to explore ideas and organize previous research. Click the link to check the process before the creation of the personas: user stories, proto-personas, interview matrix, and the first idea of the user journey. 

Miro was used to think the story of António.

Miro was used to think the story of António.

User Journey Map

Know that we know António, it was essential to understand what he does, thinks, and feels during the process of using Go Travel to book a hotel and what opportunities we can find. 

First, we started by creating a story that places António in the real world with his friends preparing a trip. He is having lunch with his friends with the purpose to book what they need for the holidays. They have already discussed everything on a group chat. They know the place and dates. They just need to find the right hotel. Go Travel is going to help them. 

It was easier to understand António if we describe his behavior and surroundings (left image). 
Them, we created a User Journey Map (image below) that details the actions, thought, and feelings of António through the story we created. 

Miro was used to create the User Journey Map. A post-it board was important to boost the experimentation of different ideas.

Miro was used to create the User Journey Map. A post-it board was important to boost the experimentation of different ideas.

DESIGN

User Flow

António opens Go Travel, search a specific place and date, filters result, select a hotel, book different rooms, and split the bill between the friends.

Establish user flow steps:

  • Search specific location, date, and guests
  • Filter according to demands from friends
  • Order results 
  • See results on map
  • Know more info about a result 
  • See availability of place 
  • Book different rooms from the same place without leave page
  • Split bill 
  • Store info on account 

Go Travel

Wireframes

After defining the user flow it was necessary to understand navigation and how the interactions would work. Low-level wireframes were created and then tested with 5 different users that have different levels of tech knowledge. 

A mobile-first approach was chosen to design the wireframes. We started by the responsive website on mobile and then we worked on the desktop design. Same flow, different platforms. 


The main pages designed where:

- Main Page and search flow
- Results Page
-Product Page, in this case a hotel
-Book Cart
-Booking Wizard

Most of these pages followed the advantages and opportunities found on competitive assessment. 
But a completely new feature was added to the booking process: a split bill approach to the payment as a payment option


How does the booking process work with this new feature?

In the design of low-level wireframes, we came up with a solution to the split bill problem that António has. 

Step 1: Add Guests
At the beginning of the booking wizard, the user can select guests for each Room/Flight/Package depending on the number of guests available on booking. 

If the guests have accounts on Go Travel you just search by e-mail or name and add them; if the guest does not have a Go Travel account it's possible to enter all needed data on a small form. If this step is ignored the bill is not possible to split and the user needs to pay the full price.

Step 2: Review Bill
After selecting the guests (or not) you can see the resulting bill split by guest and the value each guest needs to pay. 

Step 3: Payment 
The user can select between two options: pay the complete bill on a single payment or split the bill between guests. If the bill is split, each guest will receive an e-mail and a notification on Go Travel will all payment info needed. After the full price is covered, all guests receive confirmation of booking. 


Side Note on Booking:
If a user, imagine António, as the company he works with on his account, he also has the payment option of sending the request of payment to the company account and needs to wait for the company to proceed payment to receive a booking confirmation.


Balsamiq was used to create the low-level wireframes. 

Responsive Mobile Go Travel website designed on Balsamiq.

Responsive Mobile Go Travel website designed on Balsamiq.

Desktop Go Travel website designed on Balsamiq.

Desktop Go Travel website designed on Balsamiq.

Figma was used to gather ideas and organize them into a mood board

Figma was used to gather ideas and organize them into a mood board

Moodboard

During the Research project, some visual ideas were gathered. Components from other websites but mostly photos that helped illustrate our persona's holidays.  

After the wireframes were closed, it was necessary to understand the visual mood board that could translate the Go Travel agency to the digital world. Colors, components, fonts, all gathered as a single board of thoughts. 


Styleguide

After the moodboard was done, we organized the design guidelines into a single styleguide. The idea was to create a design for Go Travel that was simple and clean, without losing the brand colors and fonts. We also added a bit of life and fun to it.

Typography, Colors, UI Elements, Icons, Brand assets and guidelines, Grids, and some essential components were designed to ensure consistency. 

After the styleguide, a Design System was developed on Figma to begin the process of designing the prototype. Material Design guidelines were followed on the creation of all components: anatomy, behavior, theming, and specs but adapted to our styleguide.

Prototypes

The last phase of this study: prototyping. We know António, we know what he is going to do in our Go Travel, we need to turn his interaction with our system into a visual interface that we can later test. Research, wireframes, and design system laid the foundations to start the visual construction of the website. 


What to Design?

We started by designing the responsive mobile website and then we designed the desktop Go Travel website. Mobile-first because don't forget that our António is having lunch with his friends. He would not bring his laptop to the restaurant, he is going to book on the mobile responsive website. 



Prototype Testing

The prototypes were tested with the same 5 users that tested the wireframes and it made us change some of the discoveries from the wireframes testing phase. This testing was focused on interaction, navigation, and the overall usability of the user flow. 

The prototypes were also tested with other users to answer some of the questions and challenges we found, some examples:

  • 5-second test to test the main page 
    • Does the attention go to the search bar? Or to the "search" button?
    • Is the purpose of the main page clear?
    • What colors stand out?

  • A/B Testing to test the search bar
    • What color scheme users like the most?
    • The colors focused the attention on the search button?
    • Are the input types clear?
  • A/B Testing to test the cards organization
    • Does the attention go to the "book" button?
    • The info is clear and the type of info well organized?
    • Does the user understand the number of guests and days available?

    Responsive Mobile. Figma was used to create the Prototypes. Click on the top right corner icon to expand and interact with the prototype.

    Desktop. Figma was used to create the Prototypes. Click on the top right corner icon to expand and interact with the prototype.

    Final Thoughts


    Designing a website for a Travel Agency was fun and demanding, especially when this business sector already has many offers on the market. It was essential to find a feature that would give Go Travel's users a unique experience. 

    The process was different from my usual work environment since it was developed after hours with another UX Designer. Our goal was to learn and experiment, focused on the process and what we could take from it to implement on our work.
    Following this discovery mindset, we used new tools and research methods that we have never used before.
    We found out that both had different weaknesses and strengths, which was very useful. In this project, we had the opportunity to use one strength to improve the other weak point. 

    So I would like to finish by thanking Júlia Russo for being an amazing partner in design and for teaching me so much.