Project Overview
During my 2015 summer internship at Cox Communications, I joined the Cox Digital Experience team to help them design and develop a digital style guide that can be used across all aspects of business, like Lego pieces. The new digital style guide should maintain governance on the overall look and feel of Cox’s brand, and control consumer experience across platforms.
The Problem
The digital style guide initiative started in October 2014, where various functions at Cox realized the design-development cycle was taking too long. The UX team started collection design materials and information in Dropbox, which was the early model for a centralized style guide.
The development team and design team are not communicating efficiently to update each other on their design process. In the design team, there is a mismatch in expectation: Designers expect the final product to look and feel exactly like their mockups, which don’t always happen. Developers have a code base they update regularly and circulate within their team; designers have different versions of design mockups they share using a myriad of file sharing systems.
In addition, Cox was in the process of re-branding and shifting to a new CMS platform. A new digital style guide in the midst of this transformation stage is crucial.
“The development team is 1.5 months behind the design team.”
“The development team is 1.5 months behind the design tea“There is a conundrum when the design team starts making changes before the development team starts developing.”
“The book (the VI manual) is obsolete the moment it left the printer.”
Auditing
I started exploring this project by creating a thorough audit between the existing style guide book (versioned dropbox files), developers’ style guide, and designers’ style guide, outlining the differences between the two to come up with an all-inclusive list of final design pattern.
The Process
After the initial investigation and resolving the differences, I decided to start from scratch and build a brand new site to host the new digital style guide.
Final Prototype Walkthrough
I created the final functional prototype using bootstrap with Cox’s own CSS style. The website was hosted and test-run internally in Cox and was taken over by the UX team later on. Here is a brief video of the prototype I created: