Design System Documentation and Strategy for Sysco

Sysco needed a cohesive design system to ensure consistency and scalability across their new digital ordering initiatives. The goal was to streamline their design process and provide a solid foundation for all future digital projects.

APPROACH

Every effective design system—and design team—needs well-defined design principles. To kickstart the process, I facilitated a workshop with Sysco’s product design team. This workshop was crucial in helping the team brainstorm and articulate their core design principles—the fundamental ‘why’ behind their design decisions.

Facilitating the workshop:

During the workshop, we explored various aspects of Sysco's brand identity, user needs, and business goals. Through collaborative exercises, we were able to distill key values, which I then used to craft Sysco’s design principles. These principles became the bedrock of Sysco’s design philosophy, ensuring that every design choice aligns with the company's vision.

Documentation for the design system:

To make these principles actionable, I worked closely with the UX team to develop extensive documentation. This documentation not only captured the principles but also provided practical guidelines on how to implement them across different platforms and touchpoints. The documentation — complete with onboarding instructions, component usage guidelines, and how-to videos — empowered Sysco’s team with the knowledge and tools to fully leverage the design system. We utilized Figma to visualize and document the design system, making it accessible and easy to update as needed.

RESULT

The result was a robust design system backed by clear values and comprehensive guidance. The documentation empowered Sysco’s team to fully leverage the design system, ensuring consistency across their digital products. It also served as an invaluable resource for onboarding new hires, enabling them to quickly understand and apply the design principles from day one.