How SHRM Saved HR 40% of Their Time & Boosted Development
UX Designer
8 weeks
SHRM is an HR management app designed to streamline employee self-service and simplify HR admin tasks. It empowers employees with easy access to attendance tracking, leave requests, payslips, and performance data, while helping HR teams manage approvals, onboarding, and team performance efficiently through an intuitive interface.
We began by listening to users—HR, team leads, and employees—to uncover deep issues in trust, usability, and performance. These insights became the foundation for SHRM’s redesign strategy.
1. HR Insights: Needs bulk actions, filters, automation, and smart alerts to manage tasks efficiently.
2. Team Leaders Insights: Require reports, daily summaries, approval flows, and tools for team evaluation.
3. Regular Employee Insights: Need easy check-in/out, communication features, and Self Services Tools.
N.B: These are not all the insights collected—only the most important ones prioritized for the redesign.
We analyzed leading HR platforms to understand their strengths, weaknesses, and user-loved features. This helped us identify gaps in our app and informed strategic design decisions.
Common Strengths & Weaknesses
✅ Advanced Reporting Tools: Quick and easy export of data, insights, and performance metrics.
✅ Employee Self-Service: Easy access to payslips, leave requests, and personal documents.
✅ Data Exporting: One-click exporting of reports and employee data.
❌ Rigid workflows: Limited flexibility in customizing processes and task flows.
❌ Limited Customization Options: The system may not allow enough customization to fit specific company needs.
❌ Poor Integration with Other Systems (e.g., Odoo): companies used erp systems to manage employee This makes it difficult for HR teams to provide mobile self-service to employees, limiting their ability to manage tasks like leave requests and payroll on-the-go.
These are not all the insights collected—only the most important ones prioritized for the redesign.
Based on in-depth user research and competitive analysis, we carefully selected the most essential features for the web app and mobile app. These features are designed to optimize HR processes, from hiring and onboarding to payroll management and ticketing.
After gathering insights, we structured SHRM’s IA & User Flows by user role for easy access. Employees access check-ins, leave requests, and pay slips, team leaders have tools for mission tracking and approvals, while HR admins efficiently manage payroll, records, and reporting.
After finalizing the IA, we adopted the Atomic Design System, breaking the interface into atoms, molecules, organisms, and templates for consistency across mobile and desktop apps. We also implemented token naming for colors, typography, and spacing, streamlining developer collaboration.
After finalizing the design system, we began documenting the components to ensure consistency and clarity. This included detailing usage guidelines for each element.
The Home Dashboard gives HR managers a centralized view of all daily activities—attendance, requests, top performers, and more—helping HR stay organized, act quickly, and manage operations efficiently from one place.
Easily manage workforce from one place. The People section gives HR complete visibility over employees’ roles, departments, hire dates, and status—whether they're active, onboarding, or offboarded. With quick search, filtering, and bulk actions, tracking team’s lifecycle becomes seamless and efficient.
The HR hiring dashboard makes it easy to manage job posts and applicants. you can quickly add new jobs, view current openings, and track pipeline applicants as they move through the hiring process.
Create flexible schedules that adapt to your team’s unique needs—whether remote, hybrid, on-site, or with custom work hours. Assign shifts, define work conditions, and manage availability effortlessly, all in one place. Because every employee’s workday should fit just right.
Manage attendance, requests, and HR tasks on the go—from daily check-ins to leave approvals, all in one app. Track time, view your calendar, and access your profile with ease. Designed for flexibility, speed, and clarity—Stays connected, wherever they are.
The Profile shows time-off balances, quick access to HR services, and personal details in one place. It simplifies requests and keeps employees informed with a self-service hub.
The Home screen supports fast check-ins, leave actions, and daily planning.
The Approvals area lets managers review and respond to requests with clarity and speed.
Tap in, take breaks, and log out with ease The flow simplifies daily attendance actions with quick taps for Check-In, Breaks, and Check-Out. Whether remote or in-office.
Track, review, and stay on top of your hours The Calendar gives employees a visual summary of attendance, absences, missions, and vacations.
Results and feedback
Hr Manager
The design system became much more than just a toolkit — it was the glue that brought design and development together. By crafting clear, consistent components, we smoothed out the bumps in the process and sped up delivery, making sure SHRM feels seamless whether you’re on web or mobile.
This foundation didn’t just help us build faster; it gave the teams confidence to keep improving and adapting as users’ needs grow and change. In the end, it wasn’t just about code or pixels — it was about creating a reliable, thoughtful experience that truly supports HR teams and employees every day.
Thoughtful design, different challenges.
