Comcast Business
Comcast's B2B subsidiary is one of the largest providers of Internet, phone, TV, and many more products and services in the nation. In June, 2017, I was hired to join a team of creatives from SapientRazorfish with the task of rearchitecting the entire experience for Comcast Business's website and eCommerce platform, www.business.comcast.com, along with assisting in the creation and implementation of an advanced style guide and pattern library, to be used in their updated CMS platform. We created a system from the ground up of flexible components and guidelines to allow content authors to continue to add to the site autonomously, long after our work will be completed.
Old site
New site
Style guide
The creation of the style guide was initiated before I joined the team, including selecting type styles and colors. Once I began, I worked closely with the ACD on the guide and became an integral part in developing and fine-tuning the system. We created 4 different color themes to help us build out a pattern library that would allow variety in design, while staying consistent and cohesive. With my expansive illustration and icon creation background, I was solely responsible for the design of the icon library and the system that accompanied it.
Navigation
Creating the new site navigation was a delicate process that needed to be developed in 3 releases, due to the 3 levels of Comcast's subsidiaries that would be affected. The final design of the new nav bar was created to include 3 levels: L0, L1, and L2. L0 is the highest level, allowing the user to switch between Comcast's residential, small/medium business, and enterprise platforms. L1 includes products, support, my account, phone number, and chat. L2 includes the lowest level product navigation and a search bar.
Spacing & alignment
A comprehensive grid-based system was put into place to determine how to cohesively represent all elements in the experience, along with their relationship with each other. Every component was carefully pieced together and adjusted to fit the spacing standards.
SMB Homepage
The creation of each page was a collaborative effort. Concepting would occur in extensive meetings that involved research and constant input from each product team. The UX team would begin to develop wireframes, which would then be handed off to me to implement the visual treatments based on the styles and pattern library we had produced. Internal refinement meetings followed before presenting to the client.
New navigation
Flexible hero system
Check availability component
Page statement
60/40 product navigation: Internet
60/40 product navigation:
Phone
60/40 product navigation:
SmartOffice
2-Up component for smaller products or
add-ons
New footer
LOB and PDP pages
Each product/service contained their own Line of Business page, explaining the product before getting into details and pricing. The Product Detail Pages outlined more detailed descriptions of the products contained within the Line of Business.
Internet Line of Business Page
Internet for Business Product Detail Page
Break points
For every aspect of the new website, we had to consider how it would behave throughout tablet and mobile break points. We didn't just design for adaptive scalability — we designed for responsive behaviors that allowed the user to believe that the content was created uniquely for the device they were using. Every component has a unique and specialized UX for each individual break point.
