NorthQuad x 120Water
120Water Sample Manager
Most U.S. drinking water violations don't come from bad water. They come from a missed paperwork deadline. Sample Manager replaces the spreadsheets utilities used to track that paperwork with one system built to handle hundreds of deadlines at once instead of one at a time.
15Utility Orgs
20+Components Built
32A11y Certified
The Company
A law most people never hear about.
Every U.S. water utility tests on a fixed schedule and reports to the state. Miss a deadline by a day, it's a violation. 120Water builds the software that keeps utilities ahead of it. I was the sole designer, research through engineering handoff.
The Problem
Built for one. Needed for hundreds.
A mid-size utility tracks dozens of testing sites a month. A state association can track 80+ utilities at once from one office. All of it used to run on spreadsheets and phone calls, tools built for one record at a time.
One field team summed it up: 13 physical sites turned into a hundred separate tasks instead of a dozen grouped stops. No tool showed the whole workload at once.
The Reality Check
This is what water compliance looks like today.
Paper forms, handwritten lab reports, violation tables with hundreds of rows, and a monitoring schedule that takes a minute just to find your name on. No status. No owner. No urgency signal anywhere.
🗂️
State Records Today
sm-state-records-before.png
"I open four tabs every morning just to know what I'm supposed to do today. If I miss a deadline it's not just a bug, it's a violation."
Compliance Officer, 22 years in utilities
What Got Built
Five screens. One question, answered five times.
Every screen below exists to answer the same question at a different scale: what needs attention right now, out of everything? Live since launch and still shipping.
01 · Dashboard
Admins had no idea where to start each morning.
With dozens of deadlines running at once, every admin asked the same thing first: out of all of it, what matters today? Landed on a calendar plus a team progress view. One glance instead of a hunt.
📊
Dashboard
sm-screen-dashboard.png
02 · Task Summary
See what's due today the moment you open the app.
Admins see everything. Operators just need their own slice, fast. Open the app, see what's on you: In Progress, Overdue, Upcoming. Simple, but took a few rounds to balance.
📋
Task Summary
sm-screen-tasks.png
03 · Tasks Page
Every open task, for everyone on the team.
Same question as the dashboard, zoomed out to the whole org. Three stat cards up top: In Progress, Overdue, Upcoming. Filter by status, month, or type. Assign and update without leaving the page.
✅
Tasks Page
sm-screen-tasks.png
04 · Facilities
Spot which sites need attention before it becomes a problem.
A utility can run a dozen or more physical sites. No way to see them all at once, or tell which ones had issues. The Needs Attention status came straight from user feedback, flagging at-risk sites instead of making admins scan every row.
📍
Facilities
sm-screen-facilities.png
05 · Sampling Schedule
Know what's due before it's already overdue.
A missed deadline here is a federal violation, not a missed notification. A flat list with no urgency signal couldn't carry the load. Redesigned with month, week, day views, three tiers: Overdue, Due Soon, Upcoming, signaled through color, icon, and label together.
📅
Sampling Schedule
sm-screen-schedule.png
A Real Tradeoff
One feature got pulled forward. Here's why.
Admins were inviting new users one at a time. A real state deal needed many added fast. Bulk invite jumped the queue.
Same logic, different screen: Facilities couldn't show every sampling point at once. One-at-a-time was never going to hold at real utility scale.
Interactive Prototype
Click through the actual product below. Built in vanilla HTML, CSS, and JS.
🖥️Best experienced on desktop. Mobile view is limited.
The Full Product
Every screen. Live and shipping.
01Dashboard
Dashboard
The command center. Pending tasks, overdue items, and upcoming deadlines at a glance.
Click to expand →
02Tasks
Tasks
Every task across the org. Status, scheduled date, due date, and owner, all in one filterable list.
Click to expand →
03Monitoring Requirements
Monitoring Requirements
Every regulatory requirement in one place. Linked to facilities, schedules, and compliance deadlines.
Click to expand →
04Facilities
Facilities
All facilities by type, state, and compliance status. Needs Attention flags what requires immediate action.
Click to expand →
05Sampling Data
Sampling Data
Collected sample results linked to their source tasks and facilities. Ready for regulatory reporting.
Click to expand →
06Sampling Schedule
Sampling Schedule
The full sampling calendar. Switch between month, week, day, and year views.
Click to expand →
07Task Detail
Task Detail
Full task context in one view. Sample type, assigned collector, linked facility, due date, and status.
Click to expand →
08Monitoring Requirement Detail
Monitoring Requirement Detail
Drill into a single requirement. Facility, sampling frequency, compliance window, and fulfillment status.
Click to expand →
09Schedule Views
Schedule Views
Month, week, day, and year, four views of the same calendar. Zoom out to plan, zoom in to execute.
Click to expand →
10Settings
Settings
Organization config, user roles, notification preferences, and integration controls, all in one place.
Click to expand →
What did Sample Manager accomplish
Four things that didn't exist before.
✦Unified task viewTasks, schedules, and facilities in one system. No more switching between disconnected tools.
✦Compliance status at a glanceNeeds Attention surfaced immediately. No hunting through rows to find what's overdue.
✦Reduced navigation depth4 navigation levels collapsed to 2. Users reach what they need in fewer steps.
✦Token-built design systemReplaced ad-hoc styling with a 20+ component library. Consistent, accessible, handoff-ready.
Process
From research to something that shipped.
Four phases, fixed Beta date, no room to skip steps.
Design System
The system was built before the screens were.
Every color, spacing value, and border radius ties back to a design token, no hardcoded hex. All 32 components were built with WCAG 2.1 AA in mind from the start, since most customers are state agencies. Each shipped with documented states so engineers never had to guess.
20+
Components: stat tiles, tables, badges, calendars, modals, charts
6
Semantic color scales, all WCAG AA certified
100%
Token-strict: no hardcoded hex values in any component
Color Tokens
100
#F3FCFF
300
#AAEBFF
500
#2ECCFFMain
100
#F3F4F8
300
#DDE1EC
700
#5B6FB0
900
#294088Main
100
#F0F8F5
300
#D6EBE2
900
#007F4AMain
100
#FDF0F5
300
#F9D6E2
900
#D70049Main
100
#FAF6F0
300
#F2E6D6
900
#AE6400Main
0
#FFFFFF
100
#F3F4F6
500
#94A0B2
700
#667081
900
#2F3747
950
#1F2633Nav
Typography · Inter
--text-h136px · 800 · −0.04em
Page Title
--text-h228px · 700 · −0.02em
Section Heading
--text-h418px · 700
Card Title
--text-body14px · 400 · 1.6lh
Body copy. Used in table cells, descriptions, and subtext. Neutral-700 on light backgrounds.
--text-caption12px · 800 · +0.08em · UC
● Eyebrow Label
Stat tile value26px · 800 · −0.04em
154
Table header12px · 800 · +0.05em · UC
TASK NAME · STATUS · DUE DATE
Badge12px · 800 · pill
Active
Overdue
Needs Attention
In Progress
Border Radius
--radius-sm8px, buttons and inputs
--radius-md10px, cards and panels
--radius-lg14px, large cards and modals
--radius-xl18px, hero cards
--radius-pill999px, badges, tabs, and chips
Shadow Levels
--shadow-sm
Stat tiles · inputs · chips · tabs
--shadow-md
Cards · notification items
--shadow-lg
Modals · drawers · tooltips
Where It Stands
Live with real customers. Still getting better.
Launched in 2024, live with 15 utility organizations today. Real usage is still shaping what ships next.
20+
Components built and shipped across 10+ screens
15
Utility organizations live with real compliance deadlines
32
Components built WCAG 2.1 AA compliant from the ground up
Takeaways
Working at a startup sharpens every decision.
The screens that got iterated on most were the ones with the most conflicting feedback. That tension usually pointed at something worth getting right.
Building the design system first felt slow. By screen eight it was the only reason everything stayed consistent.