ash dzick Get In Touch

Get In Touch

Prefer using email? Say hi at a.dzick@gmail.com

Inclusive Mobile Design System

Design Pattern Library, Accessibility, Agile UX Delivery for Milwaukee Tool

Summary

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.

Process

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

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 Designer and Adjunct Professor

I create strategy and user experiences for companies of all sizes.

I love making things. As a kid, I wanted to be a lot of things -- an inventor, an architect and (at one point) an English Professor. I've focused my career on delivering "stuff" that works for your entire user base, through inclusive design and in-depth research. I build immersive and usable experiences across traditional and emerging technologies, through responsive design, working prototypes, wearables, AR/VR and whatever comes next.

If you’re looking for a strategic partner for design, you want to talk tech, or you just want to grab a coffee, feel free to reach out!

Get in Touch