Scroll down to read more

Building a Tokenized Design System for Sligro Foodgroup

Design OPS ( Request flow )
Design System Setup
UX Research

Client: ING WB
Year: 2018

Sligro Foodgroup, a leading foodservice company in the Netherlands and Belgium, recognized the need for a unified and scalable design system to support its digital transformation. With multiple business units spanning foodservice, wholesale, and retail, and five distinct brands under its umbrella, Sligro faced a critical challenge: how to create a design system that maintains brand consistency while catering to the unique needs of each brand.

This initiative aligned with Sligro’s strategic decision to adopt a new technology stack, providing an opportunity to rethink and rebuild their web-based design system. My role was to lead the development of this multibrand tokenized design system, ensuring scalability, efficiency, and collaboration across the organization.

OBJECTIVE

Challenges

Multibrand Complexity:
Each of Sligro’s brands had unique identity requirements, but they also needed to coexist under a unified system to maintain operational efficiency and brand consistency.
Scalability and Flexibility:
The design system needed to accommodate growth, enabling the addition of new brands, components, and platforms without disrupting existing workflows.
Cross-Functional Collaboration:
Aligning designers, developers, and stakeholders across different business units required clear communication and a shared vision.
Consistency Across Platforms:
Ensuring design decisions were consistently applied across web, iOS, and Android platforms demanded a tokenized approach that bridged the gap between design and development.

Strategic Approach

Our strategy combined a structured design process, the implementation of advanced design token methodologies, and a focus on collaboration to deliver a scalable solution.

Phase 1: Establishing the Foundation

The groundwork involved aligning goals, auditing existing assets, and securing stakeholder buy-in:

Goal Setting: We defined the purpose of the design system, focusing on solving inefficiencies, ensuring brand consistency, and improving the user experience.
Stakeholder Engagement: By articulating the long-term value of the design system, we secured leadership support and fostered alignment across teams.
Audit and Inventory: A comprehensive review of Sligro’s digital assets helped identify redundancies and inconsistencies, providing a clear roadmap for improvement.

Phase 2: Designing and Building the System

We structured our approach to ensure scalability, efficiency, and clarity:

Foundation Definition: Established essential elements, including accessibility standards, color palettes, typography, and iconography, to serve as the system’s backbone.
Component Creation: Designed reusable components in Figma, ensuring they met the needs of all brands while maintaining flexibility for customization.
Tokenized Approach: Implemented design tokens to bridge design and development, ensuring consistency and scalability across platforms.

Phase 3: Token Implementation and Distribution

Design tokens became the cornerstone of the system, enabling seamless integration across brands and platforms:

Token Categories:
- Brand Tokens :
  Defined core brand values (e.g., brand-colors, fonts etc).
- Primitive Tokens :
  Defined core design values (e.g., colors, spacing).
- Semantic Tokens :
  Guided contextual application of design values.
- Component Tokens :
  Tailored tokens for specific UI elements.
Naming Conventions: Created a clear structure using brand prefixes, categories, and states to ensure easy maintenance.
Distribution Tools: Utilized tools like Style Dictionary and Token Studio to automate the transformation of tokens into platform-specific formats, such as CSS variables and Swift for iOS.

Phase 4: Collaboration and Continuous Maintenance

A design system’s success relies heavily on collaboration and consistent upkeep. To ensure Sligro Foodgroup’s design system remained effective and relevant, we implemented the following strategies:

Comprehensive Documentation: We created detailed guidelines and documentation to standardize the usage of tokens and components. This served as a reference for designers and developers, ensuring clarity and reducing inconsistencies.
Collaborative Workflows: By establishing a hybrid model of remote and in-person collaboration, we combined the flexibility of remote work with the productivity of face-to-face interactions. Regular touchpoints and workshops fostered alignment among cross-functional teams.
Ambassador Program: Each product team designated a design system ambassador responsible for maintaining alignment with the central design system team. This ensured continuous feedback, real-world testing, and contributions to the system.
Versioning and Updates: We introduced a systematic process for updating the design system, ensuring changes were documented, tested, and communicated across teams. This approach minimized disruption and maintained consistency.
Automated Tools: Leveraging tools like Style Dictionary and Tokens Studio, we automated token transformations and distribution across platforms, enhancing efficiency and scalability.

man in black crew neck t-shirt using black laptop computer

Outcome and Impact

The tokenized design system delivered significant value to the Sligro Foodgroup :

Enhanced Brand Consistency:
Provided a unified yet flexible framework that maintained the unique identities of Sligro’s five brands.
Improved Efficiency:
Streamlined the design and development process by enabling reuse of components and ensuring seamless handoff between teams.
Scalable Framework:
Built a system that could easily adapt to new brands, components, and technologies, future-proofing Sligro’s digital ecosystem.
Collaboration and Alignment:
Fostered a shared understanding of design principles and practices, strengthening teamwork across diverse business units.
Operational Excellence:
Enabled faster implementation of updates, reducing time-to-market for new features and ensuring consistent experiences across all platforms.

Our Triple Track Agile Approach

Discovery Track:
- We kicked off projects by conducting in-depth user research, mapping pain points, and identifying opportunities.
- Through workshops and collaborative sessions, we aligned with stakeholders to define clear objectives and prioritize solutions.
- This track ensured we were solving the right problems from the outset.
Delivery Track:
- In close collaboration with developers, we designed and iterated on prototypes using scalable design systems to maintain consistency.
- We worked in short, focused sprints, continuously refining our designs for seamless implementation.
- Our goal was to deliver functional, user-ready solutions efficiently without compromising on quality.
Validation Track:
- Testing was integrated into every sprint, allowing us to gather feedback early and often.
- By validating ideas and solutions with real users, we ensured our designs met their needs while also driving business outcomes.
- This iterative process helped us pivot quickly if required and continuously improve the experience.

By running these three tracks simultaneously, we stayed agile and adaptable, reducing the risk of misaligned solutions. This approach also fostered stronger collaboration between design, development, and business teams, ensuring everyone stayed focused on delivering tested, impactful results.

Reflection

This project underscores the strategic importance of a robust and tokenized design system in a multibrand environment. By aligning stakeholders, leveraging advanced tools, and prioritizing collaboration, we created a foundation that not only serves Sligro’s current needs but also positions them for future growth.

It was an honor to partner with Sligro Foodgroup on this transformative journey, contributing to their mission of delivering exceptional user experiences and maintaining a strong, cohesive brand presence across all platforms.

Let’s discuss how I can help your organization achieve similar success. Schedule a discovery call today!