Note: This case study contains anonymized examples of product experiences and design system assets. Screens, data, and proprietary details have been modified to protect confidentiality.

 

Creating Badger Meter’s first accessible unified design system

Badger Meter | Lead UX Designer | 2020 - 2021
Design Systems · Accessibility · Documentation · Component Libraries · UX Research · Developer Collaboration

Tools used: Figma, DevMode, HTML/CSS, ADA/WCAG

The problem: Beacon and EyeOnWater, Badger Meter's water consumption and notification platforms, relied on inconsistent patterns, duplicated components, and limited accessibility standards across web and mobile experiences. The result was a fragmented user experience and inefficient design and development workflows.

The solution: Created Badger Meter's first accessible design system, establishing a single source of truth for components, accessibility standards, and product development.

Impact

Users = Designers, Engineers & End Users

End users

Utilities, municipalities, and customers relied on Beacon and EyeOnWater to monitor water consumption, track usage trends, and receive important notifications.

Internal users

Designers and engineers needed a shared foundation for creating consistent, accessible experiences across multiple web and mobile products.

The Problem = Inconsistent Product Experiences

Products were built independently over time, resulting in fragmented experiences and duplicated design decisions.

Beacon platform & EyeOnWater metrics (Audited pre-unified design system)

Key Challenges

  • Inconsistent patterns created fragmented user experiences

  • Duplicate components increased design and development effort

  • Accessibility standards varied between teams and products

  • Documentation gaps slowed implementation and onboarding

  • No centralized system existed to align design and engineering

Core insight

Teams didn't need more components.

They needed a shared foundation that standardized accessibility, accelerated development, and created consistency across products.

 

Establishing the foundation

Establishing shared foundations

Defined the foundational system that aligned design and engineering around a shared language.

Defined

  • Typography

  • Color system

  • Spacing scale

  • Iconography

  • Accessibility standards

  • Usage guidelines

✅ Outcome: Established a scalable foundation for consistent product development.

 

Component library

Scaling through components

Using the foundations, I built a reusable component library designed for both designers and engineers.

✅ Outcome: Reduced duplicated work and accelerated product development.

Documentation

  • Shared Figma Library

  • Usage guidelines

  • Accessibility requirements

  • Engineering specifications

Built 20+ reusable components and patterns including:

  • Navigation

  • Forms

  • Inputs

  • Buttons

  • Tables

  • Modals

  • Alerts

  • Metrics

 

Accessibility by default

Accessibility was integrated into every state of the design system.

Accessibility guidelines & WCAG contrast checker testing

Standards Included

  • WCAG compliance

  • Color contrast requirements

  • Screen reader support

  • Internationalization guidance

  • Accessibility annotations for engineering

✅ Outcome: Accessibility became a standardized part of the design and development process.

 

Adoption & Governance

Driving adoption: Creating the system was only part of the challenge. Success depended on organization-wide adoption.

Actions Taken

  • Led design system workshops

  • Conducted training sessions

  • Held weekly office hours

  • Gathered feedback from teams

  • Iterated documentation and components

✅ Outcome: Achieved 100% adoption across design and engineering teams.

Business Goals Achieved

  • 100% company-wide adoption across design and engineering teams.

  • Established a single source of truth for components, patterns, and documentation.

  • Standardized accessibility requirements across products and workflows.

  • Reduced duplicated design and development effort through reusable foundations.

  • Created a scalable framework supporting future product growth.

What I learned

Accessibility scales best when built from the start
Retrofitting accessibility across products is significantly more expensive than designing for it upfront.

Adoption requires more than components
Workshops, documentation, and office hours were just as important as the design work itself.

Design systems are products
Long-term success depends on governance, iteration, and stakeholder buy-in.