Scaling Design at La Redoute

2. Creating Buy-In Through Advocacy

With a clear understanding of stakeholder needs, the next step was to align teams around the Design System’s value. Advocacy efforts emphasized its potential to enhance collaboration, streamline workflows, and improve consistency:

• Engaging Presentations: Tailored presentations demonstrated the system’s benefits, focusing on how it would address pain points and enhance deliverables for each team.
• Practical Use Cases: Real-world examples showcased the system’s immediate impact on workflows, reinforcing its relevance and necessity.
• Customized Messaging for Key Audiences:
  • Developers: Promised smoother handoffs, fewer errors, and increased velocity.
  • Designers: Offered consistency, clarity, and creative freedom within a structured framework.
  • Leadership: Highlighted long-term efficiency gains and ROI.

Through these efforts, stakeholders began to view the Design System as a shared tool for achieving both individual and organizational goals.

3. Workshops to Build Alignment

Workshops played a pivotal role in fostering collaboration and creating a shared sense of ownership:

• Product Architecture Sessions: Explored user journeys and workflows to identify redundancies and inefficiencies.
• Library Consolidation Workshops: Unified fragmented libraries into cohesive systems with clear ownership and governance.
• Process Integration Workshops: Ensured the Design System was embedded into the product lifecycle, from discovery to delivery.

These workshops not only aligned teams but also demonstrated the Design System’s role as a catalyst for improved collaboration and efficiency.

By taking a strategic and empathetic approach, this initiative laid a strong foundation for a Design System that directly addressed stakeholder needs while fostering a culture of collaboration and innovation.

2. Foundational Redesign and Tokens Implementation

The redesign of the foundational elements ensured the Design System was accessible, scalable, and rooted in best practices:

• Algorithmic Foundations for Accessibility: Developed a color system using LCH-based scales, significantly improving contrast ratios and adhering to modern APCA accessibility standards. This provided better visibility and usability across a range of digital interfaces.
• Device-Specific Typography: Introduced a responsive font scale to enhance readability and aesthetic consistency across devices, tailoring sizes for Web, iOS, and Android platforms.
• Optimized Iconography: Migrated to stroke-based SVG icons, reducing file sizes for faster performance and greater versatility in usage.
• From Foundations to Tokens: These foundational improvements were translated into a comprehensive system of design tokens, covering typography, spacing, colors, and interaction states. These tokens provided a unified framework for ensuring consistency across platforms and simplifying updates.

3. Component Libraries and Design Tokens Management

A core achievement of the initiative was the iterative development of component libraries and the technical implementation of design tokens, ensuring scalability and alignment across teams and platforms:

• Phases of Component Consolidation and Refinement:
  • First Phase: Merged fragmented libraries from different squads into separate Web and App libraries. This step addressed immediate redundancies and gaps, creating a more consistent structure across teams.
  • Second Phase: Unified these libraries into a single cross-platform library, enabling seamless collaboration and ensuring consistency across Web and App design needs.
  • Third Phase: Just before my departure, a visual redesign phase was initiated in collaboration with an external agency. I played a key role in supervising the agency to maintain La Redoute’s vision while ensuring high standards for delivery quality, web accessibility, and design consistency.
• Technical Implementation of Design Tokens: Collaborated closely with developers to transition foundational tokens (e.g., colors, typography, spacing) into semantic tokens mapped to functional use cases. This collaboration streamlined workflows and enhanced the usability of tokens in both design and development environments.
• Establishing Governance for Contribution and Maintenance: Introduced a multi-level library contribution system to ensure scalability and adaptability:
  • Local Libraries: Enabled personal or squad-specific experimentation and iteration.
  • Team or Thematic Libraries: Provided shared components for specific team needs or themes, such as seasonal marketing campaigns.
  • Global or System Libraries: Centralized reusable components and assets governed by the Design System for organization-wide consistency.
• Continuous Advocacy and Support: Hosted regular Design System Office Hours to provide ongoing support, answer questions, and gather feedback. These sessions reinforced engagement and facilitated continuous improvement.

This comprehensive approach ensured that the component libraries and design tokens evolved as dynamic, scalable assets, capable of supporting both short-term and long-term goals across La Redoute’s diverse teams.

4. Tools and Process Optimization

Enhancing tools and workflows was critical for ensuring seamless collaboration, improving efficiency, and maintaining the high quality of deliverables across La Redoute’s teams.

• Storybook for Native Apps: Successfully introduced Storybook for Native, overcoming significant technical challenges to enable component visualization and testing across web and native platforms. This integration bridged gaps between design and development teams, ensuring consistency across environments.
• Automated Q/A with Chromatic: Integrated Chromatic into the workflow, introducing automated visual regression testing. This allowed for faster validation of design consistency, reducing errors and streamlining the quality assurance process.
• Comprehensive Documentation: Delivered a robust documentation framework designed to guide designers, developers, and studio teams. This documentation provided:
  • Clear guidelines on utilizing the Design System effectively.
  • Steps for onboarding new team members quickly and efficiently.
  • Accessible references for maintaining system consistency over time.

