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
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.
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.
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.
Building atoms and iterating 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.
Media & text components
With users and internal stakeholders to eliminate friction
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.
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.
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.
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.
Design system and component library finalized and implemented across the site
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.
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.