PRODUCT SUSTAINABILITY MONITORING X DSM

Design System | UI/UX | Figma

During my UI/UX Design minor, I had the opportunity to attend a guest lecture by Toine Aerts, Senior Product Designer at DSM-Firmenich. He shared his experience working in UI/UX design within a large international company, and gave us insight into how DSM-Firmenich uses a Design System within Figma to keep their products consistent and on-brand across teams. As part of his session, Toine presented us with a real-world case to work on: How do you turn a manual, error-prone Excel workflow into a digital tool that fits a real design system?

THE CASE & PROCESS

UNDERSTANDING REQUIREMENTS

I started by unpacking the business requirements together with the stakeholder input Toine shared with us, feedback gathered from a Brand Manager, Product Owner, and Developer. Each stakeholder had a distinct priority: the Brand Manager emphasized strict adherence to the existing Design System ("it MUST be on brand"), the Product Owner wanted to scope the first version down to data entry only (search and edit functionality would come later), and the Developer's input pointed toward building a clickable prototype that would translate smoothly into development.

SKETCHES & WORKING IN DESIGN SYSTEM

I started by sketching out initial ideas for the flow, before diving into DSM-Firmenich's Design System in Figma. Working with an existing Design System was new to me, and getting started wasn't easy — I often found myself searching through the component library trying to find the right building blocks for what I had in mind. Once I got more familiar with the structure, I mapped out the fixed product hierarchy and chose the Perfumery & Beauty business unit as my working example. From there, I designed screens that clearly distinguish between pre-filled and missing sustainability data, with built-in error messaging and a success confirmation upon saving — all while staying consistent with the existing Design System, ready for further prototyping by a developer.