LOGO design
LOGO design
Frankie
kastenbaum
Frankie
kastenbaum
Frankie
kastenbaum
FRANKIE
KASTENBAUM
FRANKIE
KASTENBAUM
FRANKIE
KASTENBAUM
Frankie
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
Icon wells - horizontal
features
Icon wells - stacked
These four components were each labeled individually, even though they shared overlapping design styles.
two column featured icons
two column icon benefits
Content benefits carousel
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.
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.
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
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
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.
Buttons
Based on the color palette three button styles were created.
For most components, the activity colored button was to be 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
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
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
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
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
Agents Homepage
enterprise homepage
Wholesale homepage
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.