Design System

Completed

Built a centralised design system, reducing the rework time per sprint and improving delivery times by 15%

Built a centralised design system, reducing the rework time per sprint and improving delivery times by 15%

Built a centralised design system, reducing the rework time per sprint and improving delivery times by 15%

AI Solutions

Client Acquisition

UX Research

Stakeholder Meeting

Impact Snapshot

🚀 15% Faster project delivery

through optimised Agile workflows tracked via Jira velocity charts

🎨 Centralized design system

improved iteration speed by 100+ hours, across Epics (t-shirt sizing estimates)

💼 New client acquired

across multiple teams and product lines. eliminating manual recreation

⚙️ 30-hour reduction

(measured via usability testing)

🎨 Improved accessibility

meeting business timeline goals

Impact Snapshot

🚀 15% Faster project delivery

🚀 15% Faster project delivery

through optimised Agile workflows tracked via sprint velocity charts

🎨 Centralized design system

🎨 Centralized design system

improved iteration speed across Epics (t-shirt sizing estimates)

⚙️ 30-hour reduction

⚙️ 30-hour reduction

in rework time per sprint (maintaining UI consistency across four web applications)

(measured via usability testing)

🎨 Improved accessibility

🎨 Improved accessibility

increasing efficiency by 40% and aligning with WCAG standards​​. (Burndown charts)

meeting business timeline goals

Note: Due to company confidentiality and data-sharing policies, I wasn’t able to keep documentation. These numbers were based on internal tools like Jira, Confluence, project observation, Burndown charts and Agile Sprint reports.

Team

UX Designers, Data Engineers, Developers, Project Managers

Conribution

Design System Development, Component Library, Cross-Team Collaboration, Accessibility Audits

Tools

Figma, Confluence, Jira, Miro, Notion

Timeline

2023 - 2024

Context

Resonance Labs required a unified design system to support its Virtual Assistant platform for large corporations. Engineers faced significant design inconsistencies across devices, impacting both usability and scalability. I led the development of a responsive, reusable design system using atomic design principles to create a cohesive visual identity that met business and accessibility standards.

Quick facts

  • Backstory: The platform’s fragmented design processes caused recurring rework, manual updates, and inconsistencies across applications.

  • The Problem: Developers and designers faced high rework rates, delayed sprints, and manual recreation of components. Inconsistent UI components, poor visual hierarchy, and lack of accessibility compliance reduced effectiveness and scalability.

  • What I Did: Developed a component library with scalable, reusable elements, reducing sprint rework and accelerating design processes.

  • Why: To provide a "single source of truth" for developers, boost efficiency and consistency across teams and reduce feature iteration times

  • Impact: Reduced design implementation time by 30%, improved accessibility compliance, and standardised UI consistency across platforms.

Impact Snapshot

🚀 15% Faster project delivery

through optimised Agile workflows tracked via Jira velocity charts

🎨 Centralized design system

improved iteration speed by 100+ hours, across Epics (t-shirt sizing estimates)

💼 New client acquired

across multiple teams and product lines. eliminating manual recreation

⚙️ 30-hour reduction

(measured via usability testing)

🎨 Improved accessibility

meeting business timeline goals

UX Process Snapshot

Research and analysis

Research and analysis

Research and analysis

I conducted a comprehensive UX audit of the Virtual Assistant's (VA) demo app and found critical issues, including poor responsiveness, visual inconsistencies, and ineffective UI practices. The fragmented design impacted user experience across devices, which presented risks to client engagement during demos.

To address these, I collaborated with cross-functional teams to ensure early alignment on project goals while leveraging preliminary research to anticipate user pain points.

Key Findings:

  • Users struggled with navigation and inconsistent component behavior across devices.

  • Accessibility guidelines were not adequately met, limiting usability for diverse user groups.

Design Solutions and Changes

Design Solutions and Changes

Design Solutions and Changes

Leading the project, I implemented Brad Frost's Atomic Design methodology to create reusable, scalable UI components. This approach significantly improved design efficiency and consistency.

My approach included:

  1. Component Library Development – Built and documented reusable components for UI consistency.

  2. Mobile-First Design – Developed responsive designs optimised for scaling from smaller to larger screens.

  3. Accessibility Enhancements – Introduced WCAG-compliant colour contrast and improved touch targets for usability.

  4. Collaborative Prototyping – Created interactive prototypes in Figma for stakeholder testing, reducing iteration cycles.

UX Process Snapshot

Research and analysis

Research and analysis

I conducted a comprehensive UX audit of the Virtual Assistant's (VA) demo app and found critical issues, including poor responsiveness, visual inconsistencies, and ineffective UI practices. The fragmented design impacted user experience across devices, which presented risks to client engagement during demos.

To address these, I collaborated with cross-functional teams to ensure early alignment on project goals while leveraging preliminary research to anticipate user pain points.

Key Findings:

  • Users struggled with navigation and inconsistent component behavior across devices.

  • Accessibility guidelines were not adequately met, limiting usability for diverse user groups.

Design Solutions and Changes

Design Solutions and Changes

Leading the project, I implemented Brad Frost's Atomic Design methodology to create reusable, scalable UI components. This approach significantly improved design efficiency and consistency.

My approach included:

  1. Component Library Development – Built and documented reusable components for UI consistency.

  2. Mobile-First Design – Developed responsive designs optimised for scaling from smaller to larger screens.

  3. Accessibility Enhancements – Introduced WCAG-compliant colour contrast and improved touch targets for usability.

  4. Collaborative Prototyping – Created interactive prototypes in Figma for stakeholder testing, reducing iteration cycles.

Key Takeaways

🛠 Collaboration is Key : Working with data engineers, developers, and project managers in Agile sprints reinforced the value of alignment and cross-functional teamwork to accelerate delivery timelines.

📊 Scalable Systems Drive Efficiency : Implementing a robust design system demonstrated measurable improvements in design iteration speed, leading to more efficient product development and reduced rework.

🎯 Adaptability and Problem-Solving : Addressing challenges such as miscommunication with siloed teams required agile thinking and proactive planning to keep the project on track.

This experience has solidified my expertise in developing scalable design systems that enhance both business outcomes and team productivity.

Other Projects:

Virtual Assitant

Designing a corporate Chat GPT for enterprise businesses

Case Study

FIVA

Improving aircraft maintenance workflows for aviation engineers

Case Study

Waakei

Transition a non-digital catering company to the web

Case Study

Movie Glu

How I redesigned Movie Glu's website, a movie data provider

Case Study

Would you like to get in touch? Drop me a line at

naomioalao@gmail.com