Product Designer & Researcher, Creative Technologist
Client: Milwaukee Tool
Role: Lead Interaction Designer
Scope: Discovery, Content, Interaction Design, Visual Design
- Overview
- Milwaukee Tool's e-commerce team asked for a digital experience strategy that could turn a 30,000+ SKU catalog into a trusted, authoritative resource for tradespeople, since every purchase is fulfilled through a distributor network the site doesn't control.
- I led competitive benchmarking, journey mapping, and wireframe/design development to translate a business ambition (become the source of truth for trade professionals) into design principles and UI deliverables.
A product catalogue
with no cart
Milwaukee Tool's distribution agreements mean MilwaukeeTool.com can never complete a sale. The site's job ends with a "Where to Buy" call-to-action. That constraint had left the site behaving like a thin product catalog: a business-driven category tree, over 30,000 SKUs with new products introduced constantly, and no clear reason for a professional to come back between purchases.
Meanwhile, the professionals Milwaukee wanted to reach were already doing the research the site should have owned — comparing specs on forums, asking counter staff at Home Depot which battery system was best suite to their work, and using the support sub-site for problem-solving.
Despite the extensive product catalogue and traditional e-commerce teamplates, the brief wasn't about re-designing the website. It was streamline the traditional shopping experience to support a job that would be fulfilled elsewhere.
Four jobs the site has to support:
- Battery confidence — make it clear which battery is right for a particular tool, and set realistic expectations for battery life based on the tool and the application.
- Compatibility — help a user understand which accessories and consumables are compatible with a tool, without hunting through a spec sheet.
- Comparison — let a pro compare tools side-by-side on price, specification, and application, with the numbers surfaced instead of buried.
- Discovery — organize search and navigation around how pros actually shop — by trade, by material, by task — not just by SKU.
Grounding strategy in three kinds of trade professional
Milwaukee's own research pointed to three segments who move through an "Enter → Expand → Enhance" progression as their crews and tool investment grow. I used this framework as the throughline for every decision that followed — every page zone, every principle, every navigation pattern was tied back to what one of these three groups actually needed.
I ran a competitive and creative-direction study — pulling apart what makes trade, outdoor, and technical brands feel authoritative online. Dometic and On Running for slide-out and pill navigation, Lippert for embedded support content, Helly Hansen for language selection and editorial typesetting, McMaster-Carr for shop-by-material faceting, DeWalt, Ferguson and Ryobi for how a brand-led catalogue holds its own identity at scale. Those references became the "Nothing but Heavy Duty" moodboard that anchored every visual decision that followed: high-contrast red-black-white color schema, material texture, and bold, weight-led typography over a second typeface.
Following a pro from discovery to post-purchase
I mapped each user segment’s journey end-to-end — discovering a need, researching it, locating the product in the field, purchasing through a distributor, and living with it afterward — to find where MT.com was actually present in that journey, and where it went silent. This effort confirmed a “Know before you go” mindset: professionals research online, then execute in the field or in-store. If MT.com couldn't answer a compatibility or usage question in the moment, that question became a phone call, a blind transfer, or a lost customer.
Four pillars, one design language
01 - Premium Brand Expression
Capturing Milwaukee's "Heavy Duty" visual language
Milwaukee's brand voice on the jobsite is confident and no-nonsense — the digital experience had to read the same way. I set six working principles to keep the whole team's output consistent as it scaled across templates:
Function over form
Contrast is the driver, site-wide. Anywhere legibility is at risk, function wins over aesthetic.
The brand is the brand
Palette, mark and red dominance are non-negotiable. Creative direction reframes the brand in a way that is recognizable.
Trade in frame
Photography shows the trade in use, on-site, in realistic conditions — never the tool in isolation.System over a single hero
M12, M18 and MX FUEL aren’t just tools, they are platforms with depth that the customer is buying into.
Deliberate density
Every layout decision is intentional. Density signals confidence, whitespace is used with purpose.Precision in the details
The site should hold the same engineering standard as the tools: consistent forms, spacing and interaction rules that reflect the brand’s power.
Supporting pros with a shopping experience built on the way they think
With a product navigation organized around internal business units, I proposed a content-driven navigation built on the mental models a pro actually uses: their trade, the material they’re working with, and the project they are working on.- Multimodal search — a unified "find-as-you-type" interface surfaces tools, manuals, and guides together instead of treating search as a SKU finder.
- Shop by Trade & Material — task-driven entry points that mirror how a plumber, electrician, or carpenter already thinks about their work.
- Flattened architecture — progressive disclosure through broad categories before deep technical options, so users are never trapped in a disconnected subcategory.
- Immediate-action nav — search and the level-one catalogue sit left, account and language sit right, with secondary destinations relocated to the footer.
03 · Purposeful Discovery
Answering the question a pro actually has on the job
The client's core ask lived here: help someone connect the tool, the material, and the task in one view, and remove the guesswork around which battery platform they're committing to. I framed this as a simple mental model the whole team could design against.04 · Confident Decision-Making
Winning the handoff to a distributor
Because MT.com can never close the sale itself, the product page had one job above all others: build enough conviction that a professional carries their decision confidently to a distributor. I designed the PDP/PIP to answer three questions in sequence — what am I looking at, what does it work with, and where can I buy it — and to behave differently once someone was signed in, surfacing their registered tools and order history instead of a generic page.- System & compatibility module — answers "will this work with what I own?" before the spec table, because that's the question that actually blocks a purchase.
- Buying lists, not a cart — professionals assemble a compatible set of tools, batteries, and accessories at their own pace, then hand the whole list to a preferred, stocked distributor.
- Social proof over star ratings — pro quotes and on-site testimonials stand in for a review base that's too thin to be trustworthy, per the brand rule against showing ratings before the content backs it up.
- Logged-in continuity — registered users see their tools, warranty status, and service history instead of re-explaining themselves to a call center.
A menu, not a mandate
The result reframes MT.com from a thin product catalogue into what the brief actually asked for: a site professionals trust for the answer before they ever pick up a tool, one that hands them off to a distributor with confidence instead of doubt.x working principles to keep the whole team's output consistent as it scaled across templates: