Runway DS

Runway DS

Runway hero

Finavia is a digital forerunner within the airport operator industry. Once having a strong digital customer presence, they embarked on building their Design System to speed up product development while enabling a consistent and accessible user experience for everybody.

Background

Finavia lacked an efficient and consistent approach when designing for their customer digital experience at scale. The app, website, map, Airport guide, Free wifi portal and Service Info Screens (SIS) shared no components nor UX patterns, making the user experience and front-end development suffer.

In addition and due to European public sector legislation updates, Finavia embarked on an accessibility remediation project that brought the opportunity for Runway DS, Finavia design system.

Runway-Documentation2

CX Driven

Runway DS is home to Finavia’s digital customer experience under a robust foundation that aims for Accessibility AA compliance. When designing for an accessibility-first design system, we didn’t stop at colour contrast and layouts. We strive for robust and scalable accessible solutions to key interactions in all Finavia services, such as forms validation, interaction with widgets, and product selection flows.

Yet under one year old, Runway DS currently fully serves all Finavia customer digital channels: finavia.fi, Helsinki Airport Guide, Free Wifi portal, and Info Service Screens. It includes all the basic building blocks, such as colours, typography, spacers, icons, grids, buttons, modals, input fields, pickers and dropdowns, forms, validations, notifications, and service specific components.

Our setup

Our multilevel setup foresights future growth by allowing flexibility and resilience from day one. We have built on top a global design system that includes all the building blocks relevant to all channels – Typography, colours, and icons are examples of widely used resources relevant to every service. Bellow, we created local design systems that hold service specific components such as flights listing or map controllers.

Runway-setup

What's next?

We carefully select what is brought into Runway DS and aim to keep it to the minimum. In the past Finavia built many custom components that were difficult to reuse. In the future we want Runway to hold highly reusable and scalable components before creating very custom ones.

My role

  • UI / UX designer
  • Close collaboration with developers
  • Building design system naming


About Finavia

Finnish airport operator Finavia enables smooth international flight connections through its national airport network. The biggest, Helsinki International Airport, served a total on 18.9 million passengers in 2017. Finavia offers world-class services to passengers, air traffic operators and commercial partners.