An HR suite employees can actually navigate
A human resources platform that brings onboarding, time off and employee records into one clean interface managers and staff use every day.
How the work was scoped
- Industry
- Professional Services
- Duration
- 16 weeks
- Cooperation model
- Time & materials
- Services
- Portal redesignWorkflow automationRole permissions
- Integrations
- HubSpotDocuSignXeroGoogle Workspace
- Technologies
- Next.jsTypeScriptTailwind CSSPostgreSQLNode.jsGraphQL
- Team
- 1 Project lead1 Product designer2 Frontend engineers1 Backend engineer1 QA engineer
Client name withheld under NDA. Engagement details are shown to the extent our agreement permits.
The hard problem
- 01
Employees submitted time-off by email, onboarding documents went missing, and managers spent hours pulling simple headcount reports.
Time off arrived by email and was transcribed by hand, so a booking existed only if someone remembered to enter it. Onboarding documents were chased over Slack and lost when the chaser went on leave. The headcount discrepancy that started the engagement turned out to be eleven leavers still active in one portal and gone from the other two.
We built a unified HR portal with self-serve time off, guided onboarding checklists, and role-based views for managers and HR admins.
How the pieces fit
- 01
Audited employee and manager workflows across 5,000 users
Every workflow was traced against the systems it actually touched, which is how the three portals turned out to disagree about eleven people.
- 02
Designed a clean self-serve portal for time off and personal data
Time off and personal data write through one employee record, so a balance on screen is the number payroll will use, not a copy of it.
- 03
Automated new-hire onboarding checklists and reminder triggers
The rules came out of HR's own exception list: twelve variations on a standard hire that had all been handled by memory until then.
- 04
Built role-aware dashboards for managers and HR leads
Permissions resolve server-side per request, so a manager sees their own reports because the query walks the reporting line. Nobody ticked a flag to make it so.
The system we were asked to build
Legacy HR tools were spread across three portals with confusing menus. We redesigned employee self-service and manager workflows so the obvious path is the right one.
Five thousand employees across four countries, and HR had been assembled by acquisition: three portals, three logins, and a fourth system for payroll that none of them talked to. The trigger was a headcount report that took two days to produce and disagreed with itself, arriving in the same month the company committed to doubling in a year.
Product Design & Web
Self-Service Employee Portal
Lets employees manage PTO, update benefits and view pay stubs on their own.
Time off, benefits and payslips previously lived in three systems with three logins. We put a GraphQL layer in front of all three and modeled the employee as one record, so a balance shown on the dashboard is the number payroll will actually use. Requests write through immediately and display as pending instead of optimistically confirming: a silently failed booking was the single most common support ticket in the old system.
- One GraphQL layer over three legacy systems
- Balances read from payroll, never a cached copy
- Pending states instead of optimistic confirmations
The time off page: a 30-day allowance split into 12 taken, 5 booked and 13 left, a 5-day draft that would leave 8, and every request this leave year with its state.
Automated Onboarding Flow
A new starter's onboarding board: nine steps, seven signed off before day one, each with an owner, a due date and the number of reminders it needed, beside everyone else mid-onboarding with a stalled step raised.
Guided onboarding checklist for new hires with automatic document collection and signature tracking.
The checklist is generated from the offer record, so a contractor in another country gets a different set of documents without anyone assembling it. Each step knows what unblocks it: signature tracking is webhook-driven off the e-sign provider, and equipment requests open a ticket in the IT queue automatically. HR watches one board of everyone mid-onboarding, with stalled steps pushed to the top.
- Checklists generated per role, country and contract
- Webhook-driven signature tracking, no manual chasing
- Stalled steps surfaced on a single HR board
Role-Based HR Dashboard
Gives managers and HR leads clear oversight of team capacity, performance reviews, and compliance.
Permissions resolve server-side on every request; hiding UI was never the control. A line manager sees capacity and review status for their own reports only; an HR admin sees the whole org and the compliance dates running out. Every figure on the board links through to the record that produced it, so a manager questioning a number reaches the source in one click instead of emailing HR and waiting a day.
- Server-side permission resolution, never hidden UI
- Capacity, reviews and compliance dates on one board
- Every figure links through to its source record
The HR lead's month: 1,284 sign-ins, 94 percent finishing unaided, a task-by-task record of the steps and minutes taken out of the old journeys, and right-to-work checks and certificates ordered by time left: three expiring within 30 days and one driving licence 33 days past.
Phase by phase
Phase 1: HR Portal & Workflow Audit
Employee Journey & Bottleneck Analysis
Audited employee onboarding, PTO request bottlenecks, and performance review workflows across 5,000 employees.
- HR Workflow Audit
- Employee Journey Map
- Usability Matrix
Phase 2: Self-Service UI Design
Employee & Manager Portal Interface
Designed a clean self-serve portal for employee onboarding, PTO approvals, and team organizational charts.
- Figma Design Specs
- Self-Service Portal Prototype
- Design Tokens
Phase 3: RBAC & Payroll Integration
Role-Based Access & Payroll Sync Engine
Engineered strict role-based access control (RBAC) and automated synchronization with external payroll platforms.
- RBAC Security Layer
- Payroll Sync Connector
- Audit Trail Logging
Phase 4: Company Rollout & Training
Enterprise Deployment & Staff Onboarding
Deployed across all company departments, cutting HR administrative tickets by 50% in the first quarter after launch, measured against the quarter before.
- Company Rollout Schedule
- Staff Training Portal
- Admin Documentation
The August run waiting on approval: gross, deductions and take-home for six people, with take-home footing to £17,408.00 and one changed rate flagged for a second look.
What it carries now
-50%
Admin ticket reduction
<24h
Onboarding time
94%
User adoption
Ticket volume is the HR service desk's own count, comparing the quarter before the portal with the quarter after. Onboarding time measures offer acceptance to all documents complete. Adoption is the share of employees who used self-service at least once in the first ninety days, which is a stricter test than the share who logged in.
Client name withheld under NDA. Figures are approximate, drawn from the engagement’s own reporting.
What the architecture settled
Self-service employee PTO & onboarding reduced HR admin ticket volume by 50%.
The tickets that disappeared were mostly one question, "has my request gone through?", and a visible pending state answers it without anyone replying.
Automated payroll sync eliminated manual monthly re-entry across departments.
Payroll stopped being retyped because the portal never held its own copy of a figure payroll owned, so there was nothing to reconcile.
Employee onboarding completion time dropped from 5 days down to under 24 hours.
Onboarding collapsed from days to hours because the delay had never been the work. It was waiting for someone to notice the previous step had finished.
How the work was run
- 01
A cross-functional team of 5 worked on a time & materials basis over 16 weeks, covering Portal redesign, Workflow automation, Role permissions. We shipped in two-week increments, each one releasable and reviewed live before it merged. Decisions were recorded as they were made, so the reasoning survived the people who made it.
We shipped in two-week increments, tested against real HR staff with no product owner speaking for them, and each one went to a pilot department before the whole company. The team stayed embedded with HR operations throughout, which is how the accrual rules (the part every previous attempt had got wrong) were caught in week three instead of at launch.
One request, end to end
Five days of leave, from a draft to the payroll that pays it
Nadia has 13 days left. Follow her request through the allowance preview, her manager's approval and the payroll balance, and watch for the HR ticket that used to follow every one of these. Switch steps, or use the arrow keys once a tab is focused.
Nadia picks Mon 19 to Fri 23 October. The suite counts working days against her own calendar and bank holidays: five. Nothing is written anywhere yet.
- 1Draft 5 days14:02
- 2Preview 13 → 814:03
- 3Manager approves16:40
- 4Payroll & calendar16:40
- Nadia's time off pageDraft · 5 days
- Rhys's approvalsNothing yet
- Team calendarNothing yet
- Payroll leave balance13 left
Why the ticket disappears: the old portals confirmed a booking optimistically, and a silently failed one was the most common support ticket. A visible pending state answers the question before anyone has to ask it.
From a leave request to the payroll that pays it, through one record
Three portals and a separate payroll system used to hold their own copies of a person. Now every screen, every manager and the payroll run read the same record, so there's nothing left to reconcile.
- 01 · TriggerSelf-service actionA request writes through immediately and shows as pending, never as an optimistic confirmation that might silently fail.
- 02 · IngestionOne GraphQL layerSits in front of the three legacy portals, so the employee is modeled as one record instead of three disagreeing copies.
- 03 · EnginePermissions & workflow rulesAccess resolves server-side per request by walking the reporting line. Onboarding checklists are generated per role, country and contract.
- 04 · StateEmployee record in PostgreSQLBalances are read from payroll, never cached, and changes land in an audit trail.
- 05 · DeliveryPayroll sync & role viewsPayroll is synchronized automatically instead of retyped each month, and every figure on a board links to the record behind it.
Pay, right to work & who sees whose record
Payroll reads the figure and never retypes it
The portal holds no copy of a figure payroll owns. Balances and pay come from the one employee record through the payroll sync, and a changed rate is flagged for a second look before the run is approved.
Expiry dates surface before they lapse
Right-to-work checks and certificates sit on the HR admin board ordered by time left, so anything inside the next 30 days, or already past, sits at the top instead of in a spreadsheet.
Managers see their own reports, by query
Permissions resolve server-side on every request by walking the reporting line; nothing relies on hiding UI. Data a manager may not see never reaches their browser, and access is written to an audit trail.
Are your staff still emailing HR to ask whether their holiday went through? Scope your build in three minutes.
Scope your buildNearby engagements
AI & AutomationA private legal assistant grounded in verified precedents
A private knowledge assistant that searches internal case files and precedents, providing cited answers legal teams can verify in seconds.
Legal & Law Firms · 14 weeks
Product DesignAn onboarding flow that guides trial users to value
A redesigned SaaS trial onboarding experience with progressive checklists, sample data, and inline guidance that turns signups into active subscribers.
Professional Services · 10 weeks
Product DesignA design system that brought speed and consistency to 4 product teams
A token-based design system in Figma and React that eliminated component duplication across 4 product squads and cut the time from design handoff to merged frontend.
Professional Services · 14 weeks
Let's talk
Running a large platform, shaping a first MVP, or getting a product ready for a funding round? Tell us where you are. We'll shape the process around it, and stay with you after launch.
