Building a design system– leading the creation of a design system for a legacy site.

The platform is a legacy live-streaming site with 40million visitors per month worldwide. The site was built by developers, with design playing a small and inconsistent role over the years in shaping the product. 

The problem
  • A lack of visual cohesion and overly complex UI. 
  • The site being difficult to navigate.
  • Inconsistent design components due to different interpretations of requirements.

Impact on the business
  • A stagnation in sales and traffic in recent years that has seen an injection of well-designed competitor sites.
  • Difficulties and added time cost in adding new features and redesigning inconsistencies.

The goal 🎯

  • Create a component library for the design team to be able to make quick mock ups of new features and maintain consistency going forward.
  • Integrate accessibility principles and guidelines by aligning with WCAG standards.
  • Build stronger alignment with the development team and QA– towards the creation of a Storybook design system.
  • Tidy up inconsistencies in the site.
Success metrics
Reduction in time designing features
Adoption of system in Figma
Reduction in number of bugs found per feature
Increased consistency in interface
Improved accessibility metrics

Challenges

  • Multiple stakeholders, each holding equal authority to provide sign-off or exercise veto power over specific product features.
  • A 100% remote team, with employees working in silos distributed across the globe.
  • Lack of clear ownership on decision making.
  • A number of confusing flows that revealed itself as we conducted our UI audit, some which we were instructed to redo. These topics often took precedence in our stand-ups, taking us off course our project and pushing back our timeline.

My approach

  • I emphasised a collaborative discovery phase to ensure collective buy-in and alignment.
  • Created a detailed roadmap and project plan to create structure.
  • Set a communication ritual with regular stand-ups to facilitate communication, track progress, resolve blockers quickly and importantly for us, maintain momentum.
  • Organised co-design sessions to facilitate alignment and collaboration.

Design 🎨

Phase 1

Deliverables: Figma file structure, versioning plan, base UI kit with design tokens and foundational elements
Phase 2

Deliverables: Documentation of platform critical flows, UI audit, component roadmap
Phase 3

Deliverables: Proof of concept component, established workflow for dev handoff, QA and documentation.

All other components would be completed with 2 week sprints where 3 components would be prioritised then handed off to development.

The journey

The journey was filled with challenges, from securing stakeholder feedback and sign-off, to managing absent team members. Midway, the development team began refactoring the platform’s legacy code, prompting us to move away from the our initial plan. Instead of halting progress, I took the decision to realign our component roadmap with theirs to stay a step ahead, while continuing work on a design system with the original project plan, that would for now, be adopted by the design team.

How did we do?

It was a challenge to keep the momentum of the project and not stray from the initial goal. The company has a notorious track record of abandoned half-completed projects, and at some points, it certainly felt like we were headed for a similar fate.

While platform-level improvements are still pending, the design team has reduced design delivery time by 40% since the adoption of the design system. This has enabled faster iteration on new features and allowed us to clear a backlog of design tickets.

It has also facilitated a smooth onboarding for our new junior designer and brought greater consistency to current designs. 

Reflection

It was a crash course in learning to manage the different requirements and considerations of developers and the business. This project has pushed me to consider broader impacts of design on the company, and taught me to stay flexible and adapt without losing sight of the bigger picture.

Take me home