Frontier's Design System and Component Library

6-Evgn-City-2.jpg

Problem

Before Frontier launches its new brand, a digital style and functionality must be created, documented, and accessed in a way that they can be easily used.

Solution

Create a comprehensive design system and component library in Figma that is based on the new Frontier brand and Atomic Design methodology. It will include all styles and components used in a website, it will be accessible, inclusive, responsive, flexible, and scalable.

New Button.jpg

Design System Foundation

Based on the new brand and includes all foundation elements (atoms)

Foundation

By working with developers, testing different styles on web pages, and testing with users we were able to define base styles and web guidelines. Below are some select pages and elements from the Design System.

Frame 6175.jpg
Inputs.jpg

UI elements

Simple components functioning as a base unit (molecules)

Title blocks

Options for left and center aligned. Responsive for mobile and desktop.

Title block.jpg

Inputs

Different states are defined for all scenarios. Responsive for mobile and desktop.

Input fields

Text Boxes.jpg
Dropdown.jpg

Input controls

radio buttons.jpg
checkboxes.jpg
Toggles.jpg
toggle block.jpg

Progress indicators

Defined to assist the user. Responsive for mobile and desktop.

Step process

Step progress.jpg

Load progress

Progress Loading.jpg

Breadcrumbs

Breadcrumbs.jpg

Text groupings

Used as a base, colors can be adjusted for use. Responsive for mobile and desktop.

Table rows

Table Row.jpg

Messages

Alert messages.jpg

Lists

List_Bullet.jpg
List_Number.jpg

FAQs

Default state

Hover state

Expanded

Hover expanded

FAQ.jpg
List_Checkmark.jpg

CTAs

Number of CTAs can be adjusted for use. Responsive for mobile and desktop.

CTA groupings

CTA_Horizontal.jpg
CTA_Stacked.jpg
Frame 6113.jpg

Component library

Organisms comprised of UI elements

Components

The components were tested with users and implemented on multiple pages to ensure they captivated our audience and fit within the new brand. They all contain the ability to remove unneeded elements, change colors, and are responsive. Below are some select components from the library.

Hero banners

Desktop

Mobile

Hero components.jpg

Text blocks

Desktop

Mobile

Text card components.jpg

Media & text components

1 image, 1 text block

1 Media and Text Cards.jpg

2-3 images, 1 text block

2 Media and Text Cards.jpg

2-4 images, 2-4 text blocks

3 Media and Text Cards.jpg

Navigation

Desktop

Mobile

Navigation.jpg

Banners

Desktop

Mobile

Banners.jpg
MolecularGrid.jpg

Components in use

Templates and pages are created using the components

Modular template design

Modular template.jpg

Hero banner

  • Can swap out for any hero component

Highlights product benefits

  • Can have 2-4 benefits shown

  • Can be swapped out for another component

  • CTAs can be added

Product cards

  • Cards can be added or removed

Section for additional information

  • Can be swapped out for another component

  • Questions can be added or removed

Template in use

Streaming_Launch_Desktop.jpg

Pages 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