Industry
Human resources planning
Timeline
2025.3 -4
Category
SaaS, B2B
Leave management portal redesign
Leave management portal redesign
Leave management portal redesign
Context
Context
As the product designer responsible for the leave management experience, I owned the end-to-end design process — synthesising UX audit findings, leading ideation and iteration, collaborating with product and engineering, and delivering accessible, user-tested solutions.
1
Timeline
6 weeks (3 sprints)
2
The Team
Designer, PM, BA, GGM, Engineers*5
3
My Role
Product designer
Problem
Problem
When working on the UK HRP UX Audit, we conducted usability testing with local government employees using the self-service leave management module. The findings were striking:
When working on the UK HRP UX Audit, we conducted usability testing with local government employees using the self-service leave management module. The findings were striking:
53% of employees
53% of employees
struggled to understand leave balances and leave status
struggled to understand leave balances and leave status
⬆️ Increased reliance on HR support for simple tasks
⬆️ Increased reliance on HR support for simple tasks
⬇️ Reduced efficiency across employee and HR workflows
⬇️ Reduced efficiency across employee and HR workflows
Impact
Impact
40% ⬇️
Task Completion time
Task Completion time
+1.2 ⬆️
+1.2 ⬆️
CSAT score
CSAT score
Full Deck
Full Deck
Curious about the iterations and behind-the-scenes stories from development? I’d love to share more in my case study presentation.
Process
1
Research + UI audit
Identify key usability issues.
2
Ideation + Design
Explore and refine design solutions.
3
Test + iteration
Validate and improve with users.
Understand the problem
I began by reviewing feedback from the UK UX audit and internal HR teams. The existing Leave Summary screen is confusing:
What leave was actually available
How to distinguish between pending and approved leave
Where to find leave history
UI audit
I also conducted a heuristic UI audit to identify issues in information hierarchy, visual clarity, and navigation. Key problems:
Unclear balance logic: Pending leave was not deducted or clearly reflected in available balances
Hidden critical information: Leave breakdowns and eligibility were buried in a small summary tab
Design iterations
1st round: Task Card + Calendar
I initially explored a task-card layout with a monthly calendar, but technical constraints and user behaviour showed the calendar added complexity without supporting core tasks. After reviewing with developers, the PO, and BA, I pivoted to a balance-focused design prioritising clarity and speed.
2nd round: Layout Simplification
I refined the layout to improve balance clarity and scalability across organisations with different numbers of leave types. I adjusted the structure to handle edge cases such as very few or many leave types, long labels, and balance overflow without losing readability.
User Testing & Decisions
Key outcomes:
Users found the balance breakdown confusing and visually distracting.
We moved the breakdown into a tooltip to reduce cognitive load.
Leave history was brought forward to improve discoverability and reduce navigation effort.
Accessibility check
Colours and contrast were reviewed against WCAG standards, and the half-day leave indicator was redesigned for clarity.
Design iterations
Process
1
Research + UI audit
Identify key usability issues.
2
Ideation + Design
Explore and refine design solutions.
3
Test + iteration
Validate and improve with users.
Understand the problem
I began by reviewing feedback from the UK UX audit and internal HR teams. The existing Leave Summary screen is confusing:
What leave was actually available
How to distinguish between pending and approved leave
Where to find leave history
UI audit
I also conducted a heuristic UI audit to identify issues in information hierarchy, visual clarity, and navigation. Key problems:
Unclear balance logic: Pending leave was not deducted or clearly reflected in available balances
Hidden critical information: Leave breakdowns and eligibility were buried in a small summary tab
1st round: Task Card + Calendar
I initially explored a task-card layout with a monthly calendar, but technical constraints and user behaviour showed the calendar added complexity without supporting core tasks. After reviewing with developers, the PO, and BA, I pivoted to a balance-focused design prioritising clarity and speed.
Design iterations
2nd round: Layout Simplification
I refined the layout to improve balance clarity and scalability across organisations with different numbers of leave types. I adjusted the structure to handle edge cases such as very few or many leave types, long labels, and balance overflow without losing readability.
User Testing & Decisions
Key outcomes:
Users found the balance breakdown confusing and visually distracting.
We moved the breakdown into a tooltip to reduce cognitive load.
Leave history was brought forward to improve discoverability and reduce navigation effort.
Accessibility check
Colours and contrast were reviewed against WCAG standards, and the half-day leave indicator was redesigned for clarity.
Handoff Files
Handoff Files
To ensure a smooth build and minimise back-and-forth during development, I prepared developer-ready handoff files in Figma, covering both standard and edge-case scenarios.
Next Project
Next Project
