SD WORX Design sytem
Timeline
2025
12 weeks
Workflow & Skill
Research interview
Synthesis
Design
Usability testing
Design token
Interaction design
Tools
Figma
Claude code
Team
Olivier André (Lead designer)
Jean Paul sauzier (Project manager)
Ashvish Moogarsing(Dev Lead)
Foundations
Token architecture, naming conventions, and component taxonomy.
Enablement
Documentation and workflows for non-design teams.
AI integration
Experimentation with AI to scale token creation, variants, and docs.
Context
A fragmented brand growing faster than its system.
SD Worx is one of Europe's leading providers of HR digital services, scaling rapidly across products, regions, and teams. That growth created a familiar tension: product and marketing were drifting apart visually, verbally, and operationally. Customer touchpoints — from a login screen to a campaign landing page — no longer felt like the same company.
Goals
Three pillars, one foundation.
Brand consistency
A unified visual and verbal system applied across 120+ products and 28 European markets.
Central documentation
A single source of truth for product, marketing, and brand — replacing scattered files, decks, and tribal knowledge.
Component management
A leaner, smarter component library with clear ownership, lifecycle, and contribution rules.
Brand consistency
Process
Specs and guidelines that bridge
design and engineering.
By closing the gap between how designers think and how engineers build. Clear tokens, documented components, and shared governance turn handoffs into pickups — and make every downstream product win possible.
Example of guidelines: Skeletal Layout Design
Step 1: Identify elements that have a skeleton loader
As previously stated, it is important to note that not all elements on a page should or can be replaced by a skeleton loader. It is recommended to identify containers that hold information that will be added dynamically as the page loads, such as a list of messages.
Don’t
Unnecessarily make elements look like they are loading. While skeleton loaders reduce the perceived waiting of a page, replacing elements that do not have or require a loading state with a skeleton loader. Users may be confused and the page may feel like it is loading unnecessary data thus making the page feel less performant.
Do
Target elements which contain information that will take time to load.
Step 2: Convert the design into a skeletal layout
When translating designs into a skeletal layout (different from a wireframe), it's important to not make the mistake of turning every element into a skeleton loader. Doing so will result in an overcrowded layout that lacks visual appeal.
Internal Communication • Survey
Employee Wellness Survey
Published Fri, 20 April 9:00 to 2108 users by Fran Kilgad
NL
EN
FR
DE
Published
Internal Communication • Survey
Discover our FIP plan
Published Fri, 20 April 9:00 to 2108 users by Fran Kilgad
EN
DE
Draft
Don’t
Internal Communication • Survey
Employee Wellness Survey
Published Fri, 20 April 9:00 to 2108 users by Fran Kilgad
NL
EN
FR
DE
Published
Internal Communication • Survey
Discover our FIP plan
Published Fri, 20 April 9:00 to 2108 users by Fran Kilgad
EN
DE
Draft
Do
Brand consistency
System Impact
The design system isn't a deliverable — it's a multiplier. Its value only becomes visible when product teams ship faster, brand teams stay consistent, and users feel the cohesion. Three cases below show how the foundation translated into measurable product outcomes across very different parts of the business.
40%+
Teams transitioned to the AI-assisted workflow
120+
Products and apps adopted the system
50%
Reduction in components (150 → 75)
28
European countries unified under one design language
Colour and semantic
Registration and login were duplicated across multiple SD Worx products, each with its own form components, error states, and visual treatment. Users moving between products encountered subtly different experiences — and engineering teams maintained the same logic in parallel.
Primary color
Blue 100
#ECF9FF
Blue 200
#D4F2FF
Blue 300
#B2E9FF
Blue 400
#7DDDFF
Blue 500
#40C9FF
Blue 600
#14ADFF
Blue 700
#0088FF
Blue 800
#006DD8
Blue 900
#0858A0
Blue 1000
#0A3561
Brand consistency
Design Tokens
Registration and login were duplicated across multiple SD Worx products, each with its own form components, error states, and visual treatment. Users moving between products encountered subtly different experiences — and engineering teams maintained the same logic in parallel.
Registration & Login Flow (input)
Registration and login were duplicated across multiple SD Worx products, each with its own form components, error states, and visual treatment. Users moving between products encountered subtly different experiences — and engineering teams maintained the same logic in parallel.
Screen designed with design system assets
Screen designed with design system assets
Registration and login were duplicated across multiple SD Worx products, each with its own form components, error states, and visual treatment. Users moving between products encountered subtly different experiences — and engineering teams maintained the same logic in parallel.
Do
Registration and login were duplicated across multiple SD Worx products, each with its own form components, error states, and visual treatment.
Do
Users moving between products encountered subtly different experiences — and engineering teams maintained the same logic in parallel.
SD Worx App: Booking Holidays
Registration and login were duplicated across multiple SD Worx products, each with its own form components, error states, and visual treatment. Users moving between products encountered subtly different experiences — and engineering teams maintained the same logic in parallel.
AI integration
Orientation Target
I designed the top up experience to be as effortless as possible. The values in the input and the tips react to usecases whether you are at the checkout or covering debt. And the auto top-up pushes it even further as you don't need to do anything manually at all
Unified system
Orientation Target
I designed the top up experience to be as effortless as possible. The values in the input and the tips react to usecases whether you are at the checkout or covering debt. And the auto top-up pushes it even further as you don't need to do anything manually at all
Learning
Balancing expression and functionality.
I've learnt that design systems live at the intersection of brand identity and usability. Every component must carry the brand's visual language while remaining functionally reliable for multiple product needs, it's a constant balance between consistency or brand distinctiveness.
Design, think and research across scale.
Working on a design system means thinking at every level simultaneously - from the smallest icon pixel to cross-product ecosystems. This taught me to zoom in and out constantly, stress-testing choices at both extremes.
Ambiguity = Opportunities
My internship began without a clearly defined project scope - and I came to see that ambiguity as a gift. Rather than waiting for direction, I took ownership: conducting research, identifying gaps, and proposing a path forward.
Design system rocks!
I truly fell in love with the scope, scales and breadth that a cross-product design system offers!