Buildora

Tebar HRM App

Mobile App & Web-based App

UI/UX DESIGNER WORDPRESS DEVELOPER
UI/UX DESIGNER WORDPRESS DEVELOPER
Client
Tebar Digital Product
Date
2025
Role
UI/UX
01 - BACKGROUND

A mobile HRM (Attendance) application with a web-based admin dashboard for efficient workforce management.

Tebar HRM is a mobile-based Human Resource Management application designed to help organizations manage employee data and HR operations more efficiently. The system focuses on improving workforce productivity, operational efficiency, and transparency through a centralized digital solution.

To support daily HR activities, Tebar HRM provides a mobile application for employees and a web-based admin dashboard for management and monitoring. The platform centralizes employee information, attendance records, schedules, and other HR-related data, enabling organizations to manage workforce activities accurately and consistently.

Through the admin web dashboard, administrators can monitor employee attendance and activities in real time, manage employee data, and generate reports for decision-making. Meanwhile, the mobile application allows employees to access HR features easily from anywhere. This integrated HRM solution improves operational control, enhances data accuracy, and provides better visibility into workforce management.

02 - THE BRIEF

Design a mobile and web-based attendance system to manage employee presence in real time.

From this brief, I designed a mobile attendance application integrated with a web-based admin dashboard to support daily employee attendance tracking and workforce management.

The mobile application was designed with key features including a Home page for daily clock-in and clock-out, task management through a to-do list where users can add, update, or delete task statuses, and a History page that displays attendance records in a calendar view along with detailed past work activities. A Leave (Cuti) page was also designed to allow employees to submit leave requests with reasons and supporting documents, which are automatically routed to supervisors for approval. Additionally, a Settings page enables users to manage account preferences such as password changes.

The admin web dashboard was designed to provide management with full visibility and control over employee activities. It includes a Dashboard for activity summaries, an Attendance module to monitor clock-in and clock-out records from the mobile app, a Schedule module to manage employee schedules, and Master Data management covering attendance patterns, departments, groups, holidays, and leave types. The dashboard also provides a Reports module for downloading attendance data and a User Management module to control access and roles within the application.

Overall, this integrated design supports efficient attendance management, improves transparency, streamlines HR workflows, and ensures a seamless experience for both employees and administrators.

03 - The Process
001
research
Discovery & Research

Based on the acceptance requirements provided by the business analyst, I conducted research to understand business goals, user needs, and system constraints. This research became the foundation for defining features, user flows, and design decisions to support the development of the application.

002
wireframing
Design & Prototyping

Based on research findings, user interfaces were designed to address user needs and business requirements. Interactive prototypes were created to visualize user flows, validate features, and test usability, ensuring the design was ready for development and aligned with project goals.

003
Development & Launch

After the initial development and launch, further improvements were made to address bugs, refine features, and enhance system stability based on testing and user feedback, ensuring the application met quality and performance standards.