ONE-KEY App & Design System

client: Milwaukee Tool
duration: 16 months
role: UX contractor, brought in to help shore up team capabilities
power tools I own: five

summary

Milwaukee Tool 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. I then leveraged Human Interface Guidelines and Material Design to separate the one app style into two distinct native applications. Our team then used our style guide to iterate through new features quickly.

To test our mobile mockups, I created a low budget test plan that got us in front of real users.

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

Download the ONE-KEY App

From the Team...

“It was wonderful to work with Ashley while she was a part of our UX Team at Milwaukee Tool. She helped shape our design process by suggesting new ways to reorganize our project management workflow. She helped drive a huge initiative to educate and inform some of our partners within the organization about accessibility and how it effects our users in the field. She even helped us piece together a scrappy low budget test plan that helped us gain footing when we purchased an enterprise solution. All of these accomplishments came at a crucial time for our team as we were trying to gain footing within our organization and having Ashley help pave the way was invaluable.”

Jason Rothman
Manager of User Experience at Milwaukee Tool

process

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

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. We based our design sprint off The Sprint Book (formerly Google Ventures).

  • Design Workshop Facilitation
Side View of Sketches 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

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
Milwaukee Tool Mockups

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
Screwdriver Icons

Creating icons for an LED panel on a tool

Results

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.

UX Team at a Conference

Representing ONE-KEY at the Milwaukee Tool Media Day