Designing a cross-platform design system for a fragmented ecosystem
Legrand’s native apps, dashboards, and installer tools were built on ten different programming environments with no shared foundation. I created a unified design system in Adobe XD, built in light and dark mode, that reduced UX design effort by 65% and brought consistency across every platform.
Project details.
Lead Systems Designer
Led research, ecosystem auditing, system strategy, UX foundations, component architecture, motion, documentation, and pilot validation.
Cross-functional Team
Product design, UX research, engineering, product management, and stakeholders across Legrand product teams.
Multi-year engagement
Research and audit through system definition, product pilots, documentation, and adoption across consumer and installer experiences.
The Challenge
Legrand’s digital ecosystem had grown across consumer apps, professional installer tools, dashboards, kiosks, and connected-device experiences. Individual product teams had developed their own patterns over time, often within entirely different technical environments.
The result was not just visual inconsistency. Designers and engineers repeatedly solved the same interaction problems, accessibility standards varied by product, and teams spent time maintaining duplicate patterns instead of improving the customer experience.
The challenge was to determine what could be standardized across the ecosystem without forcing fundamentally different products and users into the same interface.
Understanding Why Teams Couldn't Scale
Before defining the system, I needed to understand whether the fragmentation was primarily a design problem, a technology problem, or an organizational one.
I conducted interviews, surveys, and workshops with UX, engineering, product, and other Legrand stakeholders to understand how teams built and maintained products, where they relied on reusable assets, and what prevented those assets from scaling across platforms.
What the Research Revealed
Teams wanted consistency, but worked across incompatible environments.
Developers supported reusable patterns, but products were built across technologies including Xamarin, Swift, Kotlin, Angular, and React.Small teams were maintaining large product ecosystems.
Most apps were supported by teams of only one to five people, making duplicate design and development effort particularly expensive.Reuse existed without shared standards.
78% of respondents already used reusable assets, but teams lacked common governance, documentation, and contribution models.Brand and product guidance was fragmented.
Updates were interpreted differently across teams, creating visual inconsistencies and slowing implementation.
Survey results from 16 Legrand stakeholders revealed small teams with limited design resources, heavy reliance on external support, and inconsistent capabilities across groups—underscoring the need for a unified system.
Survey data showed teams were under constant pressure to build and maintain apps, relied heavily on reusable assets without shared standards, and worked across a fragmented mix of technologies.
Product Decision:
Standardize the Rules, Not Every Interface
A single rigid UI library would not work across the entire ecosystem. A consumer lighting app and a professional power-management dashboard served different users, information densities, and interaction needs.
I focused the system on shared foundations and interaction rules that could remain consistent while allowing product-specific patterns where the context required them.
Shared across products: color logic, typography, spacing, iconography, accessibility, interaction states, and motion principles.
Adapted by product: information density, navigation models, specialized controls, data visualization, and workflows.
Mapping the Existing Product Ecosystem
With the organizational constraints understood, I audited Legrand’s existing digital products to identify where fragmentation was affecting users and teams.
The audit covered consumer apps, professional installer tools, kiosks, and dashboards across the Legrand family of products. I cataloged repeated patterns, platform-specific behaviors, accessibility issues, and areas where visually different solutions were solving the same underlying problem.
The audit surfaced five recurring issues:
Device diversity: Products operated across mobile, tablet, web, kiosk, and specialized installer contexts.
Pattern duplication: Navigation, forms, lists, cards, and controls appeared in multiple variations.
Design debt: Similar solutions had been recreated independently across products.
Accessibility gaps: Contrast, spacing, labeling, and interaction behavior varied by platform.
Brand fragmentation: Related products did not consistently feel like part of the same ecosystem.
Audit of Legrand’s ecosystem revealed fragmented apps across brands and device types, with overlapping tools in lighting, power, audio/video, and network management.
Comparing repeated patterns across products revealed where teams were independently solving the same interaction problems and where differences were driven by genuine product needs.
Establishing the Rules Every Product Could Share
The audit showed that Legrand did not need every product to look identical. It needed a common set of rules that made products feel related, behave predictably, and meet the same quality standards.
I defined the foundational layer of the system around the decisions that could remain stable across platforms:
Color — Created semantic palettes for light and dark environments, brand expression, functional states, and accessibility.
Typography — Defined a shared hierarchy that could scale from consumer interfaces to dense professional dashboards.
Iconography — Standardized stroke, sizing, grid, and usage rules across more than 300 assets.
Spacing and layout — Established consistent spacing logic that could adapt across different screen sizes and information densities.
Interaction states — Defined shared hover, active, focus, error, and disabled behaviors.
Semantic color rules supported both light and dark product environments while maintaining consistent functional meaning and accessibility requirements.
A shared type hierarchy created consistency across products while accommodating the very different density requirements of consumer and professional interfaces.
I standardized more than 300 icons around a shared grid, stroke, sizing, and usage model, reducing duplicate assets and allowing the same visual language to carry across products.
Creating Consistent Behavior, Not Just Consistent UI
Visual consistency alone would not make Legrand’s products feel like one ecosystem. Navigation, device controls, panels, alerts, and state changes also needed to behave predictably.
I created a shared motion language that defined how interface elements entered, exited, shifted, transformed, and revealed information across products.
Easing system — Established consistent timing and acceleration patterns.
Motion vocabulary — Defined four reusable behaviors: Transformation, Shift, Fade, and Cover.
Prototype validation — Used low- and high-fidelity prototypes to test pacing and behavior in realistic product scenarios.
Engineering specifications — Documented timing, sequencing, and easing so motion could be implemented consistently.
Turning Shared Rules Into Reusable Product Patterns
Once the foundations were established, I translated the most common interaction patterns into reusable components for consumer apps, dashboards, and installer tools.
Components were designed to preserve shared behavior while accommodating different device types, information densities, and technical environments.
Cross-platform behavior — Core interaction logic remained consistent while layouts adapted to mobile, web, kiosk, and installer contexts.
Documented anatomy — Components defined required elements, optional content, and structural relationships.
Accessibility — Contrast, spacing, labeling, focus, and state behavior were built into the patterns.
Interaction states — Hover, active, error, disabled, and other states followed shared system rules.
Controlled flexibility — Variants accommodated legitimate product differences without encouraging teams to create new patterns unnecessarily.
Validating the System in Real Products Before Scaling
Rather than rolling the system across Legrand immediately, we validated it through targeted product pilots. This allowed us to test whether the shared foundations and components could survive very different users, devices, and technical environments before asking more teams to adopt them.
Product Decision:
Prove the Extremes First
Instead of validating the system on two similar products, I used pilots with very different requirements: dense professional dashboards and simplified consumer controls.
If the same foundations could support both extremes without compromising usability, we could scale the system with greater confidence across the products in between.
Middle Atlantic and Raritan dashboards were dense, data-heavy tools used for device monitoring and management. They tested whether the system could support complex information, real-time status, and professional workflows in both light and dark environments.
Professional installer dashboards
Consumer applications
Consumer apps tested the opposite end of the spectrum: guided onboarding, lighting and shade controls, and interactions where simplicity, accessibility, and immediate feedback were critical.
Designing for Adoption, Not Just Delivery
A shared library would not solve Legrand’s fragmentation if teams continued creating patterns independently. I defined documentation and contribution guidance to help teams understand when to reuse an existing pattern, when to extend one, and when a product-specific solution was justified.
The governance model focused on:
Clear ownership of shared foundations and components.
Documentation for anatomy, behavior, accessibility, and usage.
A contribution path for new patterns and product-specific needs.
Review checkpoints to prevent duplicate components from entering the system.
A shared process for evolving patterns as products and technologies changed.
This allowed the system to grow without recreating the fragmentation it was designed to solve.
Legrand reinforced that a successful design system is not defined by how many components it contains. Its value comes from giving different teams enough shared structure to move faster without erasing the needs of their individual products.
The hardest decision was determining where consistency created value and where standardization would create new constraints. A consumer lighting app, a kiosk, and a professional power-management dashboard should not behave identically—but they can share the same foundations, accessibility standards, interaction principles, and product language.
Research, auditing, and pilot validation helped us define that boundary before scaling the system. The result was a foundation that reduced duplicate design effort while remaining flexible enough to support different platforms, technologies, and users.
Reflection
10
Programming environments supported by a shared design foundation
65%
Reduction in UX design effort
4
Major platforms supported: iOS, web, kiosks, and installer tablets