Contracted through iCrossing, I partnered with the Chuck E. Cheese creative team to create a visual design system for Chuckecheese.com. The client’s development team lacked documentation for scalable updates, so I built a unified system of rules, components, and patterns to guide future design and ensure brand consistency. See the Design Guide.

I created a high-level UI style guide that standardized patterns, components, and reusable elements for the site. This documentation provided a framework the client could use to design and deploy at scale while preserving the integrity of Chuck E. Cheese’s established brand.

Using Material Design principles, I established responsive grids for desktop (12 columns), tablet (8 columns), and mobile (4 columns). This ensured content scaled proportionally across devices and provided developers with a clear foundation for rebuilding the site responsively.

To improve efficiency, I audited site content and identified redundant layouts. From there, I built a set of wireframed templates that defined when and how each should be used—streamlining the design-to-development process and eliminating guesswork.

I expanded the brand toolkit by defining how colors, typography, and graphics work together online. I also created a Figma component library that documented UI elements for consistent use across pages.

While primary and secondary brand colors were already set, usage rules weren’t defined. I created clear guidelines and introduced 10 tertiary colors, including vibrant accents like Violet, Grape, and Marigold, plus neutral values for depth and flexibility.

Icons were critical for scannability and quick comprehension. I categorized seven distinct icon types, documented their behavior, and established usage rules so developers could apply them consistently and effectively.

Finally, I defined the most frequently used components—detailing their structure, behavior, and relationships to other elements. To illustrate interactivity, I showcased key examples like Toggles and Pagination, documenting their states, transitions, and behaviors for developers. The full library of interactive components can be explored in the Design Guide.

The result was Chuck E. Cheese’s first comprehensive design system for its website—equipping the team with a scalable, documented framework that streamlined development, ensured brand consistency, and set the stage for a responsive, modernized site experience.