Crafting the One-Key™ enterprise design system
Milwaukee Tool’s One-Key™ ecosystem powers digital construction at scale—connecting tools, equipment, and jobsite data across major contractors. As Milwaukee Tool expanded into new solution verticals and global markets, One-Key™ needed a flexible, multi-brand design system capable of supporting not only Milwaukee, but an evolving family of digital products in the construction space.
A component library had existed initially in Adobe XD, but only represented around 5% of the overall iOS One-Key™ mobile app experience at the end of 2021.. What didn't exist in the library had to be cobbled together with screenshots, or bits and pieces of recently built experiences.
The design system had no structure, no source of truth, no guidelines or process, and no team to uphold, moderate or document the design system of an enterprise level product.
Primary Objective:
Lead the UX and design system strategy to create a set of standardized interaction patterns, identify gaps in the asset management experience, and build a scalable design system that could adapt across multiple brands of an ecosystem.
Audit-Driven Rebuild: Creating a More Efficient, Scalable System
A quick audit showed many app experiences were built without designer input or hadn’t been updated in over a year, meaning the design system needed a full rebuild.
The new version focused on:
Native Components to reduce tech debt, align with platform standards, and prioritize the changes that mattered most. Some updates were quick fixes like accessibility improvements, while others took months to implement.
Accessibility was improved across the board, including adding accessible colors and better support for zoom and dynamic text.
Designer efficiency was also a focus. Patterns were reorganized for consistency, making it easy to switch between iOS and Android and quickly find, edit, or reuse components.
The result: a fully recreated, scalable design system that works across platforms and saves designers time.
After reviewing Design System Version 1.0, it was clear the system needed stronger organization, cleaner components, and better documentation. After leveling up my skills through the design system community, I set out to rebuild the library so it could be easier to use and scale—even with the product’s technical limitations.
I started by rebuilding everything using atomic design principles. Breaking workflows down into smaller pieces helped us understand how components connected across platforms and gave the team a clearer, more consistent system to work from.
Next, I updated the library to support responsive patterns. The old fixed-width setup was outdated, so high-traffic components were redesigned to flex across different screen sizes, making prototypes more accurate and testing smoother.
Finally, I baked global microinteractions directly into the components—like button animations—so designers didn’t have to recreate them for every test. This made prototypes feel more realistic and saved a lot of time in the design process.
Building Clarity in a Complex Ecosystem
The One-Key™ ecosystem is huge—and introducing a design system into that environment meant we needed more than components. We needed shared rules, common language, and a simple way for every stakeholder to understand how the system worked. That shared foundation quickly became the decision-making backbone for evaluating design trade-offs and determining whether new product needs could be supported by the system.
LETS SEE WHAT HAPPENS
One-Key™ iOS
42,526
Pattern Placements
One-Key™ Android
24,866
Pattern Placements
Design System
65%
Library Adoption
Validation Testing