← Back/Design System

Desact

Three years of independent feature teams had produced 12 button styles and 4 competing navigation patterns inside one HR platform, and the resulting inconsistency was adding measurable cognitive load to every workflow. In 2025, as Lead Product Designer, I inventoried 65 screens, interviewed the HR managers, recruiters and admins living in them, and rebuilt the product on a token-first system, prioritised by what analytics showed people actually used, with a written rule for when to extend the system versus build custom.

RoleLead Product Designer
Year2025
Tags
Design SystemDashboardHRComponents
View on DribbbleGet this Product
Desact
At a glance

91%from 34%

Design consistency

18%

Faster average HR task

3 teams

Adopted it in the first quarter

01The problem

Three years of independent teams left one HR platform with 12 button styles.

Four competing navigation patterns and no shared library across 65 screens created cognitive overhead for HR managers, recruiters and admins. It slowed every workflow by an average of 23%.

02How we thought about it

The hard part was adoption, not drawing the components.

A previous attempt had already collapsed under its own bloat. The real task was proving to three teams that consolidation would not slow them down. That evidence had to come from analytics and interviews, and the system's growth needed a rule.

03What we changed

  1. 01

    Built the 20 most-used components first

    Analytics set the order. The system had to earn adoption by solving what people touch daily.

  2. 02

    Wrote a rule for extending the system

    An explicit framework decides when to extend the system and when to build custom. That is what prevented the bloat that killed the previous attempt.

  3. 03

    Co-authored component APIs with engineering

    Specs translated one-to-one into implementation instead of being reinterpreted. A library that matches the code gets used rather than re-implemented.

The trade-off

I did not ship separate table components for each density, and made density a token the one table reads, because three forks would have guaranteed drift.

04What it did

Design consistency rose from 34% to 91% and average HR task completion time dropped by 18%. The system was adopted across 3 product teams within the first quarter.

How we knewEvidence

A 65-screen inventory, interviews with three roles, and analytics deciding the order.

Audit

Quantitative

65

Screens inventoried. 12 button styles and 4 competing navigation patterns found.

Interviews

Qualitative

8

Internal users across HR managers, recruiters and admins, with friction traced to specific inconsistencies.

Analytics

Quantitative

20

Most-used components, chosen from usage analytics and built first.

Analytics

Quantitative

34% → 91%

Design consistency, with 18% faster HR tasks and adoption by three teams in the first quarter.

DecisionsAnd why

What we saw, what we knew, what we chose, and what we gave up.

01

Sequence by what people touch daily

What we saw
Three years of independent teams had left every local solution permanent.
Evidence
Audit· Quantitative12 button styles, 4 navigation patterns, no shared library across 65 screens.
Analytics· QuantitativeComponent usage decided the first twenty.
So we
A token-first system built upward from spacing, type and colour, with a written rule for extend-versus-custom.
Not
Documenting every component evenly.
What happened
Consistency rose from 34% to 91%, and tasks were 18% faster.

User testingWhat was and was not tested

Interviews with eight internal users and usage analytics, then measured consistency. An independent usability test is not recorded.

My role

Lead Product Designer

What I personally owned on this project.

  • 01Led the full interface inventory and the user research behind the consolidation
  • 02Designed the token architecture and 80+ Figma components with variants, states and responsive behaviour
  • 03Co-authored component APIs with engineering so specs translated one-to-one into implementation
  • 04Prototyped the complex patterns, bulk actions, nested permission tables, calendar drag-and-drop
  • 05Wrote the accessibility annotations to WCAG 2.1 AA for every component
Made with
FigmaDesign tokensComponent APIsWCAG 2.1 AAPrototyping
Next Project

PrivacyWall

© 2026 Alhasan HosniDesigned & Built with precision