← All work
MapleHR.io

One HR system that fits a ten person startup and a two thousand person enterprise

A complete HRMS built to replace the spreadsheets, without becoming one.

MapleHR.io centralises employee data, leave, attendance, payroll, claims, tickets, projects and recruitment in a single subscription platform. The design problem was density: every module an enterprise needs, arranged so a first time admin can still find the one thing they came for.

MapleHR dashboard
6 weeks
Discovery to hi-fi
2,500+
Design system components
14
Modules in one platform
B2B
Enterprise SaaS, subscription
My role
Product DesignerResearch, IA, user flows, wireframes, UI, design system contribution
Timeline
31 Aug to 16 Oct 2023Six weeks, five phases
Category
Enterprise B2B SaaSSold on subscription to companies
Where
DevsincIn-house product, first six months of my tenure
Tools
FigmaGoogle Forms, FigJam, Notion
Chapter 01

Product overview

MapleHR.io is a comprehensive Human Resource Management System designed to streamline and optimise HR processes inside organisations. It works as a centralised platform that integrates the separate HR functions companies normally run across four or five disconnected tools, so a business can manage its whole workforce from one place.

That single sentence hides the actual design problem. An HRMS is not one product, it is fourteen: dashboard, departments, people, workflow, roles, tickets, leaves, claims, inventory, D-HAR, projects, reports, calendar and settings, plus an admin panel and an integrations layer on top. Every one of those has its own vocabulary, its own permissions and its own idea of what a "record" is. Ship them without a system and you get fourteen products wearing the same logo.

The buyer

Two very different companies

A ten person startup wanting leave tracking, and an enterprise wanting payroll, ATS and compliance. Same product, same price page, opposite tolerance for complexity.

The user

Not a software person

The daily operator is an HR generalist or an office manager. They did not choose this tool and they will not read documentation for it.

The incumbent

A spreadsheet

The real competitor is not Workday. It is the Excel file that already works well enough. Anything slower than that file loses.

The constraint

Six weeks, five phases

Empathise, Define, Ideate, Design, Test, each roughly a week. Research had to be small and decisive rather than exhaustive.

Chapter 02

Process

A standard design thinking sequence, run tight because the window was six weeks. Each phase had a date box and a deliverable, and nothing moved on until that deliverable existed.

Phase 01

Empathise

31 Aug to 8 Sep

Problem framing with stakeholders, objectives and goals, end user definition.

Phase 02

Define

8 to 15 Sep

Quantitative survey, persona, competitor analysis against four incumbents.

Phase 03

Ideate

15 to 22 Sep

User flow, empathy map, information architecture for the whole platform.

Phase 04

Design

22 to 29 Sep

Style guide, mid fidelity wireframes, high fidelity screens.

Phase 05

Test

Oct

Walkthroughs with HR operators, iteration, handoff to engineering.

Design thinking process
The five phase process as presented to stakeholders
Chapter 03

Problem statement

Inefficient workforce management, disparate employee data and a lack of streamlined processes pose significant challenges to organisational efficiency and productivity. Employee records live in one place, leave requests in an inbox, payroll in a spreadsheet and recruitment in somebody's head. Nobody has a reliable answer to a simple question like how many people are on leave next Thursday, and every answer costs somebody an afternoon.

Reframed as a design question: how might we centralise fourteen HR functions into one platform without making the daily tasks, which are the simple ones, any harder to reach than they were in a spreadsheet?

Objective one, centralised data management
  • Develop a comprehensive HRMS to centralise employee data and eliminate data silos
  • Ensure accurate and up to date information is accessible to authorised personnel
  • Make that data usable for decision making and strategic planning, not just storage
Objective two, efficient workflow processes
  • Streamline recruitment, onboarding and performance management
  • Increase operational efficiency by automating repetitive tasks
  • Reduce manual workload and accelerate the overall employee life cycle

Target audience: working adults between 18 and 60, spanning the HR generalist who lives in the tool daily, the line manager who approves things weekly, and the employee who opens it twice a month to request leave.

Chapter 04

Research

An online survey of HR practitioners and managers run through Google Forms, aimed at communication efficiency, bounce rates and overall experience of the HR tooling they already used. Small sample, but it was diagnostic rather than statistical: the point was to confirm which pains were universal before committing six weeks of design to them.

The questions were deliberately about outcomes rather than features. What percentage increase in employee productivity follows an HRMS rollout. How does adoption correlate with a reduction in time to fill positions. What measurable impact does it have on the accuracy and completeness of employee data. Asking it that way meant the answers could be turned into success criteria instead of a wish list.

Quantitative research results
Quantitative survey, outcome framed questions

Persona

