< Back to Our Work

sclable
Our Design System approach

With our reusable, customizable components, we can deliver the ideal customer solution (and deliver it quickly)!
#UxUiDesign#ServiceDesign#CustomSoftware
Industry

Various

Client

Various

Services

Service Design,
UX & UI Design,
Custom Software Development

Instead of starting from scratch at the start of each project, our design system approach leverages proven experience and optimizes existing elements. This results in time and cost savings.

We’ve used a personalized health portal as a demonstration of our approach. You can see how our design system is structured and how, by employing key components, we can develop tailored, optimized solutions for our clients in a short amount of time.

Design modules from sclable’s design system approach showcased across multiple devices, highlighting seamless functionality and user-centric design.

Design modules displayed across devices.

How does a design system work?

A good UI design system allows teams to work efficiently, create consistent user experiences, and quickly respond to changing requirements.

Think of a design system like a modular kit, but better: It’s a method that allows us to save time and reduce costs by utilizing pre-designed, but highly adaptable, foundational components to craft an optimized final product.

At sclable we have developed our own neutral base design system, based on our extensive experience across numerous projects. It’s made up of different components that can easily be customized to fit the needs of our clients, their end-users, specific use cases as well as their branding.

Customer CI guidelines integrated with Sclable’s base design system modules to create the finalized application modules, ensuring a cohesive and tailored solution.

Customer CI guidelines integrated with Sclable’s base design system modules to create the finalized application modules, ensuring a cohesive and tailored solution.

“A well-crafted design system holds the power to influence decisions, shape perceptions, and drive behavior. It’s not just a tool for design-heavy B2C brands; in the B2B space, it becomes a strategic asset. By fostering consistency and clarity, a strong design system empowers users to make smarter choices, reduces operational costs, and enhances overall efficiency. In essence, it’s the backbone that turns complexity into simplicity and delivers measurable business impact.”

Michaela Holzmann
Director of Product & Service Design, sclable

The benefits of our design system

Built on an existing foundation

We don’t have to reinvent the wheel with every new project, saving time and costs during development and testing.

Consistent with brand identity

We can quickly adapt the neutral brand to reflect any company or product branding.

Simultaneous collaboration

We further reduce the time to go-live, by enabling parallel implementation between design and development teams.

Leveraging experience

We incorporate insights from our diverse projects directly into the development and optimization of new projects.

Tailored to your audience

Our flexible components guarantee a UI that’s ideally optimized for your target audience, no matter the industry.

Easy to use

We ensure an intuitive user experience with consistent, recurring elements. This allows users to quickly learn how to interact with the interface.

True accessibility

We design visual elements and set standards for text size, contrast and more to ensure key accessibility for all users.

Always up-to-date

Our well-thought-out design system is dynamic—it’s continuously developed to meet the evolving needs of our clients and keep pace with technological advancements.

Prime example:
A health portal

The goal of this portal is to reflect personal data and body measurements to users in a clear and easy-to-understand format. It should be done in a way that no prior medical knowledge is required to interpret graphics and data.

Text and background contrast ratio checks conducted to ensure accessibility compliance, reflecting sclable’s commitment to inclusive design.

Text and background contrast ratio checks for accessibility.

All of this was achieved in a short space of time thanks to our design system: colors, fonts, icons, design elements and the company logo are created once and then implemented everywhere in the portal. Existing components only need to be adapted and arranged accordingly. Everything is designed to be accessible. What’s more, the detailed documentation enables fast, smooth collaboration between design and development teams.

Core components of the healthcare design system
Foundational layout structure
Desktop and tablet layout adaptations
Mobile and wearable design variations

The four key components

Design fundamentals

This includes color systems, typography, spacing & grids, and iconography.

UI components

Everything from buttons, form and navigation elements, to text and image containers, pop-ups, and dialog boxes are considered here.

Interaction patterns

This covers how elements are displayed depending on user actions and conditions. Responsiveness (mobile, tablet, desktop) and accessibility also fall under this category

Documentation and guidelines

Style guides, UI component catalogs, and content guidelines for tone and language document everything clearly, ensuring consistency and ease of use.

By building with our design system, we ensure faster delivery, brand consistency, and top-notch user experiences across all devices and sectors.

Anatomical image credit: freepik.de

Next project: Future Health Lab Take me there