ZenTrades
CASE STUDY · 2026
JASHAN DHINGRA
SCROLL ↓
Portfolio / 2025 / B2B SaaS
B2B SaaS
Workforce Management
Construction Ops
Role
Product Designer (solo)
Duration
1.5 days · sprint
Tools
Figma · FigJam · ShadCN · Notion
Year
2026
Assignment File
185
WORKERS
04
ACTIVE SITES
06
PROJECT MANAGERS
3
PERSONAS
— LIVE OPERATIONAL TRUTH
/ 02 · THE STAKES
185
Workers
04
Construction Sites
06
Project Managers
Before ZenTrades, Mr. Arie's operation ran on calls,
WhatsApp groups, and mental math. Every schedule change
meant 40+ messages. Every worker reassignment was a
coordination nightmare.
This isn't a people problem it's a system problem.
/ 03 · THE PROBLEM
MA
Mr. Arie
Construction Contractor
🖥 Desktop
📱 Mobile
42 yrs
Goals
01
Full visibility across all projects
02
Faster worker reallocation
03
Reduced coordination calls
04
Track daily progress centrally
Pain points
No single view of all 185 workers
Depends entirely on PMs for status updates
Cannot reassign quickly when sites change
No audit trail of who assigned what
Success looks like
One screen showing all 185 workers across 4 sites.
A day in Mr. Arie's life
"By 9 AM I've sent 40 messages
and still don't have a picture."
07:00 —
12 missed calls.
Site Bravo needs 2 extra laborers. Site Delta's electrician didn't show up. No one
knows who's available.
Mr. Arie starts calling project managers. One doesn't pick up. Another isn't sure
if Worker #47 is assigned or sick.
09:00 —
40+ WhatsApp messages later, still no clear picture.
Meanwhile, Site Charlie is overstaffed — 3 idle workers waiting for materials that
won't arrive until tomorrow.
Labour is idle & money is going from Mr.Arie’s pocket. This happens every single day.
CORE PAIN POINTS · OBSERVED
01
02
03
04
No capacity planning
05
No accountability
ROOT CAUSE
A distributed
system without
shared state.
The team operates like a distributed system with no shared operational state, no real-time data layer, and no feedback loops. Everyone maintains their own mental model and reconciles it through micro-management. The fix is structural: introduce a single live operational record that every stakeholder reads from and writes to.
/ 04 · USER RESEARCH
Every persona needs a different view of the same operational truth. Designing the data model meant first mapping who needs what, when, and on which device.
MA
Mr. Arie
Contractor / Owner
🖥 Desktop
📱 Mobile
Top goals
01
Monitor all sites from one dashboard
02
Detect staffing risks early
03
Reassign workers in minutes
Top pains
No central visibility
Depends on PM updates
Cannot reallocate fast
Success metric
One screen showing all 185 workers across 4
sites.
PM
Project Manager
On-Site / Office (×6)
📱 Mobile-first
🖥 Office desktop
Top goals
01
See who's available today
02
Assign tasks quickly on-site
03
Communicate changes instantly
Top pains
Manual task assignment
No real-time availability
Overlapping allocations
Success metric
Clear daily plan with zero ambiguity.
FW
Field Worker
Technical / Driver / Laborer
📱 Mobile only
Top goals
01
Know today's assignment
02
Check in / out easily
03
Contact PM when blocked
Top pains
No schedule visibility
Last-minute changes
Unclear task details
Success metric
Morning notification with location, time, and
task.
/ 05 · DESIGN APPROACH
Most workforce tools are fancy spreadsheets — a list of tasks
with workers attached.
ZenTrades is different. It's a live operational record. When a
PM assigns a task, the dashboard updates. When a worker
checks in, capacity changes. Everyone reads from the same
source of truth.
This required rethinking the data model from the ground up:
not tasks with workers attached, but a connected graph
where Tasks ↔ Projects ↔ Workers stay in sync
automatically.
Every UI decision after that came back to one question —
does this surface live state, or does it hide it?
PRINCIPLE 01
Visibility over perfection
Better to see 80% staffing than guess at 100%.
Show the gap; let the contractor decide whether
it's urgent.
PRINCIPLE 02
Usability for PMs
Tasks happen on-site, not at desks. Every PM action must be one-click away, reachable to the gate of any construction site.
PRINCIPLE 03
Zero ambiguity
Every task carries location, time, headcount, and
worker type. No free-text — no "I thought you
meant Tuesday."
/ 06 · KEY DECISIONS
A · SCHEDULING SURFACE
Why List + Calendar, not Kanban?
Construction schedules are time-bound, not stage-bound. A Kanban
board optimizes for workflow stages (To Do → Doing → Done) — but
tasks here are locked to dates and locations.
Calendar view prevents double-booking and shows capacity gaps at a
glance. List view gives PMs a quick scan of today's assignments
without mental math.
Two views, one data layer. Switch is one click. The choice is
contextual: morning standup → List. Weekly planning → Calendar.
B · STAFFING SIGNAL
Surfacing gaps
before they hit the site.
In the old system, you'd discover you're short 3 laborers when they
didn't show up at 7 AM.
Now, the moment a task is created with a headcount requirement, the
system shows fulfillment status on the card. Red badge means short.
Blue means staffed. No drill-down needed.
This isn't a UI flourish — it changes the decision moment. Mr. Arie
reassigns the night before, not at sunrise.
C · MENTAL MODEL
Project-level staffing,
not worker-first.
Most tools let you assign workers to tasks one-by-one. But
contractors don't think that way. They think in projects: "Site Bravo
needs more people. Site Charlie has extras."
The Projects screen mirrors that mental model. Each card shows
capacity, priority, and a single quick action: Assign Workers.
Redistribution happens at the project level. Individual task
assignments cascade automatically.
D · DATA MODEL
Three entities,
one operational graph.
Changes propagate. Reassign a worker → their task updates → project
capacity recalculates → dashboard refreshes.
No manual syncing. No stale data. No WhatsApp follow-ups to
confirm.
This is the invisible foundation behind every screen. Every visual
decision exists to surface state changes the moment they happen.
/ 07 · FINAL DESIGNS
Four core screens. Every element earns its pixel fulfillment status, capacity bars, real-time alerts, and structured task creation.
SCREEN 01 / 04
Dashboard
zentrades.app / dashboard
01
Real-time alerts surface understaffed tasks before
the day starts — auto-suggests redistribution from
idle pools.
02
Workforce KPIs split capacity into Total / Assigned /
Available / Understaffed — the four states that
matter.
03
Today's schedule + site capacity sit side-by-side so
a contractor can act without leaving the dashboard.
SCREEN 02 / 04
Scheduling — List/Calendar
zentrades.app / scheduling / calendar
zentrades.app / scheduling / calendar
01
Tasks color-coded by worker type — laborer,
technical, driver, electrician — for visual workload
scanning.
02
Daily capacity counter below the grid flags any day
that exceeds workforce availability (red = over
capacity).
03
Drag-and-drop reschedule — system prevents
double-booking by validating against worker pool in
real time.
SCREEN 03 / 04
Create Task Modal
zentrades.app / scheduling / calendar
01
Six structured fields enforce every task to carry
project, type, time, location, and headcount — no
free-text gaps.
02
Auto-suggest matches headcount requirements
against idle workers across all sites — one-tap to fill.
03
Notifies assigned workers via push on save. No
follow-up WhatsApp message needed.
SCREEN 04 / 04
Workers Registry
zentrades.app / workers
01
Three statuses (Available / Assigned / On leave)
cover every worker state with no ambiguous in-
between.
02
Current project + today's task surface side-by-side
— see why someone is busy without clicking
through.
03
Reassign action only appears on Available workers
— UI guides intent, prevents accidental over-
allocation.
BONUS SCREENS
Workers App
01
Three statuses (Available / Assigned / On leave)
cover every worker state with no ambiguous in-
between.
02
Current project + today's task surface side-by-side
— see why someone is busy without clicking
through.
03
Reassign action only appears on Available workers
— UI guides intent, prevents accidental over-
allocation.
/ 08 · DESIGN SYSTEM
01 · COLORS
Construction-alert palette
#E53E3E
Alert Red — Primary
Urgent · critical · understaffed
#1A1A1A
Ink Black
Headers · primary text · CTAs
#3B82F6
Signal Blue
Fully staffed · confirmed
#10B981
Active Green
Available · on-time
#E5E7EB
Smoke 200
Borders · dividers
#6B7280
Smoke 500
Secondary text · captions
02 · TYPOGRAPHY
Inter + JetBrains
Display 56
DM Sans Bold
56 / 60 · -3%
Heading 40
DM Sans Bold
40 / 44 · -2.5%
Sub-head 32
DM Sans Medium
32 / 38 · -2%
Body — Inter Regular 16, the working font of every
screen.
Inter Regular
16 / 26 · 0%
CAPTION · METADATA · STATUS
JetBrains Mono
11 / 16 · +6%
03 · COMPONENTS
Built on ShadCN
BUTTONS
Primary
Secondary
Disabled
STATUS BADGES
AVAILABLE
ASSIGNED
ON LEAVE
UNDERSTAFFED
TASK CARDS · TWO STATES
Foundation pour
8/8
Wiring · Delta
3/5
AVATAR STACK
JK
MR
SP
AN
+12
INPUT
📅 Mon, Oct 14
Headcount — 5
04 · ICONS
Construction operations set
Tokens exported as CSS variables + Figma styles · components built on ShadCN/Radix
primitives · ready for React implementation and dark mode.
/ 09 · WHAT THIS UNLOCKS
Fewer coordination calls
From 40+ messages per schedule change to
system-wide updates that propagate automatically.
Avg task assignment time
Down from 45 minutes of back-and-forth WhatsApp coordination per assignment.
Double-bookings
System-enforced constraints prevent scheduling conflicts at the data layer.
By introducing a single operational state, ZenTrades eliminates the cognitive
/ 10 · REFLECTION
This was a 1.5-day sprint, so scope was tight. With more time, I'd:
01
Add offline-first support for PMs in low-signal construction sites — sync queue + conflict resolution.
02
Design the worker mobile app (currently web-only) — focused on check-in, task detail, and one-tap PM contact.
03
Build time-tracking integration — clock in/out via site geofence, automatic timesheet generation.
04
Add predictive staffing — "Site Charlie usually needs 2 extra laborers on Mondays" from historical patterns.
05
Test with real PMs in the field — not hypothetical personas. Validate every assumption against a live operation.
The hardest part wasn't the UI — it was understanding the operational mental model of construction contractors. They don't think in tasks; they think in projects, capacity, and firefighting.
The system had to match that reality. Every decision in this case study comes back to one question: does this surface live operational state, or does it hide it behind another layer of indirection?
Thanks for reading.
Want to talk construction tech, workforce coordination, or B2B operations design?