Introduction
Optimizing design workflows for Wehkamp’s growth
In 2022, Wehkamp’s acquisition of Kleertjes.com included plans to consolidate their codebase and explore sub-brands. I supported the design team by preparing the new design library and implementing a new way of working.
Project goals
Recreate the Wehkamp design library in Figma, including all components, text styles, and color tokens.
Set up a theming system to support multi-brand and multi-platform designs.
Train the design team on using Figma and the new design library.
Assist the design team with tasks for the Wehkamp app.
This file organization was established before Figma introduced native support for design tokens with Figma Variables.
Foundations
Creating a token-based design system
I organized a file with adjustable style elements (colors, typography, icons, imagery) for easy brand swapping. By assigning tokens based on functionality, variables could be easily switched between brands. I also set up a system for icon fonts in Figma, aligning with Wehkamp’s development use of icon fonts, allowing custom font sets for different brands. You can read more about this in the article I published on Medium.
Foundations
Building the interface elements and components
After defining the style tokens, I moved on to creating modular UI elements and components with interaction states, text alignment, and varying shapes. These components can accommodate any content type, such as a product carousel, content block, or hero banner.
Foundations
Creation of base templates
With the elements and components, we built core templates for all breakpoints, allowing easy transformation of key pages into different themes.
Documentation
Building knowledge with trainings and documentation
In the final phase, I concentrated on in-house training and documentation to ensure the design team fully understood the system. This included onboarding the team and product owners in Figma and creating detailed documentation on the system’s structure, making it accessible for ongoing iterations.
Highlights
Implementing a new brand in Figma now takes just 2 days
Wehkamp successfully added and launched 2 brands online.
Credits
Rico Mantel (Incentro)
Senior UX / UI Designer
Bas Hoppe (Wehkamp)
Senior Interaction Designer
Jim de Vlieger (Wehkamp)
Senior UX Designer