U Apparel 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 to work along side the Engineering team to clean up and rebuild the modules that make up the company's website on the commercial side of business in order to launch the new site with their brand new brand identity .

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 modules 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 as something else, even though they had a lot of 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 components although they shared design characteristics.

Since our goal was to also clean-up the backend of the site for the relaunch, I focused my efforts on figuring out which modules 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 on my team, I was able to create an even more compact list of modules by implementing themes and drop-downs to the modules in Sitecore. This way, we were able to create a max of __ 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 not only just obtained new leadership, but is also expanding its business from previously serving primarily rural areas and smaller communities, to now also reaching 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 and the outsourced brand guide team. With a strong understanding of the new company identity and brand rules, myself and the Residential team set out to create a consistent digital style guide. 

Group 8.png

With a strong understanding of the new company identity and brand rules, myself and the Residential team 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, I had two font options. The first, and main font, was PP Object Sans. This was to be used in three different weights, regular, medium or bold. 

As you see the new designs, you will see this font is used consistently throughout. Its main functions are body copy, legal, supportive headlines, and button text.

 

The second font option is 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 the outsourced 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 that 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 modules, the activity colored button was 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-04-16 at 11.28.33 AM.png

heroes

Original homepage

new homepage

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

card columns

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. This way the site could have options, but that it could not have a mixed option.  

Charts

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

benefits

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.  

SOlution for users through hi-fidelity wireframes

Original Small Business Home

New Small Business Homepage

dental implants comparisson.png

06 Reflect

Retrospective

This website redesign and relaunch 

 

encouraged me to dive deeper into accessibility standards and to learn specifically about the different types of disabilities a user could have. In order to satisfy the client's needs to make the site accessible to all, I specifically had to learn the differences between cognitive and visual disabilities and the variants these could take. Unlike my other client projects, this one differed in that I did not interact with the client throughout my process. Instead, it taught me the importance of what questions and information I need at the onset in order to create a solution that satisfies the client's and users' needs and I was also proud of.