UIA. Design system

Client: Ukraine International Airlines
Role: Product designer
Platforms: Web, iOS and Android
Year: 2018–2019

Overview

Ukraine International Airlines is a big company with big ambitions. But the current design was inconsistent between platforms and even between UI on the one platform. Previously, nobody cared about consistency and business just focused on delivering new features quickly. Me was the only designer and for me, it was simply to start a design system process but pretty hard to approve it with management. Currently, I and the whole development team is actively using the design system as the main document for UI components and patterns.

Understand the whole picture

On this stage, I checked all UIA platforms and products and try to understand how we could simplify UI and how to make them all consistent. In the picture below you can see that the company has a bigger problem, their applications have not only different UI but UX as well. It makes people hard to complete booking flow, and they should learn new interface patterns again and again.

Research

For inspiration, I tried to find design systems which contain UI components for different platforms, not the only web. I found these three very good examples of cross-platform design systems.

Structure

Based on research I started with Foundations as a start point for the whole system and then moved to UI components for each platform.

Design system structure in Figma

Foundations

Foundations contain rules and assets which are reused across different platforms such as grid, colors, icons, logos, shadow, border radius.

Web

Contains all UI components related only to the web. Typography, form elements, and modules.

Web atoms
Web modules

iOS and Android

Mobile UI was created with respect to iOS Human Interface Guidelines and Material Design just a little bit customized with brand colors and typography.

Mobile atoms
Mobile modules

Design process

I was in a situation when everything in design source files was spread across unstructured folders, Photoshop or Sketch files by previous designers. During the first month, I created a design process from scratch and organized all old files. I suggested the team to switch to Figma because everyone could easily access to all source files with handoff, perfect for design system and it was cheap.

  • Sketch ($100/year)
  • Invision ($300/year)
  • Zeplin ($204/year)

In total, we paid $504/year 🤑

For Figma, we paid just $288/year for two editors, but honestly only I was using Figma actively, so could pay $144/year.

(Left) Design process before and after. (Right) Project structure in Figma

Developing a design system

The plan was to design and develop main components that could be reused by developers but due to ongoing tasks overload, we don’t code all UI from the design system. Basic stuff like typography, colors, and spacing they already used in a day-to-day basis and slowly continue to work on other components.

Web implementation in Less

Documentation

I managed a design system in Figma and all teammates have access to it. But I wanted to present it in a more useful way like documentation. This is more useful for developers and non-designers additionally, also good for updates with change log. I chose Gitbook for documentation and moved all UI there with specs.

Outcomes

  • Speed up the design and development process
  • Removed debates about UI elements and focuses on user problems
  • Decrease time on QA
  • Consistent UI across all platforms

What I've learned

You need to zoom out and look at the product from a bird’s flight

The design system is a buzzword nowadays and someone called UI kits like this. But if you worked for different products for different platforms you can’t just use one UI kit. For me, this was a challenge and hard project on which I continue working. Many problems could stop me doing this project from approvement with management to implementation by developers. But when we reach an understanding and I brought all the benefits, we start thinking more about user problems and less about UI.


Follow me on Dribbble, Twitter, Facebook, and Instagram