These optimizations collectively supported La Redoute’s broader Design System initiative, enabling seamless cross-functional collaboration and ensuring a scalable and efficient workflow across web and app platforms.

3. Design-to-Development Handover and Process-Driven Collaboration

Ensuring seamless collaboration between design and development required a combination of rigorous methodologies, optimized tooling, and shared rituals that aligned teams at every stage of the design-to-delivery pipeline.

• Structured Design Methodologies: Advocated for a disciplined approach to design, emphasizing pre-mockup artefacts to enhance early alignment and reduce costly iterations:
  • Feature & Benefit Identification: Defined the purpose and value of each feature to align stakeholders from the outset.
  • User Journey Mapping: Charted end-to-end user experiences to identify friction points and opportunities.
  • Information Architecture & Priority Guides: Prioritized content and interactions, focusing on usability before diving into high-fidelity mockups.
  • Rapid Iterations on Low-Cost Artefacts: Encouraged quick iterations on wireframes and IA to streamline feedback cycles, saving time and cost while ensuring faster team alignment.
• Streamlined Design-to-Development Handover: Introduced rituals to bridge the gap between design intent and technical execution:
  • Walkthrough Sessions: Held pre-handoff walkthroughs to clarify design intent, address technical constraints, and minimize rework.
  • Figma’s Dev Mode Advocacy: Promoted consistent use of Dev Mode to simplify handoffs, ensuring all annotations were easily accessible and actionable by developers.
• Integrated QA as a Design Ritual: Formalized designer participation in QA processes, validating adherence to design specifications and maintaining quality across platforms.
• Refined Operational Workflows: Partnered with Product and Tech leads to embed Design Ops principles into agile rituals, including:
  • Backlog Grooming: Ensured design tasks were aligned with development priorities.
  • Sprint Reviews: Incorporated design feedback loops to refine deliverables and foster collaboration.

By combining these practices and tools, the initiative fostered stronger alignment, minimized miscommunication, and improved delivery timelines, positioning La Redoute’s teams for sustained success.

4. Knowledge Management & Training

Centralizing and sharing knowledge was essential to ensure the sustainability of Design Ops initiatives and empower the team to work more effectively:

• Comprehensive Figma Training: Tailored workshops were designed to cater to a range of roles within the organization, from designers to stakeholders viewing files. These sessions covered:
  • Advanced design techniques such as component overrides and token-based styling.
  • Best practices for Figma file organization and collaboration.
  • Hands-on guidance for navigating and utilizing Figma’s powerful features, ensuring consistency and efficiency across all teams.
• Centralized Documentation Framework: A robust and accessible documentation framework was developed to support operational knowledge sharing:
  • Processes for maintaining up-to-date guidelines on tools, workflows, and Design System components.
  • Easy access for all team members, ensuring they had the resources to contribute and align with ongoing initiatives.
• Onboarding for New Team Members: Tailored onboarding programs were introduced, integrating tool mastery, end-to-end design processes, and cross-functional collaboration principles. These programs ensured that new hires could quickly adapt to their roles and align with organizational workflows.

By creating a strong foundation of knowledge sharing and skill-building, these initiatives strengthened team collaboration, reduced onboarding time, and improved alignment with Design Ops practices.

5. Advocating for Scalability and Future Growth

Positioning Design Ops as a strategic enabler required demonstrating its value and building scalable systems for the future:

• Reusable Frameworks for Scalability:
  • Modular workflows were introduced to adapt to future needs, whether for new product launches or branding updates.
  • These workflows ensured that design and operational processes could evolve with the organization, maintaining relevance and efficiency.
• Demonstrating ROI to Leadership:
  • Success metrics, such as reduced delivery timelines and improved design quality, were tracked and presented to leadership.
  • These metrics showcased the impact of Design Ops on the business, advocating for continued investment in tools, training, and processes.
• Embedding a Culture of Continuous Improvement:
  • Feedback loops and retrospectives were established as part of the Design Ops framework, fostering a mindset of iteration and growth.
  • Teams were encouraged to experiment and refine workflows, ensuring adaptability to emerging challenges and opportunities.
• Future-Proofing Through Strategic Design Ops:
  • Collaborated with leadership to integrate Design Ops into long-term organizational strategies, ensuring its impact extended beyond immediate projects.
  • Prepared teams for scalability by embedding practices that could support growth across teams, products, and markets.

These efforts ensured that Design Ops at La Redoute was not just a solution for immediate challenges but a foundational system for driving sustained organizational growth and innovation.