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 pinpoint do they have?

Mentamodle: How will they be using the app, and in what context?

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.

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 the consistent, pre-configured, ready-to-use design system for teams.

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.

The automated workflows for HRs, employees, and project managers have made them more confident in the OTS (Orange Tree System). We ended up with a simple button for check-in and check-out, time tracking, attendance, leave management, and departmental role-based organization.