Design Fragmentation in a Multi-Brand Ecosystem

The Challenge

With a portfolio spanning multiple brands and products, the client faced challenges in maintaining consistency and efficiency across their digital experiences:

• Lack of a unified design language led to visual inconsistencies.
• Duplicated efforts in creating components for different brands, platforms, and features.
• Misaligned design and development processes slowed concept time-to-market.

The company needed a scalable design system that could:

• Standardise components and styling across all products.
• Reduce redundant work by enabling reuse of design elements.
• Align with their technology stack and product roadmaps.

The Solution

Jurnii’s Comprehensive Design System Development

Jurnii approached this challenge with a strategic and collaborative framework to deliver a design system tailored to the client’s needs.

1. Defining Component Requirements

We worked closely with stakeholders to understand the unique needs of each brand and product. This phase included:

• Development of a component library across verticals
• Identifying shared and brand-specific components
• Prioritizing core functionality for cross-platform usability

2. Integration of MUI Web Components

Leveraging Material-UI (MUI) as a foundation, we ensured all components adhered to modern UI/UX standards while supporting rapid development and the customisation needed for each brand/product.

3. Creating Atom and Molecule Structures

The design system was built using atomic design principles, breaking down components into:

• Atoms: Basic building blocks (e.g., buttons, inputs)
• Molecules: Combinations of atoms to form more complex components (e.g., form fields, cards)

This modular approach allowed teams to build consistent, scalable interfaces.

4. Defining Tech Storybooks for Implementation

We developed detailed tech storybooks to serve as a blueprint for developers. These storybooks provided:

• Clear documentation of component usage
• Interactive examples to accelerate onboarding and integration

5. Aligning with Product Roadmaps

We then went through the product roadmap and identified initiatives that could make use of the new design system. By integrating the design system into existing product roadmaps, we ensured seamless adoption across all teams, aligning design and development timelines.

The Outcome

A Unified Design System for Scalable Success

Our collaboration resulted in a singular design system that streamlined workflows and enhanced design consistency across the client’s ecosystem. Key achievements include:

• Universal Usability: The design system is usable across all brands and products, ensuring efficiency at scale — currently the new design system is used across >90% of site traffic.
• Enhanced Reusability: Features and components are designed and developed once across a single tech stack — rather than the three used previously.
• Faster Time-to-Market: Pre-built components and alignment with product roadmaps now enable quicker rollouts of new features and updates.
• Improved Collaboration: Designers and developers now operate within a shared framework, reducing friction and promoting innovation.

‍