<aside> <img src="/icons/view_blue.svg" alt="/icons/view_blue.svg" width="40px" /> Preview link**: Storybook** Additional material available upon request

</aside>

While Witco was updating its product identity and shifting to React, they wanted to use this change as an opportunity to tackle their design system project. It was perfect timing, but they were unsure how to get started.

<aside> 👉 For a deeper dive, read the detailed unfold of this story (FR):

La mise en place de Play, le Design System de Witco

</aside>

Witco is an all-in-one platform for life at work. From meeting room and desk booking to occupant services, hybrid work management, analytics, and workplace ticketing.

Material produced

Design 👨‍🎤

• Insights from interviews
• Figma variables and styles synced from design tokens
• Components library
• Icons library
• Design specs

Engineering 👨‍💻

• Design tokens library in several formats
• React components
• Icons library
• SCSS framework
• Storybook
• Chromatic visual testing

Management 🤹‍♂️

• Strategy
• Manage expectations, prioritization, and roadmap
• Communication and evangelization
• Governance
• Defining OKRs
• Setting and monitoring KPIs

Overview

I joined Witco during an 8-month ride to build Play, the design system. I led the project from discovery to execution in 3 main phases:

1. Discovery and research
2. Execution of a quick Proof-of-Concept to learn together, from conceptualizing to shipping a component.
3. Iterative delivery

My responsibilities were threefold:

• Steering the project with the guidance of Galaxy (VP of Product) and the support from the Product Owners and Tech Leads.
• Designing the assets in Figma, enriched by feedback and challenges from Jérôme and Cédric, our Senior Product Designers, who rigorously tested the design system in features they were designing.
• Engineering, which ranged from architecting the mono-repository and packages to front-of-the-front-end development, particularly the styling of React components and design tokens. Here, I worked closely with Lilly, who handled logic implementation and ensured code quality, and Franco, who tested the components within the features in development.

Research

Grouping of insights gathered during the interviews