UBC - Building a Scalable UI Audit System for Data-Driven Design Decisions

UI Audit

System Design

Web, mobile

figma, airtable

I led the audit of 6 key websites and designed a scalable system to help them track, visualize, and make sense of their UI landscape—setting the stage for more strategic decision-making. I built a structured Airtable base and linked it to a Figma reference system to cross-reference audit entries with live examples—making the system accessible, actionable, and extensible across teams.

I led the audit of 6 key websites and designed a scalable system to help them track, visualize, and make sense of their UI landscape—setting the stage for more strategic decision-making. I built a structured Airtable base and linked it to a Figma reference system to cross-reference audit entries with live examples—making the system accessible, actionable, and extensible across teams.

I led the audit of 6 key websites and designed a scalable system to help them track, visualize, and make sense of their UI landscape—setting the stage for more strategic decision-making. I built a structured Airtable base and linked it to a Figma reference system to cross-reference audit entries with live examples—making the system accessible, actionable, and extensible across teams.

Overview

UBC had an internal design team but they were struggling with system wide audit. They were looking to hire someone someone who could audit their site and give them a system to track their progress before jumping into a design system.

With over 50 websites owned by different UBC departments, design inconsistency had become a bottleneck—slowing development, compromising brand clarity, and complicating maintenance. Developers were rebuilding the same components differently, while users experienced jarring inconsistencies across sites. UBC was preparing to invest in a university-wide design system, but first needed clarity: which UI patterns were common, which were redundant, and where inconsistency was costing them.

Client

→

University of British Columbia

Timeline

→

3 Months

Role

→

Lead Product Designer (2-person design team)

Tools

→

Figma, Airtable, Chrome DevTools and Extensions

Client

→

University of British Columbia

Timeline

→

3 Months

Role

→

Lead Product Designer (2-person design team)

Tools

→

Figma, Airtable, Chrome DevTools and Extensions

Client

→

University of British Columbia

Timeline

→

3 Months

Role

→

Lead Product Designer (2-person design team)

Tools

→

Figma, Airtable, Chrome DevTools and Extensions

Objectives

→

Conduct a detailed audit to centralize inconsistencies across multiple websites into a single source of truth for informed design decisions.

→

Conduct a detailed audit to centralize inconsistencies across multiple websites into a single source of truth for informed design decisions.

→

Support better decision-making on which design elements to keep, update, or remove—for example, identifying redundant components or frequently used colors.

→

Support better decision-making on which design elements to keep, update, or remove—for example, identifying redundant components or frequently used colors.

→

Lay the foundation for a scalable design system that could support both current needs and long-term consistency.

→

Lay the foundation for a scalable design system that could support both current needs and long-term consistency.

→

Ensure the solution was simple enough for non-design stakeholders, scalable to support 50+ websites, and built with tools that fit UBC’s workflows and future plans.

→

Ensure the solution was simple enough for non-design stakeholders, scalable to support 50+ websites, and built with tools that fit UBC’s workflows and future plans.

💡

Meeting these goals wasn’t just about audit & documentation—it required building a system that could support strategic decisions beyond the initial audit. UBC didn’t just need a one-time audit—they needed a system they could evolve, scale, and rely on as they built a unified design system.

💡

Meeting these goals wasn’t just about audit & documentation—it required building a system that could support strategic decisions beyond the initial audit. UBC didn’t just need a one-time audit—they needed a system they could evolve, scale, and rely on as they built a unified design system.

My Approach

  1. Designing the Audit Backbone in Airtable

To create a sustainable and collaborative audit framework, I chose Airtable for its visual clarity, relational database structure, and ability to link records across multiple tables. This made it possible to cross-reference components, styles, and usage across different websites in a centralized, navigable system.

→

Designed a modular audit base with dedicated tables for Colors, Typography, Spacing, Components, and Site Overview.

→

Designed a modular audit base with dedicated tables for Colors, Typography, Spacing, Components, and Site Overview.

→

