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 ran a structured Lean UX alignment session with business, design, and engineering leads to pressure-test the business problem, define outcomes for the business, the advisor, and the client separately, sketch proto-personas for each side of the relationship, and translate all of it into product, design and engineering requirements, working to make traceable decisions from day one.One Workspace, two ways of seeing the same money
A new vocabulary for a category that didn’t exist
The tool’s core screen puts a household’s entire account list (brokerage, retirement and insurance) on one line each in a table layout, then the UI let’s the advisor toggle between the Investment-only allocation the client is used to and the Comprehensive allocation that counts everything. Editing an account without losing the plan
Adjusting one account’s allocation meant exposing it’s full asset class breakdown in a slide-out that previews the changes before it touches the household’s overall solve. This UI encourages the advisor to experiment with percentages of allocations at the individual account level and understand the change’s impact on the entire portfolio, before proceeding to make changes to the account’s trading positions. Giving held-away assets a fair value
Annuities and pensions purchased through Northwestern Mutual already had a defensible present value. Competitor annuities and outside defined-benefit pensions didn’t. Without these prices, the tool could only tell half of the story of a client’s portfolio. My designed the Net Present Value feature to close that gap, creating an input experience for held-away (outside) assets, payout logic, and mortality-assumptions, so an advisor could test a scenario without disturbing the household’s solved allocation. User Story, written for the engineering team:
“As an advisor, I need an experience that will allow me to preview the Net Present Value results in the slide-out modal without impacting the overall Solver results, then apply the change and pass the updated information through to the Solver calculation when the advisor directs such activity.”