Société Générale× Devoteam
I helped AVENIR grow, the retail bank’s design system, used by 40+ designers and their developers.
When I arrived at Société Générale, AVENIR had existed for three years. The base was solid, but running out of steam. A single designer was answering 40+ designer users. No governance defined who decides what. And requests piled up until nothing could move forward.
Making it simpler for the design system team and the 40+ designers to talk.
Requests came in directly, unsorted. Every question interrupted the work in progress. The DS team spent more time answering than moving the design system forward.
With the team, I set up dedicated channels, weekly meetings and Jira tickets. Every request now follows a clear route.
The weekly open hours became a place where designers, product managers and developers could talk. Experienced designers gradually became design system ambassadors. A real community grew around the tool.
Tidying the Figma library so everyone finds their way at first glance.
Components were grouped by family. To find them, you had to know this internal classification. Newcomers got lost, and everyone lost time every day.
I sorted the library alphabetically, like the sidebar of the developers’ Storybook. Each component has its own page, with clear separators. Designers and developers finally speak the same language.
280+ size tokens so that everyone uses the same measurements.
When I arrived, there were almost no size tokens. Spacing, grids, corner radius and text sizes were set by hand, screen by screen. Every mobile or desktop version was redone by hand.
With the right tokens, the same screen goes from mobile to desktop in seconds. Adapting a screen became 4 times faster.
- 280+Tokens created: screen sizes, spacing, grids, radius, typography
- 1Single reference for spacing, with the same tokens on mobile and desktop
- 4×Faster to adapt a screen, once the tokens were in place
230+ colour tokens to go from two libraries to one, with two themes.
No rule said which colour to use, or where. Any colour could go anywhere. The result: two identical libraries to maintain in parallel, one for customers, one for advisors.
I reorganised everything. Each colour now has a precise role: status message, brand colour or interface. Each semantic token points to a primitive colour, and Figma switches from the customer mode to the advisor mode in one click.
185+ components rebuilt or created, easier to assemble.
Every rebuilt component follows the same logic. It does one clearly defined thing. It has slots so it can adapt. And it adjusts to the screen size on its own. Here are three examples.
The header and footer formed a single component. Their properties got mixed up with the sidebar’s and caused display errors. I split them: each one became simple to read and maintain.
The old Layout component had to plan for every possible combination. With slots, one component covers every case. Designers drop in what they need, without creating a new variant. Adapting to the screen size happens on its own.
- EX.01Header and footer split: clear properties, no conflicts
- EX.02Layout with slots: one component for every case, with tabs, steps or empty
- EX.03Automated patterns: variants in one click, no copies to maintain
A design system only helps if teams actually use it. I trained 40+ designers.
Every new version was presented in a live demo. Every component is documented in three places: Figma for designers, Storybook for developers, Zeroheight for detailed reading.
Designers no longer came just to copy components. They relied on the design system to think through their screens.
18 months, 4 versions released and a design system that holds up as the team grows.
Let’s work together.
Best fit: a Lead Design System role, permanent and remote. Or a targeted freelance mission: auditing what exists, setting up and supporting teams, organising design work.