BetterHuman
HR Platform — Design Mockups
Version 1.0 · May 2026
10 Screens
Design System &
Mockup Gallery
A comprehensive set of UI mockups for BetterHuman — the modern HR platform for India's growing SMB and mid-market companies. All mockups are fully responsive, use realistic data, and follow a consistent design system.
Inter + Sora Fonts
Indigo Design System
8px Grid
India-First Data
Pure HTML/CSS
All Screens
01 · Authentication
Login Page
Split-panel login with Google OAuth, email/password, and brand storytelling on the left.
View Design
02 · Overview
HR Admin Dashboard
KPI metrics, headcount charts, pending approvals, upcoming birthdays, and recent hires.
View Design
03 · People
Employee Directory
Searchable employee table with filters, status badges, manager info, and bulk actions.
View Design
04 · People
Employee Profile
Detailed employee view with tabbed sections: personal info, work details, leave balance, documents.
View Design
05 · Workforce
Leave Management
Leave balance tracker, monthly calendar with color-coded days, team absence view.
View Design
06 · Workforce
Payroll
Monthly payroll summary with PF, ESI, TDS breakdown and per-employee payslips.
View Design
07 · Workforce
Recruitment — ATS
Full Kanban pipeline: Applied → Screening → Interview → Offer → Hired. Jobs sidebar included.
View Design
08 · Talent
Performance Management
Active review cycle banner, OKR progress bars, pending reviews table, and 1:1 scheduling.
View Design
09 · Insights
Analytics Dashboard
KPIs, headcount charts, gender distribution, tenure breakdown, attrition trends, saved reports.
View Design
10 · Admin
Settings
Company profile, logo upload, departments, locations, integrations, billing, and danger zone.
View Design