Summary

I led UI improvements and contributed to developing a scalable design system for Strato’s web and app platforms as part of a team of 4 UX/UI designers and our Head of UX & Web Design.

My specific responsibility was improving the HiDrive cloud storage UI and aligning it with the main brand. This initiative addressed UI inconsistencies, accessibility gaps, and inefficiencies in design handoff.

By using Figma variables and working with three development teams, we improved consistency, reduced design time by 75%, accelerated developer handoffs by 50%, and enhanced accessibility by up to 90% to meet WCAG standards.

Phase 1: Discover – Identifying the Problems

The Challenges

The HiDrive Cloud storage was designed using various tools such as Sketch, Adobe XD, and finally, Figma. Additionally, the working methods were inconsistent. The ticket's name and the files' locations were hard to follow in Figma. Most of the components required additional drafts with explanations for developers.

Furthermore, at the company level, there are three developer teams, each with its own way of naming and building components. This means that almost every component had three variations, and no one knew which was the right one. For example, what is the height of the button for the desktop? Is it 36px, 40px, or 44px? This was a daily struggle. In summary, a lot of repetitive and frustrating work that took much longer than anticipated, often resulting in several follow-up tickets.

Within the design team, there was almost no documentation regarding why certain tasks were handled in specific ways. This necessitated retracing steps in the process to rediscover certain decisions before the work even reached the developers. The design process encountered confusion, inconsistencies, time delays, redundant tasks, and accessibility issues, all due to the absence of a centralized design system across platforms.

‍

• UI and Brand inconsistencies across all Strato’s platforms.
• No standardized components and no documentation.
• Poor accessibility compliance (color contrast issues, non-uniform spacing, and missing alt text).
• Inefficient design-to-development handoff, slowing feature releases.
• 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

Project Goals

✅ Organize files and folder structure in Figma aligned with Jira tickets.

✅ Create an inventory of design elements such as Atomic Library.

✅ Achieve visual consistency across all platforms.

✅ Improve accessibility to meet WCAG 2.1 AA standards.

✅ Create a scalable design system that supports responsive websites, and for HiDrive Cloud storage, (iOS & Android), and (Windows, Mac) apps.

✅ Speed up development with reusable components and clear documentation.

‍

I initiated doing several tickets that would cover basic UI improvements for the Color system, Typography, Icons, Buttons, and, as an example of a few organisms Snackbars and Notifications, all for HiDrive Cloud. It resulted in connecting it into an inventory of the basic elements and components for all Strato platforms. It became an atomic library, including atoms, molecules, and organisms with approximately 50 components.

‍

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 light system for easier orientation (red=nothing here; green=done; white=not available; yellow=in progress).

‍

Phase 3: Develop – Building the Solution

UI & Accessibility Improvements

• Standardized typography, color palettes, spacing, and button styles.
• Improved contrast ratios and added alt text for images/icons.
• Adopted Figma variables for a scalable, component-based approach.

As one example of the amount of work it took for HiDrive Cloud, I reduced its color palette from 300 tones to just 60, optimizing options for both light and dark modes.

This change resulted in several benefits:

1. Faster front-end performance
2. More efficient design-to-development workflows
3. Improved accessibility compliance
4. Consistent branding and UI across platforms

Below is the button redesign process, resulting in the button library offering 3 sizes, states (with icons), and types (primary/secondary/tertiary) with dark mode. Built as Figma variants and variables, its 54 configurations ensured consistent, accessible, and efficient UI workflows.

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

Collaboration & Handoff

• Aligning with three dev teams on consistent component usage.
• Conducted weekly syncs with developers, PMs, and stakeholders.
• Implemented a phased rollout:
  ‍
  1️⃣ Unifying components across platforms.
  2️⃣ Introducing new UI enhancements.
  3️⃣ Integrating IONOS variables for dual-brand scalability.

‍

Impact & Results

🚀 50% faster developer handoff (streamlined component library).

‍🚀 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:

‍🔹 Earlier collaboration with developers on semantics & naming conventions.
🔹 More engagement with marketing to align branding efforts.
🔹 Ongoing iteration on Figma documentation & accessibility best practices.
🔹 Promoting design system benefits company-wide to improve adoption.

‍

‍

‍Conclusion

‍This project enhanced Strato’s UI consistency, accessibility, and efficiency.

The design system is now a foundation for future scalability, ensuring faster design cycles, better developer collaboration, and an improved user experience. As it is a living organism, it is still growing and evolving.

‍

‍