Case Study

OfficekitHR

OfficeKit HR is a comprehensive HR operating system designed to
automate and simplify the entire employee lifecycle.

Role

Senior Product Designer

platform

Web SaaS, Mobile App

Team

PM, 10 Engineers, Founder

tools

Adobe XD, Notion

Overview

OfficeKit HR is a fully integrated HR SaaS platform and mobile app that automates and streamlines the entire employee lifecycle — from onboarding to exit management — within one unified system.

I led the end-to-end UX/UI product design, defining the product experience, interaction patterns, and scalable design system across web and mobile platforms.

Business Goals

Automated complete employee lifecycle

Unified web dashboard + mobile experience

Scalable design system built in XD

Multi-role architecture for HR, Managers & Employees

The Problem

Growing companies were breaking under
fragmented HR complexity

Growing companies face significant challenges when managing their workforce with disparate tools. Attendance tracking
happens in one system, payroll in another, and performance management in yet another platform. This fragmentation creates a
frustrating experience where HR teams spend countless hours switching between tools, manually entering data, and reconciling
information across systems.

Fragmented Systems

Attendance, payroll, and performance spread across
separate disconnected systems

Manual Processes

Repetitive HR tasks consuming hours of human effort that should be automated

Limited Visibility

Lack of real-time insights preventing informed
decision-making

Poor Self-Service UX

Employees couldn't manage their own data — always
dependent on HR for minor tasks

My Role

As Lead Product Designer, I was responsible for the complete design vision and execution of OfficeKitHR. This comprehensive role began with defining the product vision and UX strategy, establishing the foundational principles that would guide all design decisions throughout the project lifecycle.

A significant portion of my work involved building a scalable design system that could support the complexity of a multi-role SaaS platform. I designed dashboard interfaces that present high-density information in scannable, actionable formats, and created the companion mobile app that empowers employees with on-the-go access to essential HR functions.

Throughout the project, I created interactive prototypes for stakeholder validation and worked closely with developers to ensure implementation alignment. This collaborative approach ensured that the design vision translated accurately into the final product while remaining technically feasible and performant.

The full employee lifecycle,
designed as one system

8 core HR modules, each designed as an integrated part of the ecosystem — not isolated features.

Onboarding

& Document Management

Step-by-step guided onboarding flow with auto document verification and digital offer acceptance.

Document Upload e-Signature

Checklist

Attendance

& Shift Management

Visual calendar-based attendance tracking with shift scheduling UI and optional geo-location clock-in.

Geo Clock-in Shift Scheduler

Calendar View

Leave

& Time-off Tracking

Complete leave lifecycle — requests, approvals, balance tracking — with policy automation.

Leave Balance Approval Flow

Policy Engine

Payroll

Automation

Auto-calculated payroll preview with transparent salary breakdown and multi-level approval workflow.

Auto Calculate Payslips

Approval Chain

Self-Service

Employee Portal

Empowering employees to manage their own data — payslips, leave, expenses, and personal info.

Payslip Download Expense Claims

Profile Update

Performance

Tracking

Goal setting system with quarterly review cycles and visual performance indicators.

OKRs Quarterly Reviews

KPI Tracking

Analytics

Admin Dashboard

Role-based dashboards with smart widgets, quick actions, and contextual notifications for leadership.

Real-time Data Reports

Smart Widgets

Exit

& Clearance Management

Streamlined offboarding with digital clearance workflows, exit interviews, and knowledge transfer.

Clearance Form Exit Interview

Offboarding

HR Manager Operational Flow

A high-level journey showing how HR managers handle employee onboarding, Attendance , Employee
tasks, Shift management , Time-off tracking, Payroll and exit workflows within a single unified platform.

Design with Purpose, Built for clarity

OfficeKitHR was designed with a clear focus on simplifying complex HR operations through thoughtful product design. By prioritizing usability, structured information architecture, and intuitive workflows, the platform transforms traditionally complicated HR tasks into seamless experiences.

Every interface element was crafted to reduce cognitive load, improve visibility of critical data, and enable HR teams and employees to accomplish tasks quickly and confidently across both web and mobile platforms.

Measurable Results That
Matter to Real Teams

The product established a scalable HR foundation capable of
supporting growing teams without increasing operational complexity.

Payroll Clarity

Transparent breakdown view built trust between employees
and HR — payroll queries dropped significantly post-launch.

Mobile Adoption

The employee mobile app saw high early adoption, with
clock-in and leave request becoming primary use cases.

HR Self-Sufficiency

Managers could run complete performance reviews and
approve leave without ever involving HR admin.

Scalable Foundation

The design system and architecture enabled new
features to be added in days, not weeks.

What this project taught me

OfficeKit HR strengthened my ability to design complex multi-role SaaS systems, balance data-heavy dashboards with usability, and build scalable design systems that support long-term product growth.

This project pushed me to think beyond individual screens — to design entire systems, entire journeys, and entire ecosystems. The biggest lesson was that in enterprise HR design, clarity is a feature. Every second of confusion in a workflow costs real people real time.