CheapOair. Redesign flight booking flow for mobile apps

Client: CheapOair
Role: Product designer
Platforms: iOS and Android
Year: 2017

Overview

CheapOair is one of the most popular flight booking websites in the US. They were well known for the lowest price and customer support. As the product is too popular, management doesn’t want to upgrade UX much. For many years they were just fixing small parts in UI and added new features. With a team of PM, Mobile Tech Lead and me we decided to create a new app concept based on business requirements, user’s feedback and competitors research. I compare this project with automotive concepts when a company creates some concept cars and defines company vision for years and then takes some parts of the concept and implement in serial production.

The problem

The main problem that we were trying to solve is to cut unnecessary booking steps and improve the overall user experience. Apps worked very buggy, due to bad code quality. Mobile devs found about 200 colors only in one platform. So, it was a good time for refactoring the code as well.

Here is a list of problems which we faced:

  • No onboarding for new users
  • Not useful home page
  • Overwhelmed navigation
  • Inconsistent UI

Competitor research

After we framed a problem, it’s time to see how competitors solve the same problems. Our competitors are top companies in booking flight, hotel and cars industries like Expedia, Skyscanner, Kayak, etc. But in the current project, I focused only on flight booking flow and tried to find the best user experience on the market.

Kayak

Fare aggregator and travel metasearch engine operated by Booking Holdings. Mostly focused on hotels.

Good:

  • Brand consistency
  • Home page with search widget
  • Flight card structure in different use cases
  • Filters where you can choose flexible dates
  • Bottom navigation
  • Price alerts

Skyscanner

Travel fare aggregator website and travel metasearch engine. Since November 2016 the website has been owned by Ctrip, the largest travel company in China. The site is available in over 30 languages and is used by 60 million people per month. Built own design system called Backpack which helps them to create consistent UI across platforms.

Good:

  • Home page with recently viewed, price alerts and explore features
  • The first page starts with shortcuts: favorite flights, recent search, upcoming flights
  • Bottom navigation
  • Edit search on the same page
  • Flight details
  • Price alerts

Expedia

Expedia Group is an American global travel technology company. Its websites, which primarily travel fare aggregators and travel metasearch engines, include CarRentals.com, CheapTickets, Expedia.com, HomeAway, Hotels.com, Hotwire.com, Orbitz, Travelocity, Trivago, and Venere.com.

Good:

  • Popular destinations on home page
  • Bottom navigation
  • Select departure and arrival time range in filters
  • Flight details

Kiwi

Kiwi.com (previously known as skypicker.com) is a Czech online travel agency. Kiwi.com provides a fare aggregator, metasearch engine and booking for airline tickets. Its unique feature is “virtual interlining” — selling flight itineraries combining normally non-cooperating airlines, while Kiwi.com provides guarantees covering missed connections.

Good:

  • Bottom navigation
  • Combined search
  • Preview flight details on search results
  • Adjust dates on search results

Inspiration

Competitive research help to understand what already users love and use, but when it comes to design something new it’s good to find some inspiration from other designers, which make solutions without any technical and business restrictions. One of my favorite flight booking concert from Fantasy by Gleb Kuznetsov. Also, Vitaly Rubtsov has a great case study.

User flows and wireframes

To understand how an app currently works I created user flows. I’m trying to cut unnecessary steps and simplify booking flow. Summarize all problems, competitive research and inspiration I prepared detailed wireframes. I working closely with Product manager and Tech Lead to reserve quick feedback and discuss new ideas.

Lo-Fi prototyping

Prototype interactions on the wireframe stage helped me test my ideas without visual dependence. It's better than just static screens and helps to see how users could interact app.

Visual design

After approving wireframes, I moved to visual design. We don’t have any design system, so I followed brand guidelines to be consistent with the website.

Android version
iOS version

Outcome

  • Approved concept by main stakeholders and start development
  • Added onboarding screens
  • Optimized cards
  • Optimized payment form
  • Removed step back to edit search
  • Removed home page
  • Added popular destination, saved the search and flight

Check it on live iOS or Android.

What I’ve learned

Together everyone achieves more

Redesigning mobile app which is used by millions of people is hard. Especially hard to approve your new concept with stakeholders located on another continent (our RnD office was in Ukraine, Kiev, and HQ in New York). When you work in a small motivated team all tasks are achievable. Thanks to Tech lead Oleksii Khioro and PM Andrey Skryabin, this project was supported and pushed to stakeholders. Currently, the concept is in a development stage and the modules like onboarding flight cards, watch list are already implemented.


Follow me on Dribbble, Twitter, Facebook, and Instagram