Roadmap for good design

What do your iPhone, the power grid, and the Swiss public transportation network have in common? Well, they just kind of… work. As a daily user of these systems, it’s easy to take for granted the highly sophisticated processes that allow them to run smoothly. 

Innosolv is the silent force behind many 'invisible' systems like these, by digitizing critical operations for cities, energy providers and church congregations. Their software – and its UI – is of systemic relevance; a misplaced button could have real consequences. With a solid, scalable design system, we helped them define an equally systemized approach to design, enabling them to make products that just... work.

Guardrails, not a straight jacket

Imagine a design system as a bustling city's road map, laying out paths, guiding us to destinations, but not defining how we drive. By introducing standards, it provides teams with a shared language and approach to design, liberating them to tackle the challenges that really matter. If strung too tightly, however, these 'guardrails' can limit the teams' ability to experiment and move quickly. Our task was crafting a system for Innosolv that balances standards with flexibility – communicating as an equal, simplifying without trivializing, standardizing without shackling.

Creating a design system that scales

In close collaboration with the engineering team at Innosolv, we carefully developed the concepts, foundational styles and components that make up a complete design system. The result is a guidebook, of sorts, which captures design decisions ranging from minute details like nested border radii and fine-tuned color contrasts, to larger artifacts, such as fully defined UI components and entire, standardized page layouts.

A library of design-decisions

The foundational styles of a design system are like paint on an artist's palette. The base values – color, typography, spacing, elevation, etc. each have a role, a meaning within the larger composition. These are our 'design tokens', small yet important design decisions that apply across the design of Innosolv’s software. Having the design’s base properties neatly classified like this, takes the guesswork out of development, as styling new interface elements becomes as simple as applying the defined tokens.

From light to dark at the flick of a switch

Users have come to expect a dark-mode in their applications. But it’s not just for show. Themes come with unique functional benefits, like low-light suitability or enhanced usability for those with visual impairments. In practice, making a dark-theme takes more than simply inverting its light counterpart. We put an obsessive level of care into fine-tuning colors and contrasts, to create a theme that doesn't just look great, but makes no compromises on usability either. 

A set of highly polished building blocks

Having set the foundational layer of the system, we continued by applying the defined rules to each one of Innosolv’s UI components, resulting in an extensive library of pixel-perfect building blocks which form the backbone of their tool's user interfaces.

A design system made to last

Working closely with Innosolv, we managed to create a design system that is as much theirs as it is ours and doesn’t simply exist for its own sake, but solves real problems in their product development process. It's a testament to our success that we could confidently pass the baton to Innosolv, knowing the system would stand firm and scale well. We're thrilled to have left our mark on Innosolv’s products, ensuring every pixel of their software carries the signature of good design.

Project facts

Project team