CloudKitchens
Simple ingredients, endless combinations.
Overview
CloudKitchens is a ghost kitchen and virtual restaurant company, with software to manage every aspect of the delivery business. Our challenge was to create a universal design system that could empower UX designers in a multi-brand environment. To do that, we needed to standardize how components were defined, built, and implemented—ensuring flexibility in the face of unpredictable product and brand challenges.
Services
- Product Leadership
- Strategic Planning
- Project Management
- UI & Visual Design
- Brand Systems & Guidelines
- Technical Strategy
To create a universal system, we first needed to audit the existing range of brands within the product ecosystem. Together, we helped tease out the similarities and differences between the various brand systems, which ultimately led to a foundational set of themeable brand tokens.
To help designers work across the platform using the same core system, we worked with the team to standardize how components are defined, built, and implemented.
Use Cases and Variants
How will designers leverage this component across the platform? What kinds of variants are needed to fulfill all of these use cases?
Composability
How do we make this component useful and not stymie product innovation, while still providing all of the required states?
Stylistic Flexibility
How might we employ the brand tokens to make this component flexible in a multi-brand environment?
Designer UX
How will designers want to use or configure this component in Figma? What’s the easiest way to capture designer intent?
“Always approach a design system like any other digital product—how will it make the designer's experience better?”
As each component was implemented, we experimented with different Figma variant and property configurations. In some instances, visual choice was restricted through nested components, while in other situations designers were given control over every visual detail. Most often, it made sense to embrace a hybrid approach.
As we moved to higher-order components, it became critical to design with flexibility in mind. Guardrails were established by clearly defining what each pattern could contain, but without making any assumptions about what designers were actually composing.
