UIA. Design system
Client: Ukraine International Airlines
Role: Product designer
Platforms: Web, iOS and Android
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.
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.
Behind the scenes of our new design system This article is part of a series on our new Design Language System. Karri…airbnb.design
Our style guide is the blueprint for our design system. It helps us collaborate across disciplines to build a great…polaris.shopify.com
Based on research I started with Foundations as a start point for the whole system and then moved to UI components for each platform.
Foundations contain rules and assets which are reused across different platforms such as grid, colors, icons, logos, shadow, border radius.
Contains all UI components related only to the web. Typography, form elements, and modules.
iOS and Android
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.
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.
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.
- 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.