HR Management Platform — UX Case Study
I rebuilt Northwind HR's dashboard, analytics, and performance modules. 47 screens. The performance page swapped the org chart for an isometric office.
Client
Northwind HR
Industry
B2B SaaS · HR Tech
Role
Lead Product Designer
Timeline
14 weeks
The Challenge
Northwind's HR product was a feature pile. 22 onboarding screens. An analytics page with thirty charts. A performance section that was, literally, a tree view. New customers were churning in the first 90 days.
The Solution
I cut everything that didn't change a weekly action. The performance page swapped the org chart for an isometric office. Every chart on the analytics page had to answer a question an HR lead asks weekly. If it didn't, it moved behind a tab.
47
Screens shipped
dashboard, analytics, performance, onboarding
−63%
Onboarding screens cut
from 22 down to 8, no functionality lost
4.6★
User rating post-launch
1,200+ employees across three launch customers
01
The Approach
I led design end to end over fourteen weeks. One PM, five engineers.
First two weeks — interviews with twelve HR leads. I didn't open Figma. I wrote a list of every weekly action HR teams take, then mapped each existing screen against it.
Half the screens didn't map to anything. That list became the brief. The rest of the project was building permission to remove them.
02
Key Decisions
01 / 05
The performance page was the hardest call. Most HR tools default to a tree view. A tree tells everyone they're a box. I rebuilt it as an isometric office — every department a building you can step inside. Hierarchy is implied by the map, not enforced by indentation.
An office, not an org chart.
02 / 05
HR analytics pages collapse two ways — too sparse to be useful, too dense to read. I stress-tested with three HR leads. Five tiles up top, a story column, two charts. Anything that didn't change a weekly action got cut or moved behind a tab.
Every element earned its spot.
03 / 05
The isometric city is a navigation primitive, not decoration. Each district is a department you can drill into. Built once, used by every team page from there — Engineering, Sales, Recruitment — without redrawing.
If the illustration ships, it has to do work.
04 / 05
Greyscale first. I locked the chart taxonomy and the card grid before any color or status was applied. Hiring as a line, performance as a donut, revenue as bars. Every variant fits a 12-column rhythm.
Color is the last decision, not the first.
05 / 05
Tested four ways to show a performance trend — number, sparkline, ring, speedometer. Speedometer won. HR leads got the 'what zone are we in' read in one glance, with the exact value visible inside the dial.
Pick the chart that answers the question in one look.
03
The Outcome
Shahriar took a feature-pile of an HR product and turned it into something the team actually opens in the morning. The performance page alone is what sales now leads demos with.
Sarah Chen
VP of People · Northwind HR
Updated container layout — headcount, attendance, approvals queue, and onboarding pipeline in one view.
Matrix card performance view — department health at a glance across the HRMS.
What this means
Mid-market B2B fails when it copies enterprise. The win on Northwind was subtraction with a paper trail. The hardest call wasn't the isometric office or the analytics layout — it was building permission to remove things, weeks before the first screen got drawn.
04
What I'd Do Next
- Move the speedometer treatment into a chart kit other modules can use. Right now it lives only on the performance page.
- Add a manager-side mobile companion. Approvals and PTO requests don't need a desktop.
- Phase two: cut payroll. It's the next 22-screen tangle waiting for the same audit.
- Top Rated on Upwork
- 100% Job Success
- $80K+ earned
- 8+ years
Open to senior remote roles.
Full-time employment or long-term contract. Senior Product Designer or Senior UX Designer. Reach me on LinkedIn or by email.
Or email hey@shahriarsultan.com