How HelloFresh built a design system for its 8 brands using Figma

At HelloFresh Group, design is more than just aesthetics; it’s a strategic priority that drives the brand’s success and customer satisfaction. The Berlin-based company, which has over 14,000 employees worldwide, is widely recognized for its meal kits, but it has expanded to offer eight different brands that provide a variety of food solutions, from ready-to-eat meals to pet food.

The complexity of managing such a diverse brand ecosystem requires a robust and unified design approach; the UX function at HelloFresh comprises around 75 product designers, content designers, and researchers who are distributed across three global hubs in Berlin, New York, and Toronto, as well as working remotely.

Their mission is to create a consistent and engaging customer experience across all eight brands. And that’s where Figma comes in.

“Figma serves as the central point of contact for all designers at HelloFresh, enabling them to collaborate seamlessly, regardless of their location,” says Marlene Rosner, Sr Director UX Design at HelloFresh. “Figma hosts HelloFresh's design system, allowing designers to work on the same file simultaneously, facilitating both asynchronous and synchronous collaboration. This is crucial for maintaining consistency and efficiency across the design process, from initial concepts to final implementation.”

HelloFresh's design system, named Zest, is a multi-brand and multi-platform system that serves all eight brands. It’s built using a token architecture, which allows for flexibility and adaptability to meet the specific needs of each brand.

“This approach ensures that components are consistent across platforms, enabling designers and engineers to speak the same language and streamline the design process,” says Adnan Puzić, HelloFresh’s DesignOps Lead.

The introduction of Figma’s Dev Mode has further simplified the collaboration between designers and engineers, allowing developers to easily navigate design files, inspect components, and access necessary specifications. “Dev Mode has streamlined the process, significantly improving handoff and increasing efficiency, allowing engineers to focus on building high-quality products,” says Adnan.

And Figma's collaborative features extend beyond the UX and engineering teams to include brand and marketing design, as well as content design, enabling a holistic approach to design that encompasses all aspects of the customer experience.

“Design at HelloFresh is not just about creating visually appealing products; it’s about shaping the customer experience, improving operational efficiency, and fostering collaboration across teams,” says Marlene. “Figma is crucial for ensuring that our eight brands are user-friendly and effective, ultimately contributing to the overall efficiency of HelloFresh’s operations.”