client: Milwaukee Tool
duration: 16 months
role: UX contractor, brought in to help shore up team capabilities
power tools I own: five
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.
“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.”
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.
From Designing Accessible Branding Presentation
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).
Sketches With Votes from Workshop
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.
Milwaukee’s Android App Tool Bar Layout
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.
Wireframes in Adobe XD for Tool Configuration
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.
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.
Representing ONE-KEY at the Milwaukee Tool Media Day