UIA. Redesign booking flow

Client: Ukraine International Airlines
Role: Lead product designer
Platform: Web
Year: 2018–2019

Overview

The redesign is a complex process especially when you are working for the biggest airline in Ukraine without any design process. Our company can’t suggest redesigning the whole booking flow at once due to complexity and cost. So we start thinking on redesign of each step of the flow and my responsibility was to keep in mind consistency through entire flow. Design system helps me to create consistent UI and also test on real pages.

Problems

I don’t have time resources to recruit real users for interview. So I tested current design with new teammates and people who are not related to development in our company to understand their problems and pain points in usage. Business requirements I received mostly from PM and CEO.

Booking flow

Home

  • Unclear what is +- 3 days
  • When the dates are set, it is unclear for the user that the direction should be selected
  • When coming to the page next time user need to re-enter info
  • Want to choose a flight class before a search

Search

  • Think about 7s to understand where to click to select a flight. Expected to see flight options when clicking on a class
  • Like to see the price for other days
  • Want to compare new selected flights with previous selected
  • Unclear icons in mini rules

Passenger details

  • Missing Done button
  • Want to click to banners but they are not active

Services

  • Can’t find back to the search button
  • Don’t understand where is card and how to remove items from there
  • Can’t save a selection

UI audit

After defining user problems I've created a list of all UI problems that I found. There was a mess from different font styles to various date formats. This happens because before UIA didn’t have any UI rules and designers don’t control design implementation. Later I've created a design system that fixed this problem.

Competitor research

Competitor research is an integral part of my design process. Before I underestimated research and relied only on my vision🤣 But in the airline industry, you can’t just ignore UX that worked for years and it will be stupid to ignore it.

Search results

The desktop version of this page was designed by the previous designer, so I just fixed it. After good A/B testing results we kept this version and I redesigned a responsive version because it was hard to use.

Search results before
Search results after
UI states for search results

Ancillary services

The problem was that users just skipped this page and didn’t add services to their trip. For UIA this page very important because they received a lot of money from additional services like seat change, meals, and baggage. So it was critical to suggest good UX here.

Ancillary catalog before
First sketch from PM

Together with the team, we were brainstorming about how to improve this page to increase conversion and start as the main concept from this sketch.

After I've created a visual design based on our design system. To test our ideas I've prepared a prototype in Figma.

Interactive prototype in Figma

So we’ve launched A/B test for 50 % desktop users only. The test was successful, so I’ve designed a responsive version, made some improvements and prepared all states for developers.

Responsive version
UI states for ancillary services

Payment page and basket

On the payment page, the main problem was with selecting payment methods, because it was hard to find. These changes reflected a sidebar, so I redesigned it as well and made it consistent across all booking flow. The basket should be one for 3 pages in the booking flow but it was not like that.

Payment page before and after
Basket before and after

What I've learned

Booking flow is the main flow for an airline, that generates the most revenue. And when your website used by millions of users you have a huge responsibility as a designer to make the user experience as better as possible. This project helps me learn how to balance between business goals and user experience. And how to communicate with developers better in order to deliver the best quality to the users.


Follow me on Dribbble, Twitter, Facebook, and Instagram