let's talk.
Get in touch with me
connect.
Find me on LinkedIn
Contracted as a freelancer with iCrossing (my former employer), I created various campaign assets for the creative team in Dallas, working on the Chuck E. Cheese account. As a part of this engagement, I was tasked with creating a visual design system for Chuckecheese.com, critical documentation for the client’s development team which had not previously existed.
Meant to provide a high-level overview of the UI elements on Chuckecheese.com, this style guide established standards for updating existing and creating new content for the site. The intent was to outline universal “rules” to design and deploy at scale, using reusable patterns, components, and UI elements while maintaining the integrity of the established brand look and feel.
I began by establishing the layout for the development team to reengineer the site and make it responsive. Using Material Design guidelines, the desktop grid assumes 12 columns, the tablet grid 8 columns, and the mobile grid 4 columns; ensuring content scales proportionately across common breakpoints.
In order to facilitate a more efficient development and deployment process, I established page templates. I began by conducting a content audit, looking to identify similarities between content types and remove redundant layouts. After which, I created wireframes of the templates, and defined how and when each should be used.
Having set the foundation, I then moved on to define the look, feel, and usage of the visual design elements—detailing how colors, graphics, and typography work in concert to bring the brand to life and maintain its distinctive identity. In addition to establishing these design guidelines, I created a component library in Figma to ensure consistent application.
The primary and secondary colors had been established as a part of the master brand guidelines; however, the rules around usage did not exist, so I made those determinations and introduced (10) tertiary colors to the palette: Violet, Grape, Marigold, Robin’s Egg and several neutral color values for more dimension.
Icons are used to add visual interest and provide a means for site visitors to quickly scan content, helping them to process information more efficiently, and perform desired actions. In doing a site content audit, I identified (7) types of icons, each with very distinct purposes. I documented them all, evaluating their behavior and created rules round their usage.
Having fleshed out the design elements of the system, the next step was to define the components that make up the content within the web pages; determining the characteristics, specifications, and usage of the most frequently used components. I concluded the design system by illustrating how these components relate to each other and how site visitors relate to them by adding interactivity to the components so that developers can see the intended behavior.