Set up cross-linked records to track where a component or color appeared across multiple sites—helping UBC instantly see duplication and prioritize consolidation.

→

Set up cross-linked records to track where a component or color appeared across multiple sites—helping UBC instantly see duplication and prioritize consolidation.

💡

Airtable gave UBC’s non-design stakeholders easy access to deeply technical information, organized in a way that allowed them to scale audits beyond our initial scope without compromising clarity.

💡

Airtable gave UBC’s non-design stakeholders easy access to deeply technical information, organized in a way that allowed them to scale audits beyond our initial scope without compromising clarity.

Example - Designed modular audit base with ready-to-use color, typography, spacing, & component documentation tables.

  1. Visual Groundwork in Figma

While Airtable served as the structured source of truth, Figma acted as the visual bridge. I used colour swatches in Figma to quickly spot patterns of redundancy and inconsistency, which made documenting in Airtable both faster and more accurate.

By grouping component variations in Figma and linking them to live site pages, I made inconsistencies instantly visible. This gave UBC stakeholders an intuitive way to compare patterns across sites without wading through abstract tables.

💡

Figma helped bridge visual intuition with structured data. It sped up my own documentation workflow and gave UBC a practical, visual layer they could reference as they moved toward system consolidation.

💡

Figma helped bridge visual intuition with structured data. It sped up my own documentation workflow and gave UBC a practical, visual layer they could reference as they moved toward system consolidation.

Collecting and mapping color swatches in Figma

Visual groundwork for component in Figma

  1. Color & Typography Audit

To capture not just what was visible on screen but how styles behaved across devices, I paired visual review with targeted tools. This approach revealed not only surface-level inconsistencies but also deeper design debt that was impacting performance, readability, and scalability.

→

Colors: Using CSS Peeper and ColorPick, I surfaced both active and legacy values buried in the CSS—many unused but still being loaded. This revealed hidden clutter that slowed performance and complicated maintenance decisions.

→

Colors: Using CSS Peeper and ColorPick, I surfaced both active and legacy values buried in the CSS—many unused but still being loaded. This revealed hidden clutter that slowed performance and complicated maintenance decisions.

→

Typography: I grouped text styles by family, weight, and line height, then used Inspect Mode to capture changes across breakpoints (e.g., 1400px vs. 375px). This exposed redundant styles—like headings differing by just 2px—and line height shifts that disrupted hierarchy and user readability.

→

Typography: I grouped text styles by family, weight, and line height, then used Inspect Mode to capture changes across breakpoints (e.g., 1400px vs. 375px). This exposed redundant styles—like headings differing by just 2px—and line height shifts that disrupted hierarchy and user readability.

💡

By combining tools with visual analysis, I made UBC’s design debt visible and actionable. The audit provided concrete evidence of where consolidation would improve clarity, user experience, and technical efficiency—helping the team move toward a scalable, system-wide type and color strategy.

💡

By combining tools with visual analysis, I made UBC’s design debt visible and actionable. The audit provided concrete evidence of where consolidation would improve clarity, user experience, and technical efficiency—helping the team move toward a scalable, system-wide type and color strategy.

Color Audit documentation in Airtable

Typography Audit documentation in Airtable

  1. Spacing & Component Analysis

Spacing and components turned out to be the most fragmented—and most critical—parts of the UI system. Inconsistent spacing scales and redundant component variants were slowing teams down and weakening visual coherence across the ecosystem.

→

Spacing: Using Inspect Mode, I captured detailed spacing values (padding, margins, and grid gaps) and tagged them with precise labels (e.g., top, bottom, grid-gap). This surfaced patterns and exceptions across layouts, providing the team with a clear foundation for defining consistent spacing rules in their design system.

→

Spacing: Using Inspect Mode, I captured detailed spacing values (padding, margins, and grid gaps) and tagged them with precise labels (e.g., top, bottom, grid-gap). This surfaced patterns and exceptions across layouts, providing the team with a clear foundation for defining consistent spacing rules in their design system.

→