One primary persona carried the prioritisation calls: a young technical employee inside a growing company, comfortable with software, impatient with process, and the person most likely to abandon the tool if it felt slower than doing it manually. Main goal: streamline HR processes through efficient use of the system. Pain points: disparate data sources causing errors, resistance to change from traditional manual processes, and concerns about data security and privacy.

User persona
Primary persona, goals, pain points and expectations

Competitor analysis

Four incumbents were audited feature by feature: Resourceinn, Sage, Workday and Zoho. Each was scored on activity dashboard, learning and development, workflow management and calendar management, then read qualitatively for what users actually praised and complained about in reviews.

The pattern was consistent and useful. The tools people liked were liked for being easy to learn, and the tools people hated were hated for being slow, expensive to train on, or crash prone under real load. Nobody complained about missing features. That told us the differentiator was not coverage, it was time to competence, which is a design problem rather than a roadmap problem.

Competitor analysis matrix
Feature matrix across Resourceinn, Sage, Workday and Zoho
Chapter 05

Flows & architecture

The user flow starts at the marketing site and splits into the two things a visitor can do: understand the product, or get into it. Everything under Features fans out into the fourteen modules, which is where the density lives. Drawing it this way made the argument concrete: the marketing surface has to sell fourteen modules, and the product surface has to hide thirteen of them at any given moment.

MapleHR user flow
User flow from landing page through to the module set
Empathy map
Empathy map, says / thinks / feels / does
Information architecture
Information architecture

The empathy map is where the migration anxiety showed up plainly. People were not worried about whether the software worked, they were worried about whether their team would adopt it, whether the data would survive the transition, and whether they could convince their own management it was worth the change. That reframed onboarding from a tutorial problem into a confidence problem, and it is why the dashboard leads with counts the user can immediately verify against what they already know.

Chapter 06

Style guide

Inter throughout, on a strict five step type scale. Green carries meaning rather than decoration: it marks positive state, primary action and anything the user has completed. The deep slate does the structural work so the green stays rare enough to still mean something on a dashboard covered in numbers.

Primary#1EAE63
Secondary#455063
Headings#1D263D
Gradient 02#2CA096
Gradient 03#FF979D
Gradient 05#FF6800
Heading 1Inter Bold / 48 / 50
Heading 2Inter Bold / 36 / 40
Sub headingInter Semibold / 22 / 24
Body mediumInter Regular / 18 / 32
Body smallInter Regular / 16 / 24
MapleHR style guide
Typography, spacing, grid and colour tokens

The system this fed into grew past 2,500 components, documented separately so engineering could assemble screens that had never been drawn. On a product with fourteen modules that is not a nice to have, it is the only way the thing ships.

Chapter 07

Wireframes to interface

Mid fidelity first, at full page length, so the argument about hierarchy could be had before anybody argued about colour. Every marketing page and every product screen was blocked out in grey, reviewed, and only then taken to high fidelity.

Mid fidelity wireframes
Mid fidelity wireframes, scroll inside the frame
High fidelity design
High fidelity design, scroll inside the frame

The finished marketing site leads with the dashboard, because the dashboard is the argument. A prospect scrolling the homepage should be able to see the thing that replaces their spreadsheet inside the first screen, and every module section below repeats the same pattern: a sentence of plain language, three specifics, and a real screenshot rather than an illustration.

Chapter 08

Outcome

14 → 1
Separate HR functions consolidated into a single platform
2,500+
Components in the system, so screens could ship without being drawn first
6 weeks
From first stakeholder session to high fidelity handoff
Two tiers
Free and paid with payroll and ATS, from one interface

MapleHR shipped as a subscription product with a free tier and paid tiers that add payroll and applicant tracking. The design decision that carried the most weight was the least visible one: putting the module set behind a persistent left rail with a fixed order, so that whichever tier a company bought, the interface they learned stayed the same shape as they grew into it.

Chapter 09

What I would do differently

01

A bigger sample, or none at all

Eight survey responses is enough to confirm a hunch and not enough to defend a decision. I would either run it properly or spend the same week on five real interviews, which would have produced sharper material.

02

Design the migration, not just the product

The empathy map told us the fear was the transition, and we still designed the destination. Import, mapping and first week states deserved their own flow.

03

Prototype permissions early

Roles and permissions touch every module and were resolved late. On a multi tenant enterprise product that should be a phase one decision, not a phase four one.

04

Instrument the empty states

A brand new HRMS is empty by definition. The first run experience carries more weight here than any dashboard, and it got the least design attention.

Credits

MapleHR was an in-house product built by a design team at Devsinc. Add your own contribution here in one sentence, and name the other designers you worked alongside. Shared credit reads as senior; implied sole authorship does not survive a reference check.

More case studies

Pick where to go next