UX Design Engineering at Allegion

Auditing an Enterprise Design System and Proving It Could Power a Full Product Modernization

Timeline Summer 2026
Team 2 UX Design Interns · 2 Software Engineering Interns
Role UX Design Engineer Intern

Project Overview

I spent my internship at Allegion, a global leader in security products, embedded on a four-person cross-functional pod tasked with a single question: could the company's internal, Material Design 3–based component library realistically support one of its larger, older enterprise software products — not just the newer, smaller apps it was originally designed around? My role bridged UX design and front-end engineering: auditing the design system itself, designing and building the components it was missing, and using AI-assisted workflows to help rebuild a modernized, on-brand version of the product end-to-end.

Design Systems UX Engineering Heuristic Evaluation AI-Assisted Workflows Cross-Functional Collaboration Accessibility (WCAG 2.1 AA) Frontend Development

Because this work involves unreleased Allegion products, specific product and internal system names have been generalized throughout this case study. The scope, methods, and results described are accurately represented.

Project Context

Why the Design System Needed to Prove Itself

A mismatch between a growing internal design system and an aging flagship product set up the challenge for the summer

🧩
30+

Components in the design system audited against usability heuristics

🔍
76

Total usability findings identified across the library

👥
4

Interns — two designers, two engineers — sharing one pod and one repo

The Challenge

The design system had been built and validated against a handful of newer, smaller products. Meanwhile, one of the company's established enterprise applications was still running years-old visual and interaction patterns with no path to the modern brand. Before anyone could commit engineering time to a full rebuild, we needed to know whether the design system could actually hold up at that scale — and if it couldn't yet, exactly where it would break.

Auditing the Design System

🔎

Methodology

My design partner and I independently evaluated the full component library — 30+ atoms, molecules, and organisms — against Nielsen's 10 usability heuristics and Material Design 3's quality principles, adapted into six system-specific themes covering documentation, consistency, clarity of language, flexibility, contextual guidance, and inclusive design. We then synthesized our two independent evaluations into a single report, rating every finding on a four-point severity scale.

Severity Breakdown

11
Critical
37
Major
28
Minor + Cosmetic

Six Recurring Patterns

Individual findings kept tracing back to the same handful of systemic gaps

Critical

No Locked Specifications

Issue:

Several core components could be freely resized or stretched in the design file with no minimum or maximum constraints, which broke compliance with the system's own underlying spec and let every team implement the same component slightly differently.

Recommendation:

Lock frame dimensions anywhere the spec defines a fixed size, and add explicit min/max constraints anywhere flexible sizing is intentional.

Major

Missing Desktop & Cross-Platform Examples

Issue:

Documentation consistently claimed desktop and cross-platform compatibility, but almost every visual example only showed a mobile layout, leaving designers no way to verify how a component should adapt to a larger screen.

Recommendation:

Require both a mobile and a desktop example frame for every component, and explicitly note when the two layouts are meant to be identical.

Major

Inconsistent Terminology

Issue:

The same concept — emphasis levels, state names, sizing properties — was labeled differently from component to component, forcing designers to interpret intent rather than act on clear guidance.

Recommendation:

Create a shared terminology glossary and enforce it consistently across every component page.

Major

Undocumented Variant Use Cases

Issue:

Components with several visual variants rarely explained when or why a designer should choose one over another, which was especially confusing for less experienced users of the system.

Recommendation:

Pair every variant with a one-sentence use case and at least one in-context visual example.

Closing the Gaps & Building With AI

With the audit complete, the second half of the internship was about putting the findings to work — filling the system's gaps and using it to rebuild the legacy product end-to-end.

Custom Components

  • Designed, documented, and built 4 components the design system didn't yet cover
  • Wrote implementation specs for each so future teams could adopt them without reverse-engineering my Figma file
  • Iterated based on feedback from the design system's own maintainers before merging them in

AI-Assisted Build Pipeline

  • Chained together Claude Code skills and agents: one that mapped screenshots to design-system components before any code was written, one that audited generated markup against tokens and specs, and one that ran an accessibility pass against WCAG 2.1 AA
  • Cut build time on later, similar pages from roughly 9 minutes down to under 2
  • Reduced per-page AI cost by an estimated 2.6–3.3x once a matching skill existed for the pattern

Bug Reporting

  • Found and filed 9 implementation issues surfaced while prototyping — spacing, keyboard access, z-index conflicts
  • Reported additional issues in the design system's own documentation site
  • Several fixes were reviewed, merged, and shipped back into the shared library

Cross-Functional Collaboration

Halfway through the internship, two software engineering interns joined the pod to connect the rebuilt front end to the product's existing backend — which meant rethinking how design and engineering work were structured together.

How We Adapted

Our prototype and the engineers' backend work started out in separate repositories with incompatible folder structures — so we migrated the frontend work into their sandbox repo and re-architected around one shared structure. That let a designer and an engineer pair up on individual pages and go back and forth on implementation in real time, instead of working from a static handoff.

What Made It Work

1

Communication First

Unexpected blockers were constant — a clear plan and schedule were what let us adapt instead of stall.

2

Paired Accountability

One designer and one engineer per page kept both design intent and code quality honest.

3

Standardized AI Skills

Formalizing the skills used on both the frontend and backend sides was one of the biggest efficiency wins of the summer.

Impact

From Proof of Concept to Reference Implementation

By the end of the internship, the rebuilt product wasn't just a proof of concept anymore — it was evidence that the design system could support Allegion's larger, more complex products, not only the newer ones it had originally been built around.

🎨

~90% Design System Coverage

Nearly the entire rebuilt front end ran on the shared component library, up from effectively none in the legacy product.

🔌

~95% Built, ~85% Wired to Data

The pod built the large majority of the product's front-end pages, dialogs, and modules, and connected most of them to live backend data before handoff.

⏱️

12 Weeks vs. 1+ Year

The original product took over a year to build. This modernized proof of concept — audit included — took twelve weeks.

Next Project

Content Strategy for Harley's Hope Foundation