Waypoint AI

Clean Code, Happy Devs: How Systematic Design Thinking Cut Design Debt by 30%

B2B

Design System

Data Visualization

Project details

Role :

Tools :

Team :

Client:

Product Designer

Figma, Notion, Storybook

Frontend Developer, Product

Waypoint AI

5 second takeaway

Problem

Inconsistent UI components slowed development and confused users as AI features rapidly expanded.

Solution

Rebuilt component system using Atomic Design principles with proper accessibility standards.

Outcome

30% reduction in design debt, faster feature development, and improved user experience.

impact

Numbers That Matter

The human stories were even more compelling. A developer who had previously spent hours recreating modals now implemented complex features in half the time

30%
reduction in design debt across the platform

40%
faster feature development for teams using the system

0
‍accessibility regressions in new feature releases

introduction

Escalation agent having an escalation

Waypoint AI was rapidly expanding its AI capabilities, but this growth created inconsistencies in the user interface. The "ship now, standardize later" approach had resulted in a fragmented experience.

"Our Tailwind foundation crumbled under rapid growth, with each new feature introducing inconsistent components that confused users and slowed development."

Research & Investigation

So why was it needed?

Codebase Analysis: Identified one-off components duplicating functionality

Pattern Inventory: Cataloged inconsistencies across UI elements (buttons, inputs, modals)

Developer Interviews: Documented pain points in the current implementation workflow

Technical Debt Assessment: Quantified the "design debt" accumulating in the system

key pain points

It starts with people

After conversation with three key stakeholders  designer, front end developers and managers. I crystalized four pain points that gave us an understanding of

Problem statement and evidence

Numbers speak volume

Fiber Manual Record Fill Streamline Icon: https://streamlinehq.com

Developers spent ~25% of their time rebuilding existing functionality.

Fiber Manual Record Fill Streamline Icon: https://streamlinehq.com

UI audit revealed 30+ inconsistent versions of core components.

Fiber Manual Record Fill Streamline Icon: https://streamlinehq.com

Each feature release added ~15% more inconsistency to the system.

"How might we create a sustainable design foundation that supports both current and future product needs while reducing development friction?"

impact

Empathy surrounding

Instead of imposing a system from the top down, I centered the needs of the people who would use it daily:

People-First Design:

Built for  daily needs of engineers, designers, and product

Atomic Design Implementation:

Constructed interface from fundamental components

Accessibility as Standard:

Embedded best practices from the beginning

Documentation-Driven:

Created clear guidelines for everything in the system

challenges

Accessibility first

When accessibility was viewed as a roadblock to shipping, I shifted the conversation with a practical demonstration. This transformed the conversation from "if" to "how soon" and secured leadership buy-in.

Office Employee Streamline Icon: https://streamlinehq.com

Proof Over Pushback: Built accessible prototypes overnight that maintained our visual design

Building 2 Streamline Icon: https://streamlinehq.com

Zero Additional Effort: Demonstrated how proper accessibility could be implemented without slowing development

Job Seach Woman Streamline Icon: https://streamlinehq.com

Data-Driven Case: Presented market research on the business impact of inclusive design

solution

Keeping It From Breaking Again

Component Hierarchy: Built from atoms to organisms, creating a scalable system.

Documentation Requirements: Established clear standards for all system elements.

Governance Process: Created simple procedures for proposing changes or additions

Interactive Storybook: Repurposed our existing tooling from documentation to testing

Personal Reflections

The Lasting Lessons

Looking back, I realize that creating this system wasn't just about cleaning up code or standardizing pixels. It was about building a foundation of trust – between designers and developers, between our platform and our users.

Start with the people,

Not just the pixels. Understanding developer workflows was as important as user needs.

Make the right way the easy way.

If your design system creates extra work, people will work around it.

Accessibility isn't special,

it's standard. Build it in from the beginning, not as an afterthought.

Documentation-Driven:

it's standard. Build it in from the beginning, not as an afterthought.