
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

Icon wells - horizontal

features

Icon wells - stacked

These four components were each labeled as something else, even though they had a lot of overlapping design styles.
two column featured icons

two column icon benefits

Content benefits carousel

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.

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.

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


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

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.

Buttons

Based on the color palette three button styles were created.
For most modules, the activity colored button was used.

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.

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

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.