Døgn Airlines Design System

Design Systems | Product Design

OVERVIEW

Døgn Airlines

Døgn Airlines is a small airline that services four cities in Scandinavia: Oslo, Norway, Copenhagen, Denmark, Stockholm Sweden, and Tromsø, Norway. We are centered in Oslo, Norway. We strive to be the most convenient method for traveling the Scandinavian region. Our short flights are affordable and available daily, making them a great option for young travelers. 

The Name: Døgn

In Scandinavia, ‘Døgn’ refers to a period of twenty four hours. Our values as a company reflect this term, providing a quick and easy airline that travelers can use any day, at any time.

The Challenge

Create a brand and a fully functional prototype for a fictional multi-city airline using Figma components, variables, modes, and expressions. Create a flight schedule and timetable to plan out the airline. I challenged myself to create the prototype with the smallest amount of screens possible, by attempting to set up my flight information in Modes. 

Create a design system after establishing the brand, visual design, and user experience of the airline app. The system should contain design principles, brand and identity guidelines, color and typography guidelines, components, and accessibility standards.

Software

Figma

Timeline

Prototype - 8 weeks, split into 4 sprints.

Design system - 4 weeks to develop a design system and tweak the prototype.

Product Demo

The Figma prototype is fully functional for all location combinations. There are six direct and six indirect flight patterns, and I set up the prototype logic using modes for the flight tables, variables for the flight search, and component variants for the flight option display. I also use a separate collection of variables to set the 'Flight Selection' information, in order to display it on the confirmation screen.

A Closer Look at the Process

Developing the Flight Schedule

Setting up the Prototype Logic

Creating Modes for Each Flight

I set up all my flight data in modes. However, due to the constraints of the Academic Figma plan, I could only have four different modes per collection. I set up two different collections, one with flights between Oslo and Stockholm (OSL-ARN), and another with flights between Oslo and Copenhagen, and Oslo and Tromsø (OSL-CPH-TOS). I broke up the flight information into the six direct flights because the indirect flights were just combinations of these direct flights. The name of each mode corresponded to the combined airport code - which was saved as a variable when the user searched for a flight. 

Component Set Up

After creating the six modes for the flight data (spanning between two different collections), I created two different base components for selecting a direct flight option - one for each collection - to create the selected and hover states of the options. I built the rest of the logic using this base component, giving me the freedom to edit the visual style of the card and having it carry through to the more complex components. 

After creating this component, I made a component set for flight arrivals and a component set for flight departures. Within each set, there is a component for the OSL-ARN collection and another for the OSL-CPH-TOS collection. These component sets handle the logic of setting the user's choices to a 'Final Selections' collection, so the data can be accessible on the payment and confirmation screens. When the user selects a flight option, the data is set on an after delay. 

Now that the functional components were set up, I created two comprehensive component sets for all arrivals and all departures. These sets use the Option Selection components to lay out all possible flights using the different modes. The variants are named by their flight code (Similar to how the modes were named). That way, when the user searches for a specific flight code, for example, OSLCPH, the component for OSLCPH options will appear for selecting a departing flight, and CPHOSL will appear for the return flight. (Variant is tied to 'combined-trip-code' and 'return-trip-code'). 

The logic for indirect flights is very similar, and follows this same pattern.

Final UI Screens

I successfully created a fully functioning prototype - only using six total screens.

Design System Creation

The Design System for Døgn Airlines is called Røm. Røm lives inside a Figma file and contains Foundations, Components, and Accessibility guidelines. The Foundations section contains branding, color usage, typography, and layout. Below is a general, but non-comprehensive, overview of Røm. For a more in-depth look, please check out the Figma file linked at the top.

FOUNDATIONS

Branding

The Logo

The primary logo uses the three primary colors, color-blue-100, color-blue-200, and color-blue-300. The typeface used for ‘Døgn’ is bolded Helvetica Neue, bold.

Usage Guidelines

• Sizing - The standard height is 44px, aligned in a 4px grid. The logo should only be scaled following the base 4px grid.
• Clearspace - The logo should have the relative width of one of the trapezoids as the clear space around the entire logo.
• Background - The background color should be either the designated light mode background (#FFFFFF) or dark mode background (#303030) 
  

Graphics

Colors

Type Scale

All type is Helvetica Neue, including the logo. Headings are bold and used for emphasis. Body text is light, and buttons and labels are capitalized and bolded. 

Layout and Spacing

All spacing is based on an 8px grid, except for the logo, which uses 4px spacing. All desktop screens utilize a stretched 12-column grid, with 96px margins, and a 32px gutter. The rows are auto-generated, 8px apart, with 0 margins and gutter. 

COMPONENTS

Buttons

Primary action buttons are contained buttons, and secondary action buttons are text buttons. Each button type is available in 3 sizes - small, medium, and large. 

Medium buttons are the default button size, but large buttons can be used for the most important action on a page. There should only be one large button on a page. Small buttons are used for secondary actions.

‘Danger’ buttons are used for destructive actions, such as deleting or canceling an action. Danger buttons are generally medium buttons, and they are contained. 

Forms and Input Fields

Forms are made up of input field, mainly Textfields. Each form has 24px spacing between rows, and 16px spacing between columns. 

Textfield

Textfields are the building blocks for all input. A Textfield is fully customizable, with properties for the variation, label, helper text (if applicable), and a slot instance swap.  All input fields, including the Date Range Picker, and Location Selector, are nested within a Textfield through the slot instance swap.

Date Picker

The date range picker lets the user select two different dates, and it highlights the dates in between. This is used for round-trip flights. The Date Range component is placed in the content slot of the TextField component.

Selection Menus

These menus are used to select the departure and arrival cities for flight booking. This component could be used as a select menu for any type of content. The Selector components (Arrive and Depart) are placed in the slot of the TextField component. To make a new menu, a list can be made of instances of the Select Button, and this can be placed inside the Textfield component.

ACCESSIBILITY

Accessibility

Røm Design System follows the Web Content Accessibility Guidelines (WCAG) to ensure all Døgn Airlines products are accessible to all.

1. Perceivable: All of Røm's products should be easily ingested by their users. There should be alt text on images, captions and alternatives to multimedia, and the content should be easy to see and hear. 
2. Operable: Users should be able to navigate through all content on the page and the content should be keyboard accessible. 
   
3. Understandable: The content should be at a sufficient reading level, the patterns should be predictable, and there should be error guidance to support the user. 
   
4. Robust: The content should be compatable on multiple devices and browsers. 
   

The Wrap Up - What's Next?

I am currently working through integrating my spacing and typography with variables to expand my design system further. I would like to create a mobile ticketing app, where the user can view their flight tickets, and scan them at the gate. 

I learned so much throughout this process. I was introduced to prototyping with variables, and I challenged myself to make the project work in the least number of screens possible using modes - and it was successful. I spent a lot of time working through that logic, testing out my thoughts, and cleaning up the process by re-doing the component structure a few times. 

In addition to diving deep into advanced prototyping, I built on my existing knowledge of design systems, and created one of my own. I spent a lot of time learning about well known design systems, such as Atlassian Design System, Figma's UI2, Duolingo's Brand System, and Shopify's Polaris. This project brought together many aspects of design, and I enjoyed the process.