Footprint

6 months to present

Tools

Confluence and Jira
Xd, Medium

Resources

Medium, Material Design, Carbon Design, Spectrum,

I led the creation of a comprehensive Design System aimed at streamlining workflows, ensuring consistency, and enhancing scalability across the organisation’s digital products.

This initiative addressed challenges arising from inconsistent designs, fragmented tools, and inefficiencies in collaboration, enabling teams to work more cohesively while delivering a seamless user experience.

Expertise

UX, UI,
Strategic Thinking

Stakeholders

Business

End user

Engineering team
UX/UI team

Time

Problem Statement

The lack of a unified design framework created several inefficiencies, including:

— Inconsistencies in Design across Products
Variations in styles, components, and patterns led to a fragmented user experience.
Ensuring uniformity in design standards and maintaining quality control across diverse products required extensive coordination and buy-in from various teams, which often led to delays in achieving the desired cohesion.

— Inefficient Collaboration
Cross-functional teams faced difficulties aligning on design principles, delaying development timelines.
A key issue was the lack of a common language between engineers and designers, which led to misunderstandings and inconsistent interpretations of design goals. This communication gap hindered the smooth execution of the design system across teams.

— Scalability Issues
Without reusable components, scaling design efforts across multiple products became increasingly challenging.

These gaps not only impacted the quality of the user experience but also increased the time and effort required for design and development.

Goal

To address these issues, the Design System was developed with the following objectives:

— Consistency
Establish a unified visual language to ensure design consistency across all products. Creating a consistent company blueprint across all products and maintain quality control by creating a unique source of truth.

— Collaboration
Foster alignment among designers, developers, and stakeholders through shared resources and common language.

— Scalability
Create reusable components to accelerate the design and development process.

— Efficiency
Develop a framework adaptable to the needs of diverse projects and teams.

— Clear Decision-Making
Establish a well-defined process for proposing, reviewing, and implementing changes. This process should be open to feedback, ensure all voices are heard, and provide clarity on roles, responsibilities, and accountability.

Development Process

Research and Audit

I conducted an audit of existing designs and workflows to identify inconsistencies and areas for improvement. This included gathering feedback from designers, developers, and stakeholders to understand their pain points and requirements.

Collaboration and Feedback

Regular workshops and feedback sessions were held with cross-functional teams to refine components and ensure alignment with real-world use cases.

The development of the Design System followed a structured, collaborative approach:

Component Library Creation

Based on the audit, I designed a library of reusable components, adhering to accessibility standards and industry best practices. Each component was documented with guidelines for usage, ensuring clarity and ease of implementation.

Documentation

A comprehensive online repository was created, featuring detailed guidelines, usage examples, and updates to ensure accessibility and maintainability.

Tool Integration

The Design System was implemented in XD for design and Storybook for development, ensuring seamless integration with existing workflows.

Governance Framework

I developed a governance framework to ensure the effective maintenance, scalability, and alignment of the design system with organisational goals and evolving needs.

sample of the Design System user flow created in Miro to enable multiple team member input and review

sample of the Audit Journals created in XD and Confluence enabling multiple team member to test and document

Component Library Guide

A repository of standardised, reusable UI components such as buttons, forms, and navigation patterns.

Key Features

Prototyping Support

Ready-to-use components for rapid prototyping to accelerate the design and testing phases.

Documentation Hub

Comprehensive documentation to guide teams in using and implementing components effectively.

Governance Framework

A clear process for introducing new components, updating existing ones, and retiring outdated elements.

Accessibility Standards

Built-in accessibility compliance for all components to ensure inclusive design.

Consistency Enforcement

Clear rules and constraints to ensure products adhere to the design system’s standards.

Style Guide

A unified visual language covering typography, colour palettes, spacing, and imagery.

Impact and Results

The implementation of the Design System delivered significant improvements:

— Increased Efficiency
Reduced design and development time by 40% through reusable components and streamlined workflows.

— Improved Consistency
Enhanced user experience by ensuring a cohesive look and feel across all products.

— Enhanced Collaboration
Fostered better alignment between designers and developers, improving overall team productivity.

— Scalable Solutions
Enabled rapid scaling of design efforts for new products and features.

Reflection

Developing the Design System was a rewarding experience that underscored the importance of collaboration and iterative refinement. Key lessons included the value of engaging cross-functional teams early and ensuring the system remains a living document.

Future plans include expanding the Design System to accommodate emerging technologies and trends, conducting regular updates to incorporate feedback and improve functionality, and hosting training sessions to onboard new team members and reinforce adoption.

Additionally, we aim to fully integrate the system into Storybook to enhance accessibility and usability for both designers and engineers. While initial steps toward this integration have been made, it remains a work in progress. Achieving this will require close collaboration between the design team and the right engineering talent to ensure seamless implementation and long-term success.

Conclusion

The Design System has become an invaluable asset, driving efficiency, consistency, and innovation across the organisation. By aligning teams and creating a shared design framework, it has laid the foundation for long-term success and scalability in product design and development.