Now, as part of IONOS Group and active in six European countries, Strato is a leading German hosting and cloud-storage provider for businesses and individuals.
Problem
Without a unified design system, users faced inconsistent interfaces and accessibility barriers, while teams battled redundant work and delays across multiple countries and developer groups.
Solution
We implemented a scalable design system for both web and native app platforms, resolving inconsistencies, closing accessibility gaps, and streamlining design-to-development handoffs.
Impact
By leveraging Figma variables and collaborating with three development teams, we achieved 50% faster developer handoffs, 75% faster design cycles, and 90% WCAG 2.1 AA compliance.
Work Process & Methodology
During several months I used a Double Diamond innovation and design process, including User - Centered design and Design Thinking.
My Role:
UX/UI Design
Year:
2023-2024
Duration:
8 min read
For more details about the process, please scroll down.
Overview
With a team of 4 UX/UI designers and our Head of UX & Web Design we wanted to resolve widespread design fragmentation across Strato’s platforms. My focus was on the HiDrive Cloud Storage interface and establishing a single source of truth: a scalable, accessible design system in Figma. Over six months, I audited existing UIs, built an Atomic Library of 50 components, and partnered with three development teams to streamline workflows—ultimately cutting design time by 75%, developer handoffs by 50%, and achieving 90% WCAG 2.1 AA compliance.
Phase 1: Discover – Identifying the Problems
We began with a comprehensive audit of our UI and processes:
Tooling & file sprawl. Designs lived in Sketch, Adobe XD, and early Figma files. Ticket names, file locations, and component variants were impossible to track.
Component sprawl. Each of the three dev teams maintained its own button, form, and modal components—often with 36 px, 40 px, and 44 px variants for the same element.
Lack of documentation. No central guide meant designers repeatedly retraced decisions before moving forward.
Accessibility gaps. Color contrast issues, missing alt text, and inconsistent spacing left our UIs falling short of WCAG standards.
Slow handoffs. Developers needed extra drafts and lengthy notes for every component, slowing feature releases.
Key insight: Without a unified design system, we faced redundant work, brand drift, and a fractured user experience.
UI and Brand inconsistencies across all Strato’s platforms.
Nostandardized components and no documentation.
Pooraccessibility compliance (color contrast issues, non-uniform spacing, and missing alt text).
No centralized design system, causing redundant work.
The image below highlights only a few inconsistencies in the navigation bar (e.g., mixed labels, and layout differences). These issues are not isolated—similar inconsistencies exist across multiple web portals, HiDrive Cloud storage product, and country-specific versions (France, Spain, the Netherlands, Italy, Sweden, UK).
In the image below, we can observe in detail navigation bar inconsistencies in distances, menu heights, hamburger menu bar sizes, typography, and icon sizes.
Phase 2: Define – Strategy & Goals
In collaboration with stakeholders, we set clear, measurable goals:
Reorganize Figma files and folders to mirror Jira tickets for traceability.
Inventory all UI atoms, molecules, and organisms into a single Atomic Library.
Standardize typography, color, spacing, and components across web and native apps.
Achieve WCAG 2.1 AA compliance for all interface elements.
Scale the system to support responsive web, iOS/Android, and Windows/Mac platforms.
Streamline design-to-development handoffs via reusable components and live documentation.
I created tickets for core element sets—Color, Typography, Icons, Buttons, Snackbars, Notifications—and catalogued roughly 50 components for HiDrive.
Below in the image, you can see examples of the two segments presented in Figma pages. First, DS elements and second Components use the traffic lightsystem for easier orientation (red=nothing here; green=done; white=not available; yellow=in progress).
Phase 3: Develop – Building the Solution
Design System Foundations
Figma variables & variants. All colors, type styles, spacing tokens, and components were refactored into variants and variables for easy global updates.
Color palette consolidation. I reduced HiDrive’s 300-color palette to 60 optimized tones (light/dark), improving front-end performance and consistency.
Accessibility improvements. Contrast ratios were adjusted, and alt-text fields were added to every icon and image.
Documentation. Documenting the steps and purpose of components, helped all teams easy uasge of the system.
Naming conventions. Brought all the teams on the same page.
Example: Button Library
Sizes: Small, Medium, Large
Icons: Left, Right or Stand alone
Types: Primary, Secondary, Tertiary
States: Default, Hover, Disabled (with and without icons)
Total variants: 54 unique configurations in a single Figma component set
By consolidating button styles into one library, we cut the average design iteration from days to hours.
Below is the button redesign process.
Side-by-side comparisons of redesigned components (notifications, progress bars) highlight key improvements in visual hierarchy, accessibility, and interaction patterns.
Phase 4: Deliver – Implementation & Impact
Weekly syncs with all three dev teams, PMs, and stakeholders ensured alignment and rapid feedback.
75% faster design process (reduced redundant work).
90%WCAG 2.1 AA compliance achieved.
Stronger brand identity across web, mobile, and desktop.
Key Learnings & Future Improvements If I had a chance to do all this again, I would do the following steps:
Early developer collaboration. Align on naming conventions and semantic tokens before component design.
Early developer collaboration. Align on naming conventions and semantic tokens before component design.
Promoting design system benefits company-wide to improve adoption.
Conclusion
This design-system initiative transformed Strato’s fragmented UI landscape into a cohesive, accessible ecosystem. By centralizing components and documentation, we not only accelerated design and development workflows but also laid a scalable foundation for future growth. As a living organism, our design system continues to evolve—empowering teams to ship faster, maintain consistency, and deliver a superior user experience.
