Flymingo. Travel App.

Flymingo is a case of study for a Travel App. I’ve designed it for UX UI Bootcamp at Ironhack. Here you can see how UX UI research has been done as well as UI design. We only had 1 week to do the research, the design and present the project by Zoom.

Category:
UX Research, UI Design, Visual Design
Time:
1 week
Tools:
Figma, Illustrator, Indesign, Photoshop, Mural
Team:
Susana Real

The Challange

So we were told to develop an MVP Travel App. I had a week to complete this assignment. In this project we have a common brief:

Briefing

We are planning to launch a new product for booking travel. We intend to generate revenue based on fees associated with the booking of flights. We want to start by launching a minimum viable product, but considering this is a competitive market to enter, we probably cannot compete solely on price — instead we need you to help us add value to the experience so that users may start adopting our platform.

For this project, we have as well a 3 proto-personas. This new app goal will be to provide a product that is useful to all of these personas, but I had to make a decision about who will serve as “primary persona”.

What a long journey in a week!

The Research

I started my research by conducting 7 interviews to be able to find pain points. My target was people between 25–35 years old, low-cost travellers, who travel twice a year at least. Also, I sent a survey to know more about how people usually do to get a flight. To find the right questions I used Lean Canva board for surveys

Main goal: The user relation with these travel apps. How they use them?

I gathered a lot of information and I clustered in groups using the affinity map. So, some interesting findings were:

  • 6/7 People who flight in low-cost companies feel cheated
  • 7/7 are afraid of upraising prices
  • 60 % of people buy flights with 2 or more months of anticipation
  • 62% Mainly buy flights for holidays
  • 70% Knows the destination before buying the flight
  • 60% Spend between 2–3h to find a buy a flight
  • 70% find confusing the prices during the process
  • 75% Expect from a travel app to be easy and transparent.

Noticeable Quote from Users:

I always have to compare at least 3 different platforms to compare prices and go to the final process to know the real price. It takes me a lot of time, and it freaks me out.

Pain Points

Knowing this information I defined the main pain points where I focused to design the new App.

Lean Canva Survey

Redifining the User Persona

Although we started with our proto-persona, I defined the final primary user persona with all the data gathered.

Image for post

 

User persona definition

Sofia, has recently joined a company as a consultant. She likes traveling, learns languages, and discover different cultures. She always travels alone by low-cost flights, in spite of she usually feels cheated. Sometimes she feels scared and cannot go to all the places she would like because it’s not safe.

To continue my research, I started to look at a few competitors or similar platforms, doing some benchmarking, analysing UI, UX, User flow, and key features.

Benchmarking

I selected 8 Apps related to finding and buying flights. Between these apps there are ones who operate as search engines, and others like Vueling are directly the company’s App.

Travel App Benchmarking

 

Benchmarking from Booking Apps

 

Summarizing the benchmarking a get this conclusion:

  • Most of them offer more than only flights, like hotel or car renting
  • They ask for login after looking for a flight
  • 5/8 has to Go anywhere in their features
  • Only two have prices alerts and price prediction
  • 5/8 has a social media log in
  • 4/8 can finish the check out in the same app
  • 5/8 has the “Explore” option (Travels without knowing destination yet)
 

Heuristic Evaluation

I use some heuristic evaluation from hopper, kayak and Skyscanner to be able to identify usability problems in their App’s.

In this case, I identified more usability errors on Hopper, like error prevention or flexibility and efficiency of use.

Let’s start with the solutions

Having all this information I went through value proposition to be able to start the definition process(Following double diamond process).

It was important to keep a simple process that could be trusted. So I decided to focus on a simple buying process, where users can be focus on one task at a time.

Well, but how I will reach business goals?

Business goals in the briefing were generating revenues from flights purchases, so I defined four main ways to increase business values and achieve the revenues goals:

After evaluating several apps and identifying pain points in users that I found out through my research I define the problem statement:

People who book flights online are afraid to be cheatedupraising prices and make mistakes at the moment of booking because the process is so complex

Well, it’s time to define!

Having in mind the user persona, the problem statement, business goals, and value proposition I started the defining process.

