Frontier Website Mockup.png

Frontier

Technologies

Figma

Duration

3 Months

Frontier is a telecommunications company, focused both on the residential and commerical markets. 

For this project, I was tasked with working along side the Engineering team to clean up and rebuild the components that make up the relaunch of the company's commercial website.

Team

Myself and two Engineers

role

UX Contractor, focused on building out the design system based on the company's new branding.

 

01 research

current site evaluation

Before diving into any designs, I first had to see what modules the site currently used. I began this process by reviewing what the Engineers had previously built out in Sitecore. 

 

Quickly, I could see that there were many components with different names that were used in similar instances and consisted of similar designs. Examples of some of these groupings can be seen below. 

products benefits carousel

Screen Shot 2022-04-13 at 10.07.17 PM.png

Icon wells - horizontal

Screen Shot 2022-04-13 at 10.07.47 PM.png

features

Screen Shot 2022-04-13 at 10.07.33 PM.png

Icon wells - stacked

Screen Shot 2022-04-13 at 10.15.14 PM.png

These four components were each labeled individually, even though they shared overlapping design styles. 

two column featured icons 

Screen Shot 2022-04-13 at 10.08.22 PM.png

two column icon benefits

Screen Shot 2022-04-13 at 10.17.28 PM.png

Content benefits carousel

Screen Shot 2022-04-13 at 10.08.10 PM.png

These three components were again each labeled as individual ones although they shared design characteristics.

As one of our goals was to clean-up the backend of the site for the relaunch, I focused my efforts on figuring out which components could be consolidated. I did this through the Google Sheet below. 

Screen Shot 2022-04-13 at 10.21.57 PM.png

Through discussions with the Engineers, I was able to create a more compact list of components by implementing themes and drop-downs to the components in Sitecore. This way, we were able to create a max of 20 modules, while still allowing for variations within the site. Not only was this important for the clean-up, but also for preventing non-designers down the line from creating their own style that did not fit within this new branding.

02 define

 

what was solved for

Frontier currently is undergoing a new brand reinvention, not only changing its image, but also expanding its business from previously serving primarily rural areas and smaller communities, to now including several large metropolitan markets. 

 

How might we help individuals understand that Frontier is progressing its company and reinventing its image?  

03 design

How atoms became pages

For this next phase, I worked in tandem with the Residential in-house team, the outsourced brand guide team, and a few design agencies.

Group 8.png

With a strong understanding of the new company identity and brand rules, with the Residential team I set out to create a consistent digital style guide.

 

typography

Screen Shot 2022-04-13 at 10.37.19 PM.png
Screen Shot 2022-04-13 at 10.35.54 PM.png

For this relaunch, two font styles were used. The first, and main font, was PP Object Sans. This was to be used in three different weights; regular, medium or bold. 

Its main functions were for the body copy, legal copy, supportive headlines, and button text.

 

The second font option was Bandwidth. Due to its very bold and attention grabbing nature, it was to only be used for headlines. 

Color

Screen Shot 2022-04-13 at 10.50.24 PM.png

Although the colors were given to us from an outsourced design agency, as a digital team we had to figure out how to best use these colors for web. 

It was quickly apparent that Electricity colored text would not pass a contract checker test when used on a white background. As well as white text on an Activity colored background would not pass a contrast checker unless 18px and bolded or larger. 

Screen Shot 2022-04-13 at 10.47.00 PM.png

Buttons

Screen Shot 2022-04-13 at 10.53.53 PM.png

Based on the color palette three button styles were created. 

For most components, the activity colored button was to be used. 

Screen Shot 2022-04-13 at 10.54.03 PM.png

Once I had all these parts built out, I was able to dive into Figma and design the new components for the desktop and mobile version of the commercial website pages.  

Through my work to consolidate the modules, I was able to split the new ones into 20 categories. The main module groups were heroes, card columns, charts and benefits. These will be the only ones I highlight. 

Screen Shot 2022-05-09 at 12.16.37 PM.png

heroes

Hero Product.png
Hero -Video Stripes Navy2.png
Hero- Background Image Navy.png
Hero -Video Bandwith Font Red.png
Hero Product and Price.png
Hero Minimal.png
Agents Site Hero.png

Originally, Sitecore had 11 different hero components. Many of these had overlapping designs but were made as new instances due to location on the site and slight variations in the design. With this clean up and new theme categorization, I worked to minimize the number of options. For this new site, I created only 7 types of hero options which are seen above. 

card columns

White Background.png
White Background.png
Grey Background.png
Grey Backgorund.png

For card columns my main focus was on creating more user friendly modules that would be less distracting for a user. As well as creating set theme options so that in the future the colors of certain elements in the component would not be altered and ultimately go against design best practices. For example, I created variations for the Activity color and another section for the Gravity color, each being able to be used on either a white or light grey background. This way the site could have options, but that it could not have a mixed color option.  

Charts

4 Column Chart- 3 Color.png
Group 10110.png
4 Column Chart - Logo.png
Benefits Chart Short - Red.png

Throughout the site many different chart styles are necessary to highlight information in various ways. Therefore, my focus for this component grouping was not to simplify the number, but rather to create set color themes, similarly to the card columns. 

I have only highlighted one of each variation of these chart categories, but all styles can be used in both the Activity and Gravity colors, and only a few could use Electricity for an additional color when needed.

benefits

Icon Benefits - Full Red.png
Icon Benefits - Half Navy.png
Icon Benefits Half + CTA - Light Blue.png
Agents- Why Frontier.png

As mentioned at the beginning of this case study, there were several differently named components that fit within this category. That is why for this section my focus was on figuring out which section of each were important and to therefore bring into the new version.  

As with many of the other modules, each of these shown, have counterparts in the three main company colors. 

How pages became a live site

Once I had designed all variations for the 20 component groupings, I worked with the Engineers to build out our first new redesigned pages; the 4 homepages for the commercial side of the business. These pages included the Small Business Homepage, Enterprise Homepage, Wholesale Homepage and Agents Homepage

For this case study, those will be the only pages I show to highlight a number of the components I created. To see the full redesigned site, check out frontier.com/business.

Small business homepage

SMB New Homepage.png

Agents Homepage

Agents New Homepage.png

enterprise homepage

Enterprise New Homepage.png

Wholesale homepage

Wholesale New Homepage.png

06 Reflect

Retrospective

As a solo Experience Designer on a team of Engineers, I thought a great deal about the design handoff and how important open communication between the disciplines is. Due to the fast nature of a new brand and website roll out in 3 months, many changes were constantly occurring, ones that affected both the design file and the newly released pages. Therefore, it was extremely important for myself as the liaison between our outsourced agency, the Residential Design team, Brand and Legal teams and Engineering, to track the moving pieces to make sure the live site was pixel perfect and user friendly.