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. 

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

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.

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 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