top of page

Frontier's Design System and Component Library



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


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


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.


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

Old site.png

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


What is being solved for


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.

Frame 10317.png


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


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



Hero components.jpg

Text blocks



Text card components.jpg

Media & text components


1 Media and Text component.jpg



3 Media and Text Cards.jpg




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


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

Container corners.jpg


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.

Component Collage.jpg

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

Modular Template HC Category-1.jpg

Help Center category page in use

Modular Template HC Category.jpg

Help Center article template

Modular Template HC Article.jpg

Help Center article template in use

Modular Template in use_HC Article.jpg

Pages updated with new components

Pages that did not relate to templates were updated with new components.

eero page before update

eero before.jpg

eero page after update

eero after.jpg

YouTube TV page before update

YTTV before.jpg

YouTube TV page after update

YTTV after.jpg
bottom of page