A QA build mid-development — heading annotations and placeholder data visible.
Northern Tool + Equipment
Modernizing a high-traffic e-commerce platform — accessible, research-backed, and still live four years on.
Overview
The problem
Northern Tool’s HCL Commerce site had aged out of its own design — built before accessibility was mainstream, and no longer matching how people actually shop. The catch: marketing had locked the black-and-yellow palette. The brief was to rebuild to modern e-commerce and WCAG 2.1 AA standards, without reaching for color.
Role & duration
I joined to advise on Axure and stayed as lead designer and front-end developer for the build — owning UX research and design, prototyping, the SCSS and TypeScript theming, accessibility testing, and mentoring EY’s offshore front-end team.
2021 — 2022
The team
The best part of this project was the Northern Tool UX team — a shared bar for craft, easy communication, and enough mutual trust to head off the gaps that stall projects before they start. Good work comes from good working relationships; this was one of the good ones.
Research
Research-led UX — Baymard Premium
The Northern Tool team had a real commitment to best practices and accessibility, backed by extensive Baymard Institute’s Premium e-commerce research — the field’s most rigorous body of e-commerce UX evidence, drawn from over 130,000 hours of usability testing. I got to build on that foundation rather than argue for it, which is rare and worth naming.
The readability system
I created a SCSS-based readability framework, based on The 8 Point Grid System, with the palette locked to black and yellow so structure had to carry the clarity color usually does:
- Line length held to ~70 characters
- Deliberate line spacing for maximum legibility
- Clear type hierarchy by size, weight, and position
- Left-aligned text; no all-caps, no underlined non-links
- Responsive resizable text for accessibility
Constraints
Building JavaScript components in a CMS with no JavaScript
HCL Commerce's content management system didn't support JavaScript, meaning there was no straightforward way to build the interactive components a modern e-commerce site needs. So I built one: a framework of TypeScript utilities that scan each page for specific HTML classes and activate behavior from them, documented in Storybook so the content team could use it.
A Sample of the NTE Custom CMS Class Based Components:
- Grid (structure) Layout and Flex (content) Layout
- Carousels
- Modal Dialogs and Drawers
- Media Windows
- Custom Banners (with and without background image)
- Responsive Background Images and Responsive Spacing Classes
Keeping the project moving
The next obstacle was thornier. For the first six months, a brand-new HCL Commerce 9.0 backend was too raw to reliably surface the data we needed to theme against — and the timeline didn’t allow for building mock data. That left me unable to theme and the front-end team stalled without components.
Rather than wait, I used the site’s own scale as the way out. Every morning’s scrum became a hunt for whichever sections were workable — content pages, banners, accessibility passes on finished work — and I kept progress there. On a site that large, there was always another corner to move forward in.
Outcome
The accessibility lesson
Northern Tool commissioned two independent accessibility audits. Partway through, I flagged that our React-fluent team was writing HTML that would fail review, and recommended a short expert code pass. It didn't happen when I proposed it — and those issues later surfaced as roughly three months of remediation. Accessibility is least expensive when it's caught first, not last.
What held up
The site passed both audits at WCAG 2.1 AA and shipped on the original black-and-yellow palette — proof the constraint was never the obstacle. The class-triggered framework gave a JavaScript-less CMS a modern, documented component library. And the clearest measure of the work: the theme is still live in production four years later, maintained and evolving. Design that held up.