Client: Milwaukee Tool
Duration: 16 months
Role: UX contractor, brought in to help shore up team capabilities
Discounted Powertools Purchased: five

Milwaukee Tool had strong brand presence but a fractured digital team. The iOS and Android apps had been designed for iOS and then “ported” to Android. Android was receiving a lot of negative feedback, as it lacked consistency to other Android apps.

I worked with Milwaukee Tool for sixteen months. Using their existing branding as a basis, I built a WCAG Level AA Compliant living style guide and then iterated through design and research.

Key Responsibilities

  • Accessible & Responsive Mobile Designs in Photoshop and Adobe XD
  • Responsive Design System
  • Usability Testing Strategy
  • Tool Interfaces and On-Screen Icons
  • Ran Design Sprints

“Ash helped shape our design process by suggesting new ways to reorganize our project management workflow. She helped drive a huge initiative to educate some of our partners within the organization about accessibility and how it affects our users. She even helped us piece together a scrappy low budget test plan that helped us gain footing when we purchased an enterprise solution. Having Ashley help pave the way was invaluable.


Design Partnership with Marketing

The ONE-KEY apps were incredibly red — it was hard to differentiate sliders, buttons and text. Marketing wanted to convey the same sense of innovation, quality and heavy-duty equipment that was on the rest of the website. Unfortunately, the overuse of made the app less inclusive, less readable and overall not very usable.

I spearheaded a project to propose a new color scheme and typography to maintain the Milwaukee brand while making the app more readable. To further emphasize our point, we analyzed 20 different apps with strong red colors — very few of them had the over-the-top red of Milwaukee Tool. Branding and marketing agreed: we needed a slightly refreshed and streamlined look for the One-Key apps.

  • User Personas
  • Color, Typography and Branding Guidelines
  • Visual Design
  • Mockups of proposed changes
  • Competitive Analysis of other Red and strongly-colored apps

Screenshot from presentation From Designing Accessible Branding Presentation

Workshopping It Out

ONE-KEY conducted its first design sprint around Tool Location Tracking. We wanted to come up with an innovate solution for locating your missing Milwaukee bluetooth enabled power tools. Jason and I collaborated on the design sprint preparation and I facilitated.

  • Design Workshop Facilitation

Sketches With Votes from Workshop Sketches With Votes from Workshop

Design System and Style Guide

We wanted to split the single-style Milwaukee Tool app into distinct Android and iOS styles. Step one was to create a style guide of basic patterns that the developers could start leveraging when updating screens.

The design system needed to be simple enough to leverage but complex enough to account for most scenarios. We began with updated guidelines from Google Material Design and iOS Human Interface Guidelines. Next, we look at how our components would work together and made sample mockups of layouts. Finally, we analyzed our components against WCAG guidelines.

The process was iterative. I began with designs and components in Adobe XD; eventually, it became a living style guide with reusable code created by a front-end developer.

  • External Consistency (Material Design and Human Interface Guidelines)
  • Accessibility (WCAG Level AA Compliant)
  • Design Pattern Library

Milwaukee’s Android App Tool Bar Layout Milwaukee’s Android App Tool Bar Layout

Product Design and Delivery

I worked on updates to the apps for new features, updates and a general “facelift” in an iterative, agile fashion. Projects I worked on included an all-new sign in, updates to settings, Tool Controls and an LED screen for a physical tool. We leveraged a combination of analytics and remote moderated usability testing to measure and iterate on designs.

  • Workflow and IA
  • Agile Delivery
  • Responsive, Inclusive Design
  • Usability Testing and User Research

Wireframes in Adobe XD for Tool Configuration Wireframes in Adobe XD for Tool Configuration

Physical Tools

While my role was predominantly focused on the One-Key app, I also participated in design for LED and LCD panels that would go on physical tools. I designed menu navigation, workflows and icons for several tools.

  • Menu traversal and workflows
  • Icon design

Creating icons for an LED panel on a tool Creating icons for an LED panel on a tool


Customer reviews on the Android app store went up from 2.7 to 3.6 (out of five stars). The iOS application went from a 3.9 to a 4.1.

The initial style guide I developed was adopted not just by our internal team but embraced by the developers. The dev team created a living style and code repository they could leverage in future updates.

Download the One-Key App