Aristid A design system to speak the same language.

Context

Aristid is a specialist in commercial communication for retail: the company helps supermarket and retail chains produce their promotional content, with a promotion management platform.

I joined on assignment for Frontguys, from September to November 2023, as Design System Product Designer. Several products coexisted, with interfaces that were not very consistent.

Problem

The different products suffered from visual inconsistencies. It wasn't a glaring pain point, but producing a new service took longer than it should have: each interface started over from scratch, or close to it.

The people working on the projects had no shared language: not visually, not on the goals to reach, and not on the tone of voice.

Goals

• Streamline and harmonize the interfaces of the different products
• Simplify and speed up the production of new services
• Give everyone involved a shared language: visual, goals and tone of voice
• Have designers and developers work in parallel

Approach and lessons

A simple weekly ritual. A tracking board listed the components ready to move into development. Each week, we planned the sprint with the components to build, then a sprint review at the end of the week took stock: what had been built, and what couldn't be finished moved to the next sprint.

Every component shipped with its documentation, and the mockups of the existing products were audited so we could start from what was already there.

Solution

An audit, then an atomic system

I started by auditing the mockups of the existing products. The design system is built on atomic components and tokens, gathered in a Figma library and replicated in a Storybook library: designers and developers start from the same building blocks.

Design × Dev sprints

I set up Design × Dev sprints to roll out the components with their documentation. A tracking board shows the components ready for development, and an end-of-week review measures progress.

Support for adoption

I supported two Product Designers, dedicated to creating the products, so that they would rely on the design system in their interfaces.

Results

More consistent interfaces, thanks to harmonization across the products.

Faster mockup creation thanks to the component library, and faster development thanks to the Storybook library.

Better overall productivity, driven by designers and developers working in parallel.

Reflections

• Simple rituals are enough to make design and dev work together. A weekly plan, a tracking board and a sprint review kept everyone aligned.
• A design system is also a shared language. Beyond the components, it aligned everyone on the goals and the tone of voice.
• Move in parallel rather than in a waterfall. Continuous collaboration between designers and developers improved productivity on both sides.