Components: I documented each unique variation using BEM-style naming conventions to describe structure and states. Each entry tracked where the variant appeared, how many sites used it, and key state-level differences (e.g., hover/active behavior, 2-column vs. 3-column card).

→

Components: I documented each unique variation using BEM-style naming conventions to describe structure and states. Each entry tracked where the variant appeared, how many sites used it, and key state-level differences (e.g., hover/active behavior, 2-column vs. 3-column card).

💡

By making the scope of fragmentation visible, I showed the UBC team how a single component had splintered into multiple inconsistent versions—and what it would take to consolidate them. This clarity highlighted where consolidation would deliver the most impact: reducing design debt, improving performance, strengthening brand consistency, and streamlining design-to-development handoff.

💡

By making the scope of fragmentation visible, I showed the UBC team how a single component had splintered into multiple inconsistent versions—and what it would take to consolidate them. This clarity highlighted where consolidation would deliver the most impact: reducing design debt, improving performance, strengthening brand consistency, and streamlining design-to-development handoff.

Documenting spacing values in Airtable — tagged by intent and usage across components, making it easier for UBC to spot inconsistencies and define a scalable spacing system.

Airtable component audit, linked to an external base I built to review all components across UBC sites and their variants.

  1. Mapping Component Usage Across Sites

To help UBC see the bigger picture of inconsistency, I created a linked overview that showed how each core component appeared across different websites—and how many unique visual variants existed. For example, a single card component might have five different versions spread across four websites, each with slight differences in padding, typography, or button style.

I captured these side-by-side in Airtable with component names, visual references, and links to their live examples. This made it easy for the UBC team to see duplication at a glance and prioritize which components to consolidate or redesign.

💡

It’s hard to fix what you can’t see. This cross-site mapping gave UBC a concrete way to assess design debt, simplify their UI library, and move toward a more rational, scalable component system.

💡

It’s hard to fix what you can’t see. This cross-site mapping gave UBC a concrete way to assess design debt, simplify their UI library, and move toward a more rational, scalable component system.

Airtable component audit, linked to an external base I built to review all components across UBC sites and their variants.

  1. Enabling Scale: Documentation & Training

Recognizing UBC's desire to scale the audit internally, I created a complete training toolkit:

→

Step-by-step documentation on how to audit colors, spacing, typography, and components—written for both design and non-design contributors

→

Step-by-step documentation on how to audit colors, spacing, typography, and components—written for both design and non-design contributors

→

Training video walkthroughs covering the full process, from setting up Airtable to tagging patterns and inconsistencies

→

Training video walkthroughs covering the full process, from setting up Airtable to tagging patterns and inconsistencies

→

A pre-configured Airtable template, complete with filters, formulas, and tags, so any team member could continue the work without starting from scratch

→

A pre-configured Airtable template, complete with filters, formulas, and tags, so any team member could continue the work without starting from scratch

💡

This wasn’t just about documenting my work—it was about making the system sustainable. These materials gave the UBC team the clarity and confidence to continue scaling the audit without needing external support.

💡

This wasn’t just about documenting my work—it was about making the system sustainable. These materials gave the UBC team the clarity and confidence to continue scaling the audit without needing external support.

Step-by-step documentation for UBC team

Recorded demo videos in loom for UBC team

Outcome & Impact

→

Surfaced previously invisible design debt—such as over 6 nearly identical greys and multiple redundant components—giving UBC visibility into the true scale of inconsistency across their ecosystem for the first time.

→

Surfaced previously invisible design debt—such as over 6 nearly identical greys and multiple redundant components—giving UBC visibility into the true scale of inconsistency across their ecosystem for the first time.

→

Enabled data-backed decision-making for design system planning, including which colors to consolidate, which component variants to retire, and which patterns to standardize—turning vague pain points into concrete next steps.

→

Enabled data-backed decision-making for design system planning, including which colors to consolidate, which component variants to retire, and which patterns to standardize—turning vague pain points into concrete next steps.

→

Empowered the internal team to continue auditing and maintaining the system independently, using custom Airtable templates and training materials—ensuring the work had lasting impact beyond the engagement.

