At Toast, we are passionate about delivering exceptional user experiences. Recognizing that siloed design and engineering processes were leading to inconsistencies and impacting product quality, we prioritized building a strong design foundation with the Toast Design System. In early 2024, we launched an initiative to foster a culture of design excellence within our engineering organization: the Design System Champion program. This initiative has yielded significant quality improvements across our products to improve mobile experience, internationalization, and accessibility. Read on to learn the significance of this program, its tangible impact, and key considerations for implementing a similar initiative within your teams.

Why is it important to foster a culture of design within your organization?

Design is not solely the responsibility of designers; it's a collective endeavor. It's a balancing act of form versus function, considering human factors (usability and accessibility), technical understanding (engineering processes and constraints), and product knowledge (balancing user needs with long-term goals). To truly delight our customers, we must involve all of Toast in our design process, embodying our 'We're one team' value. The Design System Champions program facilitates this approach, empowering our engineers to become better design partners.

So, what is a Design System Champion? 

A Design System Champion is an engineer who is empowered to be a design advocate within their team. Through the multi-step certification program, they gain a deep understanding of design principles and best practices. This includes engaging learning modules, hands-on projects, and a capstone assessment.

What impact have we seen?  

The Toast Design System Champion program has elevated design consistency and quality across our products. The active participation of engineers in the design process has resulted in improved usability and productivity, while also creating a stronger emphasis on consistency and quality by maintaining regular dependency updates. Beyond improving design and user experiences, the program is cultivating a healthier relationship between design, product, and engineering enabling our teams to ship exceptional products to our customers faster. This has resulted in substantial improvements to accessibility, internationalization, automated testing, and internal documentation across the Toast product suite.

Check out what our Toast Design System Champions have to say about our program!

Dani D: “The Design System Champion program has really helped me develop as a UX engineer. It's made it so much easier to step in and support my design team when they have a lot on their plate. I've grown my skills in accessibility, reusability, and testing best practices, which I can apply across our SPAs to make our web app more stable, efficient, and user-friendly. Plus, it's been great to connect with others across the company who are excited about creating awesome user experiences!”

Vinoth D: “The Design System Champion program has been a great experience for me. It provided a structured way to deepen my understanding of accessibility, internationalization, and design evaluation while also reinforcing best practices for building scalable and maintainable UI components. One of the biggest takeaways for me was how a well-defined design system can streamline development, improve consistency, and enhance the overall user experience. The hands-on, project-based approach helped bridge the gap between theory and practical implementation, making it easier to apply learnings directly to real-world applications. It also fostered collaboration across teams, which I found incredibly valuable. Overall, it’s been a fantastic learning journey, and I’d highly recommend it to anyone looking to level up their front-end development and design skills!”

Interested in building your own Design System Champion program? Here are a couple key components to consider.  

To establish an effective Design System Champion program, consider these key components:

• Design system mastery: Ensure champions deeply understand the design system, including component creation, maintenance, and extension for consistency and scalability.    

• Global awareness: Train champions on internationalization best practices to design inclusive solutions for diverse languages and cultures.    

• Analytical design evaluation: Develop champions' critical thinking skills to evaluate designs, identify areas for improvement, and ensure design system adherence.    

• Front-end development expertise: Equip champions with strong front-end development skills, including responsive design, mobile-first principles, and Storybook-driven development and testing.    

• Collaborative component development: Foster collaboration by training champions to build reusable components with consideration for other engineers' needs.    

• Inclusive design advocacy: Prioritize accessibility by ensuring champions possess in-depth knowledge of accessibility principles and guidelines to create inclusive designs and implementations. 

Beyond these core components, strategic placement of certified Design System Champions throughout the organization is crucial to foster design excellence and seamless cross-functional collaboration throughout the organization.

How to sustain design excellence:

Once your Design System Champion program is established, it's crucial to maintain its momentum and effectiveness. At Toast, we've identified key pillars to ensure ongoing success and "Craft Consistency" across our products:

Pillars of consistency:

• Leading by example (Operate): Champions embody design system excellence in their daily work, applying their skills and knowledge to set a standard for their teams.    

• Expert feedback and consultation (Contribute): Champions provide invaluable feedback on the design system and related processes, helping to refine and enhance its quality.    

• Governance and continuous improvement (Academic board): An Academic Board of experienced engineers assesses projects and contributes to program content maintenance.    

• Proactive improvement and Quality Assurance (Create and review): Champions drive improvements, address feedback, and conduct product reviews to ensure adherence to design quality standards.

Conclusion

The Toast Design System Champion program represents a significant investment in fostering design excellence and cross-functional collaboration within our engineering organization. By empowering engineers with a deep understanding of design principles, best practices, and the Toast Design System itself, we are building a culture of shared ownership and ensuring consistent, high-quality user experiences across all our products. 

Within your organization, you too can leverage similar programs to strengthen design consistency and enhance collaboration between design and engineering teams.

____________________________

^{This content is for informational purposes only and not as a binding commitment. Please do not rely on this information in making any purchasing or investment decisions. The development, release and timing of any products, features or functionality remain at the sole discretion of Toast, and are subject to change. Toast assumes no obligation to update any forward-looking statements contained in this document as a result of new information, future events or otherwise. Because roadmap items can change at any time, make your purchasing decisions based on currently available goods, services, and technology.  Toast does not warrant the accuracy or completeness of any information, text, graphics, links, or other items contained within this content.  Toast does not guarantee you will achieve any specific results if you follow any advice herein. It may be advisable for you to consult with a professional such as a lawyer, accountant, or business advisor for advice specific to your situation.}