The challenging aspect of designing such an application is understanding the users for whom you are designing. Ammar needs to grasp the user metamodel, their behaviors, and the various contexts in which they operate. To begin, he formulates questions aimed at understanding users like project managers, HR professionals, and employees.
Goals: What goals do they have?
Pinpoints: What pinpoints do they have?
Mental model: How will they be using the app, and in what context?
Admin dashboard
Attendance state
Super admin
Employee deshboard
Second Phase: He began with the user flow and information architecture, engaging in extensive discussions with stakeholders, the PM, and HR to test the interaction design. He even integrated interactive AI prototyping using V0, Figma Make, and Gemini to test the UX early on, rather than spending a lot of time on the frontend and backend only to make changes later.
Components library
Third Phase: The OTS wanted to be perceived as casual, friendly, and modern, keeping the idea that he built the design direction that psychologically and emotionally meets their goals.
Design System: He built a consistent, pre-configured, ready-to-use design system for teams.
Employees attendance record
Testing Phase: Ammar needs to delve deeper to align the design with the developers. On the development side, there were many inconsistencies with spacing, colors, and even the typographic system. He had to audit the design and closely collaborate with the front-end and QA teams to ensure everyone was on the same page.
Employee paystub
Leaves requests
Design direction
Like this project
Posted Sep 6, 2026
Smart HRM application automating employee onboarding, attendance tracking, paystub generation, and leave management — built for the OTS team.