UI Design and Design System Development for Complex Products

A Design System is a coordinated collection of design tokens, reusable components, documented patterns, and usage rules. It begins with UI Design as visual design: making the product's quality visible, differentiating it, translating brand values into the interface — the same visual world at every touchpoint. The Design System systematizes this design to ensure consistency across products and teams, reusing proven building blocks instead of redesigning them. For complex B2B products, it solves a specific problem: grown interfaces lose their coherence as product lines and requirements grow.

Splore develops UI Design and Design Systems for companies whose products are used in demanding professional contexts. The work begins where [research insights provide design criteria](/ux-research): What information needs to be visible in which situation, how are states and data communicated, what level of error tolerance is required? From these criteria, interfaces and the components, tokens, and documented patterns are created that make the design approach reproducible across the entire product family.

UI Design for Complex Products

At Splore, UI Design stands for visual design: The interface should reflect the product's quality, differentiate visually, appear innovative, and convey brand values. Additionally, the interface must prove itself in the usage context. Professionals in specialized applications work with dense information spaces — production overviews, diagnostic views, configuration dialogs with many dependencies. An interface must represent this density without overwhelming: through clear hierarchies, understandable state changes, and visual distinctiveness that works even after hours on the screen.

Splore designs interfaces for Product teams working in sprints. UI Design encompasses graphics, aesthetics, brand, and system. User feedback is incorporated but rarely takes center stage — except in matters of readability. Usability and conceptual questions are addressed in interaction design: a deliberate division of labor that sharpens both disciplines.

What a Design System Includes

The transition from validated prototype to systematized design occurs over four levels that build on each other:

**Design Tokens** define the fundamental design values: colors, spacing, font sizes, shadows. They form the common language between design and development.

**Component Library** contains the reusable building blocks of the interface: input fields, tables, navigations, dialogs. Each component is documented, with variants, states, and application rules.

**Patterns** describe recurring solutions for typical interaction situations: How are errors displayed? How does filtering work across multiple criteria? Patterns ensure that the same problems are solved the same way throughout the product.

**Documentation and Governance** regulate how the system is maintained and developed: Who can change components, how are new patterns incorporated, what happens in case of deviations?

Distinction from Style Guide

A style guide sets visual rules: color palette, typography, logo usage. A Design System goes beyond that. It defines not only how something looks but how it behaves, in which contexts it is used, and how design and code are interconnected.

Do you want to find out if a Design System makes sense for your products? Write to hello@splore.de.

Implementation and Governance

A Design System does not emerge in advance. It grows with the product. Splore recommends starting with the components that are most frequently used and most frequently implemented inconsistently. From this, a core set is developed, which is gradually expanded.

The introduction is successful when the development team supports the system from the beginning. Therefore, Splore works as a boutique consulting firm directly with development during the implementation phase: Design specifications are created in coordination with the technical architecture, components are jointly defined and approved. This creates not a handover artifact but a shared working tool.

Maintenance includes a governance structure: defined responsibilities, clear rules for changes and additions, regular coordination between design and development. Without governance, a Design System becomes outdated within a few quarters.

Example Projects

Krones: UI Design for the Connected HMI

Splore is responsible for the UI Design for Krones' central machine control. The service includes the visual design of the user interfaces for machines and systems and the development of a modular interface toolkit for various devices, integrated into the existing Krones Design System.

To the Case

Honic: UI System for a HealthTech Platform

For the HealthTech startup Honic, Splore develops and expands the 'HUI' — the Honic UI System with component library, design guidelines, and design tokens. Through a Figma component library, the HUI ensures consistency across three products — a deliberately lean but genuine system.

To the Case