Training Management System · KBZ Bank
Training
Management System
A six-role enterprise platform — built section by section, week by week, with the KBZ team every step of the way.
Training A six-role enterprise platform — built section by section, week by week, with the KBZ team every step of the way.
Six roles. Two platforms. One design system. Built section by section — together.
Starting July 2025, I led the UI/UX team at MSIS Software House on TAMS — a Training Management System for KBZ Bank, serving 6 user roles across website and mobile.
KBZ Bank provided their official KBZ Standard Guidelines and shared a general flow as a starting point. From there, we designed everything properly section by section, presenting back in weekly meetings, discussing together, and refining until each part was right. That back-and-forth collaboration is how we got it done.
KBZ provided the TAMS Standard Guidelines — a complete design system covering App and Website. Every component, color, spacing rule, and interaction pattern was pre-defined. Our job: apply it faithfully — not reinvent it.
Components covered: Bar · Text Field · Button · Employee · Pill · Tab · Stepper · Card · Popup · Table · Misc.
We mapped every step, every role, every feeling — before opening Figma.
KBZ gave us a general flow to start from. Our job was to turn that rough direction into a detailed User Flow for each of the 6 roles — understanding how they move through TAMS, what decisions they face, and where things could go wrong. We then layered in a Customer Journey Map (CJM) to capture emotions and pain points at every touchpoint.
| Stage | Action | Thinking / Feeling | Touchpoint | Emotion | Pain Point | Opportunity |
|---|---|---|---|---|---|---|
| Dashboard | Lands on dashboard after login, scans overview | "What do I need to do today?" | TAMS Dashboard | Curious | Too much information | Show clear priority tasks, simple dashboard cards, highlight upcoming classes and pending actions |
| Profile | Views personal info or edits profile details | "Is my information correct?" | Profile page, edit form, save button, account settings | Neutral | Too many fields | Make profile easy to edit |
| Classroom — Enrolled | User opens enrolled classroom list and checks class details, schedule, trainer, materials, and status | “When is my class?” “What should I prepare?" | Class list → Class detail → Calendar | prepared | Hard to find schedule, unclear class status, no reminder, weak class details | Add class filter, upcoming badge, reminder notification, class status, and quick access to materials |
| Classroom — Not Enrolled | User browses available classrooms and decides whether to join or request enrollment | “Which class is suitable for me?” “Can I join now?” | Available class list, search, filter, enrollment button, class description | Interested | Not enough course info | Show course objectives, prerequisites, seat count, trainer info, and easy enroll/request flow |
| Attendance | User checks attendance record or marks attendance during training | “Was my attendance recorded?” “Do I meet the required attendance?” | Attendance page, QR/check-in/manual attendance, attendance history | alert | Attendance not updated in real time, unclear absence reason, no correction flow | Show real-time attendance status, attendance percentage, absence reason, and request correction option |
The Admin role sees everything — dashboard, programs, users, reports, settings.
Admin is the most complex role in TAMS — responsible for managing all programs, overseeing all 5 other roles, and monitoring system-wide data. Every screen was designed for speed and clarity, following the KBZ Standard Guidelines with zero deviation. The dashboard alone went through 4 full iterations before sign-off.
We didn't just design screens.We designed decisions.
The Program Data Table is one of the most, used screens in TAMS is used daily by Admin, Program Owner and Checker roles. Every element was deliberately mapped to a user need or a bank workflow. The KBZ Education Team Head personally shaped key decisions here, including requesting that member count be visible directly in the table row.
I didn't just manage the design. I built the team's ability to think in systems.
Both junior designers had great visual instincts but needed structured guidance in design system application and UX thinking before working on a banking product. By the final phase, they were independently delivering complete screens, wireframe to Figma to dev handoff and confidently presenting decisions to the KBZ team.
