Frontier's Design System and Component Library

Problem

A universal digital design system or component library does not currently exist, which has led to an inconsistent website and brand image.

Overview

Frontier is in the process of brand reinvention. In addition, we also updated our technology stack.

Solution

A comprehensive design system and component library must be designed in Figma and developed in the new stack. It will include all text styles and components used in a website, it will be accessible, inclusive, responsive, flexible, and scalable by using Atomic Design methodology.

Migrating the website to a new stack gives us the opportunity to create better constucted components in line with the rebrand.

Brainstorm

Research to discover what elements are needed

Current site evaluation

I researched and documented the content and components on the current site and determined which components are needed, which aren't, and which can be combined.

Below are some examples of old components that needed to be updated for use in the new component library, they include:

Old components

Most of the components on the site had inconsistent use of text input fields, buttons, imagery, icons, text styles, and other issues

Define

What is being solved for

Scope

While undergoing a brand reinvention, Frontier is not only changing its image but also emerging from bankruptcy and expanding its business from previously focusing on older technologies, to now promoting higher-end products and bringing those products to as many areas of the country as possible.

We must help individuals understand that Frontier is progressing as a company and reinventing itself.

Foundations "atoms"

Working with outside agencies during the rebrand, we were given a new color palette, logos, fonts, icon guidelines, and imagery styles. We used these as the base for our digital style guide and could start testing them out in components and create rules for how these items should be used.

Accessibility

We established which colors can be used together. Even though these colors were given to us by an outside agency they were not yet tested for digital accessibility. In order to pass for accessibility we had to create a slightly darker red to be used in special cases and infrequently.

Screen Shot 2022-12-30 at 6.37.34 PM.png

Design

Building atoms and iterating components

Preliminary components

As we built components in Figma they were tested and used on the redesign of webpages. Some were even developed to see how they could be used in multiple places with different versions. All components were built using atoms, so if any element needed to be changed it was easy to update the atom and then all other instances would be updated as well. Below is a sample of some preliminary components.

Hero banners

Desktop

Mobile

Text blocks

Desktop

Mobile

Media & text components

Desktop

Desktop

Mobile

Test

With users and internal stakeholders to eliminate friction

Component updates

Through a lot of user testing on multiple different projects, there were updates to the design system and component library. Some updates included making the UI elements more modern, and some updates were the result of making the digital design more friendly. Below are some of the updates that were made as a result of user testing.

Text input fields

Moving from rectangular fields to pill-shaped fields helped to make the design more modern and sleek. Also, adjusting the states and adding a focused state improved accessibility so that the distinctions were more obvious. The label was moved above the field to improve legibility.

Original design

Final design

Buttons

Similar to text input fields, the buttons went from rectangular to pill buttons. This was done for consistency and to have a more modern look, but it was mainly done to give the buttons a softer feel. Frontier's new colors are much bolder and more vibrant. The primary button color is red, Frontier's main color, so having it in a pill shape made it less harsh.

Buttons were also updated to have a shorter height as the text size went down. This made the buttons match the component content better where smaller buttons were used. A clarity (white) ghost button was also added as an option.

Original design

Final design

Text styles

Through testing out heading and paragraph styles in components and on pages, we finalized to the below text styles. Our customized font, Bandwidth, is very unique but has some legibility issues. So we added an alternative H1, and limited the amount of words while using Bandwidth to a max of 5. We also eliminated the P2 style, and used one P1 for mobile and one for desktop.

Original design

Final design

Container properties

Since Frontier's new colors are much bolder and more vibrant, we decided to round the corners of the containers. This gave the pages a friendlier feel but was still very energetic.

Original design

Final design

Launch

Design system and component library finalized and implemented across the site

Design system base

The atoms that make up the design system and the component library were established through testing and iterating.

Component library

Using the atoms, I created molecules which were then used to create our components. Eventually, after the redesign of many web pages, an extensive component library was constructed. It is maintained in Figma and Storybook. Below are samples of some of the components I designed and tested.