Kickoff
At first I started analysing the current library and got familiar with the projects using it. I talked to the designers and developers to better understand their particular needs. Common sense and best practices don't necessarily apply to enterprise software.
Improved color palette
The defined colors had shades for the brand color red and grey, but not for the other supporting colors. Also color contrast wasn't taken into consideration. The brand color is red, which is easily mistaken as an error state. I worked on an extended proposal of a color palette. It included shades for all colors, a WCAG compliant check, as well as the secondary color teal. [image color palette]
Token integration
The first big challenge was setting up a token structure. At that point this was a hot topic in the design system community. Everybody knew this is way to go, yet little companies already implemented it. I did an inventory on the current library, looking for common patterns in color, size, typography and other areas.
This was a great start for a mapping exercise. Together with our competence leads for design and frontend, we did several workshops on taxonomy and naming. It resulted in a first set of core and semantic tokens. We decided to exclude component tokens for now in order to keep the work load feasible on our small team.
The json files are in sync for code and design. In Figma, we make use of the token studio plugin, importing the json files. Those again are in sync with figma variables. This is easier to apply for our designers than working with a plugin.
Component discovery fase
For each new component I started a discover phase. We knew the basic features and properties from the previous library. But who wouldn't profit of this great opportunity to rebuild from scratch, challenging and extending those ideas?
Usually this exploration started with a quick inventory of existing use cases and a competitor analysis. Based on this, I did a first proposal and set up an API meeting to sync early on with development. If you want tokens to be in sync, it is so crucial to align the Figma implementation with the implementation in code.
Parallel I worked on little UI improvements of the component. In our biweekly design sync meetings, I asked for input and opinions of the designers and presented the work-in-progress.
For more complex components I set up small user testings. This way I could check if the designers are comfortable working with them. I learned that most designers in our company found nested slots too challenging to manage.
All those prep work as well as handover and guidelines is collected in a dedicated figma file per component.
Component design and handover
Once all details are defined and decided, I could add the component to the figma library. As mentioned I try to mirror the properties as much as possible to the component API. Some figma limitations and user comfort make the exceptions.
Back in the lab file I added guidelines and handover for the developer. A special shout out for the gorgeous plugin EightShapes Specs which is such a time saver!
UX documentation
Our documentation site currently runs on backlight. It works with basic markup language, which makes it easy for me to add pages, write and update content. The documentation starts with a one liner of the component. Then it provides some best practices and content guidelines. I was also helping setting up the general structure of our documentation site. I added content to the general pages.
Advocacy, communication and PR
In my role as designer for the design system, I helped promoting the design system for the designers. The design team at KatoenNatie is still very small. Luckily all designers already understand the added value of a design system. Still it is important to keep them involved and informed. They all contacted me directly if they need support or want to report an improvement or bug of a component. An ideal scenario!
Our Design OPS manager was the main contact for PR and selling. I supported him in setting up a communication strategy and creating sales pitch presentations. I have also set up a Viva Engage Community to promote Hexagon and announce our biweekly releases.
Building while scaling
As mentioned earlier, our previous library was made for information-heavy desktop applications. Our initial scope was to rebuild those components. Soon, new project teams approached us — keen to be early adopters. But their projects had a very different scope: mobile applications for in-field operators in the yards, touch screen kiosk applications, tablet applications for truckers.
All those contexts demand large click zones, big typography, and simple interface designs. The solution we landed on was a large sizing theme: scaling all dimension and typography tokens — size, padding, spacing — by a factor of 1.5. A relatively simple intervention that made the system work across a much wider range of form factors without maintaining a separate component library.
Results and pitfalls
Within a little more than a year's time we managed to release a solid version 1. This included rebuilding the entire old library. We added token support, enabling theming for light and dark. We even offer large size theming for automotive applications. The design library makes use of the latest figma releases. This includes nested component properties, booleans, variables synced with token studio, …). And the documentation site is a great way to find all information in one place.
Yet launching version 1 was only the beginning of a harder challenge. Growing adoption, supporting migration from the old library, and securing structural funding proved difficult to sustain.
Design systems are often misunderstood as a one-time delivery rather than a living product. The work below the surface — advocacy, support, onboarding — is where most of the value is created, and where most of the investment is missing. Distrust in the technology choices and limited buy-in from senior management added to the friction. In hindsight, the technical foundation was solid. The organizational conditions to let it thrive were not yet there.
Discover more projects