Verder – Design System
I designed a design system for Verder Scientific, a global group with multiple brands and products ranging from technical machinery to scientific software. The system standardizes design for products ranging from web applications to machinery interfaces, enabling faster development and consistent user experiences. I was the lead designer on this project and collaborated with two other designers, a developer and project manager.
Problem
Verder Scientific has around 30 software products among 8 brands. The products lacked consistency and a clear system. Each product was developed independently, resulting in inconsistent interfaces, duplicated effort, and user confusion. Different design teams used different design assets. Developers often worked without designers and guidelines.
Process
- Get feedback from designers, developers, and other stakeholders.
- Audit all interfaces, 30 interfaces from 8 different brands.
- Research common design systems, frameworks.
- Define scope, restrictions, and component list.
- Start with foundations, components and then styleguide.
- Create an example prototype to showcase the system and get feedback.
- Use the system for a real-world example, IOT Dashboard.
Solution
The new design system offers the following key benefits:
- Consistent design guidelines for all stakeholders.
- Faster go-live for future products through shared components for design and development.
- Easy brand switching is enabled by color tokens for future acquisitions.
Example Prototype
Design System Features
- 4 pixel grid for more flexibility in dealing with a variety of resolutions.
- Components with Figma variants, like easily adjustable buttons.
- Figma variables for consistent and easy color usage.
- Touch targets recommendations of at least 44 px or 1 cm for better usability.
- Accessibility considerations with contrast and font size following WCAG.
- Font sizes are categorized in S,M,L,… for easy usage.
- Documentation of components with types, size, states, and variants.