Branding

Let’s go on with the brand!. Flymingo it’s for young users, a charismatic brand that can be trusted, that feels close and funny, without falling into childishness. 

I’ve to tell that designing the brand it wasn’t the main exercise in this project, but It was important to be able to translate these brand concepts into the App, so I design a quick logo, but I spend more time on deciding and testing the colour palette and the right font for the App.

Designing for emotion and UX Writing

For this project, I tried to get the attention of the user not only through visual, also trying to emphasize with the user with illustrations and UX writing. Using a more friendly language and always clear instructions.

Flow definition and feature prioritization

In the first place, I decided to define the flow. After doing tests and iterating It has been modified to improve user experience.

I did feature prioritization with Impact-Effort Analysis and number of people-frequency matrix. These methods helps me to focus on designing the important features.

User testing & Iterations

So I went through 4 iterations to get the final result form Lo-fi, mid-fid to hi-fid prototypes.

So I went through 4 iterations to get the final result form Lo-fi, mid-fid to hi-fid prototypes.

Image for post

 

First low-fi prototype

First iteration findings:

  • People were asking about putting automatically their data because that process takes time.
  • It was important for them depending on the travel be able to add a bag easily
  • Divided selection page on two outbound/return to have more flexibility

So, I went to the first iteration and added:

  • Missing screens: log-in
  • Divided Extra page focus on the most important step for my user persona: Added a bag selection screen
  • I split the selection flight process as well to have more flexibility on selecting flights

Image for post

Image for post

 

Flight selection process splitted

After adding this new screens I tested again with 3 different people and I find out the next pain points.

Second iteration findings:

They felt it was a long process.

Flow improved:

  • I removed two steps by avoiding selecting and confirm the selection. The selection would be done only on the summary screen.

Image for post

Third iteration findings:

Some information was so little that it was hard to read and feels a bit confusing for such much information in every box.

They were doubting when selecting flights to know if it was outbound/return

Improvements:

  • Adding status visibility
  • Flight data visualization improved
  • Error prevention

Image for post

 

Flight data visualization improved

Image for post

 

Error prevention

Fourth iteration findings:

Buttons were too smalls and were not adapted to standard. People feel confused with block price option

Improvements:

  • Text and button sizes improved
  • Copy improved
  • Empty state added

Image for post

 

Empty state for searches without results

Image for post

 

Adapting buttons to accessibility standards sizes

Looking for the best palette

Image for post

 

Different palettes options

I tried many palettes that could work for this app, trying to find the balance between young and fun and thrustworth. So, flamingo pink was a risky decision, but I bet for being different from other brands to be more pregnant and combined with dark violet to have contrast and an active colour like green who also is associated with validation, so could connote trust in the main trigger actions.

The solution

So before let you see the app, I will put you in context with the scenario:

So, Sofia it’s planning to travel to Milan with 3 months in advance, looking for the best price. She is planning to travel alone but if there is a good offer maybe her partner will join her.

 

In this final version, you can see how flow is easy going, avoiding non-necessary steps, and trustworthy. It shows in every moment the final prices and all the information it’s clear.

It only asks for login when it could be interesting for the user and gives him the option to continue as a guest as well.

The brand voice tone it’s appreciated in every screen and it has some sense in some points without losing trust.

It has an additional value at the end giving users a gift like the destination Guide to fidelizing the customer.

Price alerts keep users attention about their flight avoiding leaks to other apps.

Although the app was thought to be developed for Android users in the first place, I designed having in mind iOS as well. In that way, the app wouldn’t need to suffer big changes.

I adopted some modifications to improve the experience for iOS users. That’s are some examples where you can see some adaptions.

  • Deleting hamburger menu and adding more options on the bottom navigation bar.
  • Action saving button on the top bar
  • A cleanest form
  • iOS tab format

 

What I would like to do next?

  • Personal Travels suggestions
  • Automatic Checkout
  • Membership
  • Corporate social responsibility for support flamingos habitats

 

My Learnings

  1. During the process, I faced making tough decisions to align business with customer goals.
  2. How to prioritize features
  3. Learning how to use Figma animations