Password Protected Case Study

This case study contains confidential details. Enter the password to continue.

Incorrect password. Please try again.
  • Product Design
  • Enterprise UX
  • Internal Tools

HR System Architecture & Design

Transformed fragmented, manual workflows into a unified digital HR system for an F&B enterprise.

Collage of interface elements from the HR system.

OVERVIEW

Dian Xiao Er’s HR operations relied on fragmented tools and manual processes, making them difficult to coordinate, track, and scale across the organisation.

I designed a modular HR system spanning recruitment, training, and performance appraisal, structuring these complex workflows into clear, digital systems.

It improved visibility, reduced operational overhead, and enabled more consistent execution at scale.

ROLE

Sole Product Designer & Business Analyst

TEAM

1 Project Manager, 1–4 Software Engineers

TIMELINE

April 2023 – May 2025 • 1 year of active design & business analysis

PROBLEM CONTEXT

Fragmented, manual workflows

Dian Xiao Er is an F&B enterprise with over 600 employees across their HQ, central kitchen, and multiple outlets.

Their existing HR platform (Times Software) served as a system of record for employee data but did not support their end-to-end operational workflows.

As a result, HR processes relied on fragmented tools such as Excel, WhatsApp, and paper forms, leading to manual coordination, repeated data entry, and limited operational visibility.

SCOPE & APPROACH

Filling operational gaps, module by module

Rather than replacing the existing HR platform, the system focused on filling operational gaps, syncing with it via API to maintain a single source of truth for employee data.

The system was developed in phases across three modules — Recruitment, Training, and Performance Appraisal — each following a consistent process from workflow discovery to system definition, validation, implementation, testing, and rollout.

Flowchart of end-to-end process from workflow discovery through rollout and adoption.

WORKFLOW DISCOVERY

Mapping workflows, identifying pain points

I conducted stakeholder workshops to map existing workflows and identify key pain points across the modules. Through structured questioning and scenario walkthroughs, I surfaced edge cases, dependencies, and logic gaps.

Swimlane diagrams used to clarify operational flows.

SYSTEM DEFINITION & VALIDATION

Translating workflows into system behaviour

I translated the workflows into structured system behaviour, defining role-based permissions, relationships between users, data, and actions, along with state transitions and decision rules.

These were formalised in a System Requirements Specification (SRS), combining flows, rules, and wireframes into a single reference. The SRS was reviewed with stakeholders to validate the system design and ensure alignment before interface design and development.

Overview of the Performance Appraisal system flow.

SYSTEM DESIGN – RECRUITMENT & PERFORMANCE APPRAISAL

Designing workflow progression

A key part of the Recruitment and Performance Appraisal system design was introducing structured status flows, where the system governed progression through defined stages and the actions available at each point. This created a consistent model for tracking work state.

Recruitment state transition diagram showing workflow stages and transitions. Performance Appraisal state transition diagram showing workflow stages and transitions.

SYSTEM DESIGN – TRAINING

Managing fixed training cycles and content updates

A key challenge in the training system design was managing the conflict between fixed annual training cycles and frequently updated course content.

I worked with HR to define a versioning system where incomplete learner progress is tied to the active course version and resets when content changes, supported by course publish notes and automated learner notifications to maintain clarity.

INTERFACE DESIGN

Clear, actionable interfaces

I designed clear, actionable interfaces to ease the adoption of the new system, recognising that complex enterprise tools often fail not in capability, but in usability and user acceptance.

Information was structured to align with users’ mental models and workflows, ensuring that key signals such as status and next actions were easy to locate and interpret.

Consistent interaction patterns were applied across modules to ensure predictable behaviour and reduce the effort required to learn the system.

INTERFACE DESIGN HIGHLIGHT 1

Visible statuses

The recruitment workflow required HR to manage a high volume of applications across 17 statuses within a single consolidated table view.

To improve scanability, I grouped these into six broader stages, and encoded them using colour for quick interpretation at a glance within the status column. This reduced cognitive load when reviewing applications, while preserving granular detail through individual status labels and icons.

This structure was also reused across related components such as activity timelines and progression indicators to maintain consistency in how status information is communicated across the module.

Status chip design process showing grouping of statuses into broader stages, iterations of chip variants, and annotated final design.

INTERFACE DESIGN HIGHLIGHT 2

Consistent interaction patterns

Many HR workflows required employees to be grouped by position, with structures varying by workflow context.

I designed a rank-ordered interface that enables users to split or merge groups while maintaining the organisation’s position hierarchy.

This pattern was applied across both Recruitment and Performance Appraisal modules, creating consistent system behaviour and reducing cognitive load for users.

Mockup of position group setup in Recruitment. Mockup of position group setup in Performance Appraisal.

IMPACT

Smooth adoption, improved visibility, and reduced operational overhead

The system was successfully deployed across all three HR modules. Despite a diverse user base with varying levels of digital literacy, adoption was smooth, requiring minimal training.

By replacing fragmented, manual processes with structured digital workflows, the system improved visibility and reduced operational overhead across HR functions.

The HR team shared that they can’t imagine going back to the old way of working — the system has become an integral part of their day-to-day operations.