→

Empowered the internal team to continue auditing and maintaining the system independently, using custom Airtable templates and training materials—ensuring the work had lasting impact beyond the engagement.

→

Reduced complexity and duplicated effort across teams by introducing shared terminology, visual documentation, and reusable references—paving the way for a scalable, unified design system.

→

Reduced complexity and duplicated effort across teams by introducing shared terminology, visual documentation, and reusable references—paving the way for a scalable, unified design system.

💡

The system continues to be used as a planning and decision-making tool. It gave UBC the visibility they lacked to take system-wide action—and helped set the foundation for a unified design system built on real usage data.

💡

The system continues to be used as a planning and decision-making tool. It gave UBC the visibility they lacked to take system-wide action—and helped set the foundation for a unified design system built on real usage data.

My Contributions

→

Designed and led the entire audit workflow—turning loosely defined goals into a clear, repeatable, and scalable documentation system

→

Designed and led the entire audit workflow—turning loosely defined goals into a clear, repeatable, and scalable documentation system

→

Architected Airtable to track patterns across color, type, spacing, and components—while enabling cross-site comparisons that made inconsistencies easier to identify

→

Architected Airtable to track patterns across color, type, spacing, and components—while enabling cross-site comparisons that made inconsistencies easier to identify

→

Developed a visual reference layer in Figma, linking UI examples to audit entries and supporting visual exploration across teams

→

Developed a visual reference layer in Figma, linking UI examples to audit entries and supporting visual exploration across teams

→

Created training guides and walkthrough videos that helped UBC onboard internal contributors and scale the audit independently

→

Created training guides and walkthrough videos that helped UBC onboard internal contributors and scale the audit independently

→

Mentored a junior designer, helping them develop structure, judgment, and clarity around visual pattern analysis

→

Mentored a junior designer, helping them develop structure, judgment, and clarity around visual pattern analysis

💡

I defined the documentation architecture, selected the right tools, and led both the technical and visual audit strategy. As the primary point of contact for the client, I facilitated collaboration, aligned on deliverables, and ensured the system reflected UBC’s real-world needs. My goal wasn’t just to complete an audit—it was to build a sustainable process they could maintain long after handoff.

💡

I defined the documentation architecture, selected the right tools, and led both the technical and visual audit strategy. As the primary point of contact for the client, I facilitated collaboration, aligned on deliverables, and ensured the system reflected UBC’s real-world needs. My goal wasn’t just to complete an audit—it was to build a sustainable process they could maintain long after handoff.

Reflection

This project challenged me to design a system that could handle ambiguity, scale across teams, and teach others how to manage design debt more systematically. The real value wasn’t the audit itself, but showing UBC how to turn scattered inconsistencies into a structured foundation for long-term decisions.

We worked closely with the UBC team throughout—sharing early iterations, gathering feedback, and refining in collaboration. That partnership ensured the system reflected how they actually worked—not just how designers imagined it should work.

Looking back, I’d emphasize how important it was to design for adoption as much as accuracy. A perfect audit is useless if the client can’t run it themselves—this project reminded me that usability applies just as much to systems and documentation as it does to interfaces.

It’s the kind of work I’d love to do more of: high-leverage systems, cross-team collaboration, and the invisible UX that keeps everything running smoothly behind the scenes.

Artifacts Available on Request → Airtable templates, documentation PDFs, Loom videos, and Figma files.

Next →
West Fraser Redesign

Have an idea worth stitching together?

Say Hello →

Designed & Developed by Muneeba

linkedin.com/in/mu91ba

muneeba.design@gmail.com

Have an idea worth stitching together?

Say Hello →

Designed & Developed by Muneeba

linkedin.com/in/mu91ba

muneeba.design@gmail.com

Have an idea worth stitching together?

Say Hello →

Designed & Developed by Muneeba

linkedin.com/in/mu91ba

muneeba.design@gmail.com

Work
About
Contact
Work
About
Contact

Enter password to view case study