End-to-End Product Design & Design System for a Workforce Management SaaS
Team
Rohitha Remala,
Sanjana Kothapalli,
Roles
Overview
Kapston Services Limited, a large-scale provider of integrated manpower and facilities management solutions, partnered with us to design an Employee Management SaaS platform to support performance reviews, goal tracking, and compliance workflows.
The engagement focused on designing the product holistically—from foundational design systems to fully interactive, end-to-end prototypes—supporting HR teams, managers, and employees within a single, unified platform. The goal was not just digitization, but long-term scalability across roles, departments, and review cycles.
Problem Space
Why did this need a redesign?
Several systemic issues emerged:
→ KPI and KRA definitions varied widely across departments, reducing fairness and comparability
→ Review cycles were frequently delayed or left incomplete
→ Employees lacked visibility into expectations, progress, and recognition
→ HR and managers spent significant time on manual coordination and follow-ups
As performance processes became more configurable, the existing setup could not scale without introducing inconsistency, confusion, and loss of trust.
The Real Challenge
The problem wasn’t simply moving performance reviews into software. It was designing a system that could remain consistent, transparent, and adaptable as complexity increased—across roles, departments, and evolving review structures.
Approach
Design Philosophy: Build the System, Not Just the Screens
From the outset, we treated this as a systems design problem rather than a collection of UI flows. Key questions shaped the work:
-
How should the platform behave across different review cycles and roles?
-
How do we maintain clarity under pressure—deadlines, incomplete data, and approvals?
-
How do we enable deep configuration without sacrificing consistency or usability?
This perspective informed decisions at every level, from information architecture to component behavior.
Discovery & Definition
We partnered closely with stakeholders to align on business objectives, operational constraints, and role-based needs across HR, managers, employees, and admins. In parallel, I reviewed existing performance review workflows to identify systemic gaps and points of breakdown.
Early in the engagement, I conducted interface audits and pattern mapping to surface repeatable structures, edge cases, and foundational system requirements. This allowed us to establish reusable components and behavioral rules upfront—ensuring consistency was built into the system from the start, rather than retrofitted later.
Designing Under Real Operational Conditions
Goal: Validate the system under real operational pressure—not just ideal scenarios.
Rather than focusing solely on happy paths, I evaluated the interface as it would be experienced during peak operational stress. The platform was intentionally designed and tested for real-world complexity, including:
-
Incomplete or partially submitted reviews
-
Missed deadlines and delayed approvals
-
Conflicting feedback across reviewers
-
Role-based access limitations and handoffs
I used an embodied research approach, actively stepping into the roles of HR admins, managers, and employees and completing workflows end to end.
Method in Practice
-
Running workflows out loud to assess clarity and pacing
-
Timing critical tasks such as reviews, approvals, and goal updates
-
Reading microcopy and system feedback as users would encounter it
-
Intentionally misusing the system to expose fragile states and unclear ownership
This surfaced friction that traditional usability testing often misses—particularly around transitions, system feedback, and responsibility handoffs between roles.
Every interaction was evaluated against a small set of guiding principles:
→ Does the system remain clear, calm, and predictable when things don’t go as planned?
→ Can users easily correct, revisit, or update their inputs without friction?
→ Do Admin and Super Admin settings support meaningful, role-specific customization of the experience?
This ensured the UI supported users not just during successful completion, but during moments of uncertainty.
Visual Identity & UI Design
Exploration & Iteration
The product evolved through three structured design phases:
V1 — Structural Exploration
-
Low-fidelity wireframes
-
Information architecture and core workflow definition
V2 — System Refinement
-
Mid-fidelity designs applying early design system rules
-
Validation of hierarchy, density, and role-based views
V3 — Final System & Screens
-
High-fidelity designs fully aligned with the Design Language System
-
Complete screen coverage across all modules, ready for handoff
At each stage, feedback was incorporated without compromising system coherence.
System-Level Design: Tokens and Behavioral Components
Tokens as Intent, Not Decoration
Design tokens were defined to encode intent, not decoration. Rather than representing isolated visual attributes, they communicated hierarchy, information density, and system status—allowing priority and state to remain consistent across modules as workflows evolved.
Components With Behavioral Rules
UI components were built as behavioral units, not static elements. Each component defined how it expands or collapses, responds to missing or partial data, signals progress or blockage, and adapts across roles and permissions. Together, these rules ensured a predictable, trustworthy experience across complex workflows while enabling the system to scale without fragmentation.
System-Level Design: Tokens and Behavioral Components
Screen Design Across Core Modules and Flows
Using the design system, I designed cohesive experiences across:
-
Performance dashboards
-
Goal and KRA configuration
-
Multi-level review workflows
-
Compliance tracking and approvals
-
Admin configuration panels
The emphasis throughout was on clarity, role-specific visibility, and reducing cognitive load in complex scenarios.
End-to-End Prototyping and Delivery
I owned the creation of fully interactive, end-to-end prototypes in Figma, covering onboarding, review cycles, goal tracking, and compliance. Built with realistic data and dynamic states, these prototypes allowed stakeholders to experience complete workflows prior to development and became the single source of truth for validation, feedback, and engineering alignment.
The final delivery included a complete, scalable Design Language System, high-fidelity UI across all core modules, and production-ready interactive prototypes. Success was reflected in full adoption of the design system across the product, comprehensive workflow coverage before development, and strong stakeholder alignment and sign-off.