Office
Management System
Prototype
Note: This is a modified version of the original prototype. Certain data and user flows have been adjusted for confidentiality. This is NOT a mobile-responsive prototype for the best experience, view on a laptop/desktop.
Demo accounts – Password: pass
Roles: 1001 Admin, 1002 Asset Manager, 1003 HR, 1004 Employee
The Brief
Designed & Developed Office Management System for Channel Feeder
Channel Feeder was running its internal operations across a patchwork of disconnected tools, HR managed onboarding through emails and spreadsheets, IT tracked assets in separate Excel files, and employees had no self-serve way to apply for leave, request equipment, or raise a grievance. Every simple task required someone to email someone else and wait.
The ask: design and build a unified internal platform that brings employee management, HR workflows, and asset tracking under one roof and used simultaneously by four completely different roles across the organisation.
Core platform goals:
- Replace fragmented email and spreadsheet workflows with a single system of record
- Give employees a self-serve portal for leaves, assets, payslips, and grievances
- Give HR structured onboarding and deboarding pipelines
- Give Asset Managers real-time inventory visibility and allocation control
- Wrap everything in a modern, enterprise-grade interface that can be easily used by employees across all department.
The Real Problem
Four roles. One system. Completely different needs.
The technical requirements were straightforward. The design challenge was not.
Each role approaches this system with a fundamentally different mental model:
• Employee – thinks in terms of personal needs. Did my leave get approved? Where is my payslip? What assets are allocated to me right now?
• HR – thinks in terms of process and compliance. Is onboarding complete? Has the exiting employee returned everything? Is this grievance resolved?
• Asset Manager – thinks in terms of inventory and accountability. How many laptops are available right now? Who has what? What’s been scrapped?
• Admin – thinks in terms of oversight. Who is in the system? What is the org structure? Is everything in order?
Designing one interface that felt native to all four, without overwhelming anyone with information that wasn’t theirs, was the core tension to resolve.
Key operational problems identified:
• Onboarding was manual. New employees activated accounts through email chains with no structured checklist.
• No real-time asset ledger. IT had no reliable way to know what was available vs allocated at any moment.
• Leave requests went through managers informally, with no audit trail and no visibility for HR.
• Employees had no transparency into their own data. Payslips required asking Finance directly.
• Deboarding had no system. Employees leaving could return assets informally, with no formal sign-off process.
design process
Mapping four parallel workflows before touching a single screen
I started by mapping every user flow for each role independently before opening Figma. With four distinct roles, skipping this step would have meant making UI decisions based on assumptions, and with internal enterprise tools, wrong assumptions become operational bottlenecks.
Key entities mapped across the system:
- Users: Admin / HR / Asset Manager / Employee
- Assets and inventory states
- Leave types and approval states
- Onboarding and deboarding checklists
- Payroll and reimbursements
- Grievance tickets
- Conference room bookings
- Attendance records
User flows defined per role:
Employee Flow:
Login > View Dashboard > Apply Leave > Track Status > View Payslips > Check Assets > Raise Grievance > Book Conference Room
HR Flow:
Initiate Onboarding > Generate Token > Approve Employee Data > Manage Leave Requests > Handle Grievances > Manage Deboarding > Finalize Exit
Asset Manager Flow:
View Inventory Dashboard > Add New Asset > Allocate to Employee > Revoke Asset > Mark as Scrapped > Monitor Asset Health
Admin Flow:
View Employee Directory > Browse Org Tree > Full System Oversight
Mapping these flows first meant every screen had a clear job to do. No feature existed without a corresponding user goal anchoring it.
Solution
Role-based dashboards for everyone
Role-based dashboards:
- Each user lands on a dashboard showing only what’s relevant to their role
- Asset Managers see live inventory counts, total, available, and broken down by device type, the moment they log in
- HR sees pending onboarding approvals and active deboarding pipelines
- Employees see their leave balance, allocated assets, and attendance at a glance
- No role sees noise that belongs to another role
Context-preserving modals instead of page redirects:
- Actions like viewing asset details, applying for leave, or allocating hardware open in modals, users stay in their current context
- This keeps workflows fast and reduces the disorienting effect of constant page navigation in dense enterprise tools
- Every modal follows a consistent structure, header, content, action buttons, so nothing ever feels unfamiliar
Onboarding pipeline with token-based activation:
- HR initiates onboarding, generates a unique activation token, and shares it with the new employee
- New employee completes a 3-step self-serve form, basic details, personal details, Documents, and Security
- HR reviews and approves or rejects submissions from a structured pending approvals table
- Removes email back-and-forth entirely from the onboarding process
Real-time asset inventory with full lifecycle tracking:
- Asset Manager dashboard shows Available / Allocated / Scrapped counts broken down by device type instantly
- Adding, allocating, revoking, and scrapping assets all update the ledger in real time
- Scrapped assets are moved to a dedicated table with comments, nothing disappears, everything is auditable
Deboarding pipeline with clearance tracking:
- HR initiates exit for a departing employee
- System tracks asset return status, clearance across departments, and formal sign-off
- Prevents the common gap where employees leave without returning equipment
Leave management with full audit trail:
- Employees apply for Casual or Sick leave through a self-serve form
- HR sees all pending requests in one view, approve, reject, or revoke with one action
- Employees see their remaining leave balance and full history without asking HR
Payslip and reimbursement module:
- HR uploads bulk payroll via Excel sheet, system generates individual payslips per employee
- Employees view and download their own payslips independently
- Reimbursement requests submitted by employees with receipt attachments, tracked through approval states
Progressive disclosure through tabs:
- Employee profiles are split across tabs: Basic, Personal, Finance, Documents, and Assets. So managers and HR never see a wall of data
- Asset inventory is tabbed between Available and Allocated. Asset Managers always know exactly which view they’re in.
Semantic status colour coding across all tables:
- Green – Available / Approved / Active
- Orange – Pending
- Red – Scrapped / Revoked / Rejected
- Applied consistently across every table in every role. System health is readable in milliseconds without reading a single label.
iteration & feedback
Refining the experience through usability improvements
Asset inventory dashboard, from list to at-a-glance:
- Early versions buried inventory counts inside a data table. Asset Managers had to scroll and count manually.
- Fix: added summary stat cards at the top of the dashboard, Total Assets, Available, and per-device-type counts visible immediately on login.
- Asset Managers no longer needed to open any record to understand current inventory health
Onboarding form, from single page to stepped flow:
- First version of the onboarding form was a single long scrollable page. New employees consistently missed required fields or felt overwhelmed
- Fix: broke it into a 3-step wizard, Basic, Personal, Documents. With clear progress indicators
- Completion rate in testing improved significantly and HR reported fewer incomplete submissions to review.
Employee profile from flat layout to tabbed sections:
- Initial employee profile showed all information at once, Basic, Personal, Finance, Documents, Assets in one scrolling page
- Felt overwhelming for HR when reviewing a new employee’s onboarding submission
- Fix: tabbed architecture. Each section is its own focused view, reducing cognitive load for anyone reviewing or editing a profile.
Conference room booking, added availability calendar:
- First version was just a booking form, users had no way to know if a room was already taken before filling out the form
- Fix: added a real-time availability calendar with Day and Month views, filterable by room
- Eliminated the friction of booking and then discovering a conflict.
Outcome & Impact
Improving work flow & reducing work load
OMS replaced a fragmented, email-driven operation with a single source of truth for Channel Feeder’s internal processes.
What changed operationally:
- Onboarding went from informal email chains to a structured, trackable pipeline, and new employees activate their own accounts, HR approves from a single queue
- Asset accountability improved. Every device has a clear status at all times, scrapped assets are formally logged, and deboarding ensures returns are tracked
- Employees stopped emailing HR and Finance for basic information, leave balance, payslips, and asset details are self-serve
- Leave approvals moved from informal manager conversations to a formal system with a complete audit trail.
What this project demonstrates as a designer:
- Ability to design for multiple simultaneous user roles inside one coherent system
- Judgment on when to use progressive disclosure, modals, and tabbed architecture to manage information density
- End-to-end ownership from user flow mapping through high-fidelity design to working React and Tailwind implementation
- Understanding of enterprise UX constraints, auditability, role-based access, and data density without cognitive overload