Building Mitra Komtim — A Role-Based HRIS App for Komerce

🧠 Empathize – Understanding Real Needs

🎯 Objective

To ensure the new app is genuinely useful, I conducted a deep-dive user research to understand daily workflows, frustrations, and goals.

🎙 Method

• User Interviews with 8 users representing 4 different roles

• Tools: Google Meet, Notion

• Duration: 30–45 minutes each

👥 Interviewed User Roles

RoleMain ResponsibilitiesManagementReviewing attendance & strategic reportingAdminValidating data, exporting reports, HR operationsTalentClocking in/out, submitting leaveTalent LeadMonitoring team presence, approving leave

💡 Key Insights

1. Previous App Had Poor Adoption

   The old app was abandoned due to poor UX, unclear functions, and irrelevant menus.

2. Same Experience for All Roles

   All users saw the same menus regardless of role — confusing and overwhelming.

3. Lack of Role Personalization

   Each role has unique needs, but the previous solution treated everyone equally.

4. Underused Features, Overloaded Interface

   Users only needed 2–3 core features but had to sift through many menus.

5. No Clear Feedback Loop

   Actions like “leave requests” had unclear status or next steps.

🔍 Problem Statement

"Komerce employees need a simple, personalized HRIS tool tailored to their role — not a one-size-fits-all solution."

🎯 Design Goals

• ✅ Build a simple, clean, and mobile-first HRIS solution

• 🎯 Deliver a role-based experience — only show what each role needs

• 🔄 Streamline key flows like attendance, leave requests, and approvals

• 📈 Improve clarity, trust, and efficiency in HR-related tasks

🗺 Information Architecture

We structured the app around role-based access, giving each type of user only what they needed:

RoleKey FeaturesTalentClock In/Out, Leave Request, History, Holiday InfoTalent LeadTeam Attendance, Leave ApprovalsAdminHR Dashboard, Data Validation, Export ReportsManagementSummary Reports, Team Insights, Top-Level Approval

🔄 User Flow Samples

• Talent: Clock in → See status → Request leave

• Talent Lead: View team → Review leave → Approve/Reject

• Admin: Verify data → Export reports

• Management: Read reports → Make decisions

All flows were mapped in FigJam and iterated based on feedback.

✍️ Wireframes & Visual Design

• Wireframes: Lo-fi exploration in Figma

• Design System: Built scalable components based on Komerce branding

• Final UI: Clean, minimal, functional with quick access to most-used actions

📱 Mobile-First Interface

We designed mobile-first since this app is used daily by field & remote teams who need quick interactions.

🧑‍🤝‍🧑 Collaboration

Worked closely with:

• PM – Hersa Ajeng P

• Mobile Engineer – Nunu Nugraha

• Design Team– Erlan Candra H, Naufal Wibawanto, Agil Juwita

✅ Results

• 📉 Eliminated all unused features from the previous app

• 🧭 Clear separation of access per role

• ⚡ Faster interaction — attendance & leave flows completed in <2 steps

• 📱 High adoption — early usage shows improved engagement and positive feedback from all roles

🎓 Takeaways

• Sometimes, it’s better to start from scratch than redesign something broken

• Role-based UX is crucial in HRIS and internal tools

• Early and continuous collaboration with stakeholders ensures better results

• A well-structured, minimalist interface can dramatically improve daily workflows