Employee self-service
The Figma screens focus on immediate answers: today’s attendance, leave balances, latest payslip, profile information, documents and exit progress.
Speed + clarity + confidenceCASE STUDY Built for life at Zenesys
Your workplace,
simplified.
Life at Zenesys brings the workday, people and essential HR tasks together in one familiar place for employees and HR teams.
Designed for Zenesys employees and authorized HR/Admin teams.
Life at ZenesysAS
Good morning, AaravHere’s your workday at a glance.
Today’s attendance● Not checked in09:00 AM
Your shift is 09:00 AM – 06:00 PM · Noida office
Office network verified · ISTYour leave balances
12 days4 days6 days
EarnedCasualSick
Latest payslip ● PaidSeptember 2026 · Published 01 October₹84,200Download payslip →
A familiar workspace. A clearer workday.
01 / Executive summary
One connected workplace, designed around the real workday.
Life at Zenesys is positioned in the Figma design as a single employee and HR workspace rather than a collection of disconnected HR modules.
The landing experience makes the product promise immediate: “Your workplace, simplified.” From the first screen, users can understand the two access paths—Employee Login and Admin Login—and preview the information that matters during a normal workday.
Simplify
Reduce the number of places users need to look.
Connect
Bring people, workday information and HR tasks into one system.
Role-aware
Separate employee self-service from HR/Admin operations.
Responsive
Carry the same product language from desktop to mobile.
02 / Product story
One connected workplace.
The Figma landing page introduces the product through a compact navigation model: Overview · Employees · HR teams · AI assistance.
People
Employee information, profiles and organizational context stay accessible from the same product.
Attendance
Check-in, shift information, workday status and attendance history are surfaced clearly.
Payroll
Leave balances, payslips and pay information are presented as everyday self-service tasks.
Documents
Employee documents and secure document workflows are part of the same experience.
Lifecycle
Onboarding, offboarding and exit formalities extend the product across the employee lifecycle.
HR operations
HR teams get denser management views for people, attendance, leave, payroll and documents.
03 / The challenge
Make enterprise HR feel simple without hiding the complexity.
The product has two very different usage patterns. Employees need fast answers and self-service. HR teams need visibility, control and high-volume operational tools.
EMPLOYEE
Login → Dashboard → Attendance → Leave → Pay → Documents → Profile → Exit
HR / ADMIN
Login → Overview → Employees → Attendance → Leave → Policies → Payroll → Documents → Onboarding / Offboarding
The design therefore has to balance a light, approachable product story with information-dense enterprise screens underneath it.
04 / The problem
Different jobs. Different information density. One product.
HR & Admin management
Management screens introduce summary metrics, tables, filters, status badges, approval actions, payroll controls and secure document handling.
Visibility + control + efficiency05 / The solution
Two role-based experiences, one visual language.
01
Employee experience
Dashboard, profile, attendance, leave, pay, documents and exit are organized around frequent self-service tasks.
02
HR experience
Overview, employee management, attendance, leave approvals, holidays & policies, payroll, onboarding/offboarding and documents support operational work.
03
AI assistance
The landing page explicitly reserves a product story for AI assistance, positioning it as part of the workplace experience rather than a separate product.
06 / My role
From UX architecture to a coherent enterprise interface.
Product UX
Role-based journeys, navigation, information architecture and lifecycle workflows.
UX design
User flows, hierarchy, task structure, responsive behavior and progressive disclosure.
UI design
Landing page, dashboards, forms, tables, cards, status badges and responsive states.
Design system
Inter typography, red brand accent, neutral surfaces, action states, borders and reusable components.
Responsive design
Desktop and mobile screen families were designed as intentional layouts, not simple scaled-down screens.
07 / Understanding the user
The design starts with two jobs to be done.
Employee
Job: Get an HR task done without depending on HR.
- Check in and understand today's workday
- See leave balances and request status
- View and download payslips
- Manage personal information
- Find documents quickly
- Track exit formalities when required
HR / Admin
Job: Manage people and HR operations with confidence.
- Monitor employee and attendance data
- Approve leave and manage policies
- Process payroll
- Manage onboarding and offboarding
- Maintain employee documents
- Work with dense datasets without losing context
08 / Information architecture
Navigation follows role and responsibility.
EMPLOYEE
Self-service workspace
Dashboard · Profile · Attendance · Leave · Pay · Documents · Exit
Frequent actions first. Detail appears when needed.HR / ADMIN
Operations workspace
Overview · Employees · Attendance · Leave approvals · Holidays & policies · Payroll · Onboarding / Offboarding · Documents
Summary first, then dense operational views.09 / Screens
The complete responsive screen family.
The Figma design contains 17 product areas, each with dedicated desktop and mobile frames. Instead of presenting them as a flat list, this section explains what each screen is responsible for and shows the corresponding Figma frame directly.
01
Employee login
Explore the employee login experience across desktop and mobile, with the responsive layouts designed as a connected product family.
02
Admin login
Explore the admin login experience across desktop and mobile, with the responsive layouts designed as a connected product family.
03
Employee dashboard
Explore the employee dashboard experience across desktop and mobile, with the responsive layouts designed as a connected product family.
04
My profile
Explore the my profile experience across desktop and mobile, with the responsive layouts designed as a connected product family.
05
My attendance
Explore the my attendance experience across desktop and mobile, with the responsive layouts designed as a connected product family.
06
My leave
Explore the my leave experience across desktop and mobile, with the responsive layouts designed as a connected product family.
07
My pay
Explore the my pay experience across desktop and mobile, with the responsive layouts designed as a connected product family.
08
My documents
Explore the my documents experience across desktop and mobile, with the responsive layouts designed as a connected product family.
09
My exit
Explore the my exit experience across desktop and mobile, with the responsive layouts designed as a connected product family.
10
HR overview
Explore the hr overview experience across desktop and mobile, with the responsive layouts designed as a connected product family.
11
Employees
Explore the employees experience across desktop and mobile, with the responsive layouts designed as a connected product family.
12
Attendance management
Explore the attendance management experience across desktop and mobile, with the responsive layouts designed as a connected product family.
13
Leave approvals
Explore the leave approvals experience across desktop and mobile, with the responsive layouts designed as a connected product family.
14
Holidays & leave policies
Explore the holidays & leave policies experience across desktop and mobile, with the responsive layouts designed as a connected product family.
15
Payroll management
Explore the payroll management experience across desktop and mobile, with the responsive layouts designed as a connected product family.
16
Onboarding & offboarding
Explore the onboarding & offboarding experience across desktop and mobile, with the responsive layouts designed as a connected product family.
17
Employee documents
Explore the employee documents experience across desktop and mobile, with the responsive layouts designed as a connected product family.
10 / Design system
Minimal, direct and distinctly Zenesys.
Color language
#D3151FPrimary accent
#282828Primary text
#6B6B70Secondary text
#F7F7F8Surface
#E5E5E7Border
#227451Success
Typography
Inter
Hero: 48px on mobile · Body: 16px · Labels: 11px · UI actions: 12–14px.
Buttons
Primary actions use the Zenesys red accent with compact 48px interaction height and 6px corners. Secondary actions use a white surface with a neutral border.
Cards
Product cards use restrained borders, 10–16px radii and light shadows. Information is grouped rather than over-decorated.
Data & status
Tables, summary metrics, badges, approval states and secure document workflows keep dense enterprise data scannable.
11 / Responsive design
Mobile is a designed experience, not a breakpoint.
Desktop
Large content workspace, side navigation, summary metrics, tables and multi-column management views.
Mobile
Compact header, stacked content, card-based records and bottom navigation for thumb-friendly access.
The Figma file contains paired desktop and mobile frames for the same product areas, making responsive behavior part of the system itself.
12 / Design philosophy
Make the system feel lighter than the work it manages.
Visible first
Surface the information users need before asking them to search for it.
Progressive
Keep the primary task clear and reveal deeper detail when required.
Trustworthy
Use clear statuses, security cues and predictable actions for sensitive HR data.
Responsive
Preserve task clarity across desktop and mobile rather than simply shrinking the UI.
AI-ready
AI assistance is introduced as a natural layer inside the employee workplace experience.
Final case study statement
Your workplace, simplified.
Life at Zenesys turns HR from a set of administrative destinations into one connected workplace experience. The design pairs approachable product storytelling with role-specific operational depth, supported by a consistent visual system and dedicated responsive screen families.
2 core roles17 responsive screen families1 connected workplace