Image for post
Image for post

CheapOair. Redesign flight booking flow for mobile apps

Ilya Zoria
May 28, 2019 · 5 min read

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
Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Android version
Image for post
Image for post
Image for post
Image for post
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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store