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:
​
Hero | Media & text card | Product card | Icon & text grouping | Forms | Quicklinks | Testimonials | Surveys | Banners
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.

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
Desktop

Mobile
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
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.

Page templates
With our components, I created templates for some areas of the website. Below are two examples that are used across Frontier's Help Center
Help Center category page

Help Center category page in use

Help Center article template

Help Center article template in use

Pages updated with new components
Pages that did not relate to templates were updated with new components.
eero page before update

eero page after update

YouTube TV page before update

YouTube TV page after update
