Creating Badger Meter’s first accessible design system
Badger Meter | UX Designer | Q3 2020 - Q3 2021
Design Systems ~ Scalable interactive components ~ Documentation ~ UX Research ~ Training ~ A11y accessibility ~ Internationalization ~ UI/UX
Tools used: Figma, DevMode, HTML/CSS
The problem: In 2020, Badger Meter’s outdated & inconsistent Beacon AMA web application & EyeOnWater IOS/Android applications were in strong need of a cohesive accessible design system + scalable components.
The solve: My job was to create a scalable design system from scratch & take into account existing usability feedback. In order to do so I followed these 5 steps: audit and define existing components and foundational elements, document all guidelines, create scalable components, promote & pass accessibility A11y guidelines, maintain and consistently enhance the design system, and promote adoption & feedback.
Results:
Defined & launched Badger Meter’s first unified accessible design system which became the one source of truth for all components & documentation.
The design system reached 100% adoption across the company.
Bridged inconsistencies in development/design patterns across all Badger Meter platforms.
Badger Meter’s mission: Innovative flow metering & control solutions for smart water management, buildings & industrial processes to help measure and protect resources for a smarter world, and save 600+ billion gallons of water annually.
The Blueprint
Through collaborating with PMs, developers, and designers I created the guiding blueprint for the Beacon design system. The blueprint contains guidelines and rules to follow for the entire accessible unified design system and conveys do’s and don’ts for component usage.
Components
Using the blueprint guidelines we focused on spacing, accessibility, color, typography, alignment, scaling/sizing & usability in every individual component & variant. For the Beacon MVP release launch we started with a subset of 20 components with the applied principles.
As further post-MVP development occurred we incorporated the remaining components & did a lift & shift to unify all components across Badger Meter. In order to further increase usage & retention of the Beacon design system, I created a UI File & Confluence page for all blueprints & component documentation, as well as integrated all components/variants into a Beacon design library for usage across all Figma files.
Accessibility
Accessibility & internationalization was considered at every step of the process in order to create a design system that is as inclusive, & as approachable as possible for the 250 million+ users across the world who use Badger Meter to save 5+ Billion gallons of water annually.
The goal was to design with for all forms of accessibility considerations & account for screen readers as well as scalability - creating accessibility annotations for all design specs and incorporating them in development.
Promotion & Adoption across Badger meter
In order to promote adoption company wide, I conducted a series of workshops discussing how to use Beacon - the unified design system, and interpret the documentation. I led weekly design system office hours for questions designers, or developers had and iterated on the evolving design system based on feedback. Eventually familiarity and regular usage ensued and quickly it was regular practice for dev reference and design fundamentals.