UIA. Redesign navigation and user account

Client: Ukraine International Airlines
Role: Product designer
Platforms: iOS and Android
Year: 2019

Problem

UIA mobile apps were developed as MVP to test booking flow on mobile. During this period the company has added more features and completely forgotten about UX. After next request to add a user account to the mobile app I’ve suggested redesigning navigation and applying our design system, iOS/Android guidelines to be consistent with the web and fix current UI problems. Here’re top problems on what we were focused on:

  • Useless home screen
  • Overloaded global navigation
  • Overbranding
  • Ignoring platform guidelines
  • UI inconsistency on all platforms
Home, navigation, and settings on iOS before

Decomposition

Before designing something I like to collect all features, information, actions in one mind map to understand the whole picture and start thinking about user flows.

Information architecture in Xmind

Competitor research

There are a lot of good ideas on booking flights market, so it will be stupid to ignore it. Additionally, it was interesting to know how others combine user account, settings, and notifications.

I highlighted good UX ideas to consider:

  • Home screen should represent the main actions for a user and for business, these are actually booking a flight, check-in and manage my booking widgets
  • Apply navigation as a platform standard for iOS and Android
  • Quick access to account and notifications from home screen
  • Settings should look and work the same way as a platform system settings
Apps that I used for research
Inspiration from different apps

Navigation and home screen

After collecting problems, competitor research, and information I’ve started experimenting with some ideas and testing on my colleagues.

Test ideas on Principle

The initial idea was to combine two widgets, book flights, and check-in, but later I received new business requirements and that we should add manage my booking widget to the home screen. So I drop ideas to quickly switch between two states and just used bottom navigation and replaced nav drawer.

Bottom navigation
Redesigned selectors for book flights

User account and notifications

The main task of this project was to add a user account and notifications from the website. I adapted user flows and all related components to the UX of the app.

User account and notifications
Other states

Handoff to developers

UIA has iOS and Android apps which were completely inconsistent with each other. Even the same components were different within one platform. So, I’ve started pushing the idea of a design system which works on the website as well.

UI atoms and modules from a design system

Summary

This project took about a month of design and a month of development. UIA didn’t approve the whole design and only user account and notifications remained.

Here is a checklist that was done:

  • Home page contains main actions for a user and for business: booking flight, check-in and manage my booking
  • Simplified global navigation with a bottom nav bar
  • Quick access to account and notifications from home screen
  • Redesigned settings and integrated into the user account
  • Simplified UI with global components form the design system

Check app in live Android iOS.


Follow me on Dribbble, Twitter, Facebook, and Instagram