The company, a large power tool manufacturer based in Milwaukee, WI., had a 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.
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’s ONE-KEY apps.
Branding and marketing agreed: we needed a slightly refreshed and streamlined look to be successful.
- User Personas
- Color, Typography and Branding Guidelines
- Visual Design
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
Agile Product Design
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
- Design Sprints
- Usability Testing and User Research
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.