Case StudyCase Study
A Hybrid ERP platform integrating Admissions CRM, Academics, Finance, LMS, Parent Wallets, and School Stores within a unified ecosystem. Nền tảng Hybrid ERP tích hợp CRM tuyển sinh, học vụ, tài chính, LMS, Parent Wallet và School Store trong một hệ sinh thái thống nhất.
* Note: This project has not been publicly launched. To comply with the NDA, this case study focuses solely on the Information Architecture, Cross-Module Business Rules, and Design System principles. No actual UI screens or sensitive data are shown.* Lưu ý: Dự án chưa public go-live. Để tuân thủ NDA, case study này chỉ tập trung phân tích Kiến trúc thông tin (IA), Business Rules liên phân hệ, và nguyên tắc Design System. Các màn hình UI và dữ liệu nhạy cảm sẽ không được hiển thị.
The ChallengeBài toán đặt ra
Traditional School Management Systems (SMS) often suffer from data silos (where information is isolated and fragmented across different departments like admissions, academics, and finance without automatic synchronization), and lack revenue extension tools. The goal was to build an ecosystem where Academic Operations, CRM Pipeline, and a new E-commerce stream (Canteen & School Store) talk to each other seamlessly. The "Parent Wallet" serves as the financial glue connecting these domains.Hệ thống quản lý trường học (SMS) truyền thống thường bị silo dữ liệu (dữ liệu bị cô lập, phân mảnh rời rạc giữa các bộ phận như tuyển sinh, học vụ, kế toán mà không được đồng bộ tự động với nhau) và thiếu công cụ mở rộng doanh thu. Mục tiêu là xây dựng một hệ sinh thái nơi Vận hành Học vụ, CRM Tuyển sinh và Luồng E-commerce (Canteen & School Store) giao tiếp mượt mà. "Parent Wallet" (Ví phụ huynh) chính là chất kết dính tài chính nối liền các domain này.
Information Architecture
With a massive scope of 110 Web Admin screens and 39 Mobile App screens, the IA was structured into 6 primary pillars to ensure logical grouping and role-based access.Với quy mô khổng lồ gồm 110 màn hình Web Admin và 39 màn hình Mobile App, IA được cấu trúc thành 6 trụ cột chính để đảm bảo gom nhóm logic và phân quyền chặt chẽ.
Academic Structure, Admissions CRM, Student & Staff Management, Attendance, Finance (Invoices & Parent Wallet), and Timetables.Cấu trúc học vụ, CRM Tuyển sinh, Quản lý Học sinh & Nhân sự, Điểm danh, Tài chính (Hóa đơn & Parent Wallet), và Thời khóa biểu.
Curriculum, Course Management, Assignments, Online Exams, Gradebooks, and Live Class integrations.Khung chương trình, Quản lý khóa học, Bài tập, Thi trực tuyến, Sổ điểm và tích hợp Lớp học trực tuyến.
School Store (Uniforms, Stationery), Inventory, Canteen Ordering, and Delivery fulfillment tracking.Cửa hàng trường học (Đồng phục, VPP), Tồn kho, Đặt món Canteen và Theo dõi giao hàng.
Notification Engine, Announcements, and Parent-Teacher chat threads.Hệ thống thông báo, Bản tin nhà trường, và Kênh chat Phụ huynh - Giáo viên.
System Logic & Data FlowLogic & Luồng dữ liệu hệ thống
As a UX/UI Lead, mapping these I/O dependencies isn't just about understanding the backend—it's the foundation for designing Proactive UX. Knowing how data flows allows me to design precise loading states, micro-interactions, and eliminate redundant data entry across the entire user journey.Với vai trò UX/UI Lead, việc map ra các phụ thuộc I/O không chỉ để hiểu hệ thống, mà là nền tảng để thiết kế UX chủ động (Proactive UX). Hiểu rõ luồng dữ liệu giúp mình quyết định chính xác lúc nào cần trigger Micro-interactions, Loading states, và loại bỏ hoàn toàn các bước nhập liệu thừa cho người dùng.
System Input/Output (I/O): Closing a Lead (from CRM) auto-generates a Student Profile (in SIS).Chốt Lead (từ hệ thống CRM) tự động sinh Hồ sơ học sinh (vào hệ thống quản lý SIS).
User Experience (UX) Action: Designed a frictionless Onboarding flow. Leveraged existing CRM data to Auto-fill the entire form for parents, eliminating redundant data entry. Added a Success Toast Notification for admins to confirm secure data sync to SIS.Thiết kế luồng Onboarding không ma sát. UX tận dụng data có sẵn từ CRM để Auto-fill toàn bộ form cho phụ huynh thay vì bắt họ nhập lại từ đầu. Thiết kế thêm Success Toast Notification cho Giáo vụ để xác nhận data đã sync qua SIS an toàn.
System I/O: Class assignments from Enterprise Resource Planning (ERP) trigger auto-enrollment in LMS.Xếp lớp từ hệ thống Enterprise Resource Planning (ERP) tự động Enroll khóa học trên LMS.
UX/UI Action: Designed intentional Empty States on the Student app (displaying guiding illustrations instead of blank screens before class assignment). Upon auto-enrollment, triggered a Micro-interaction (e.g., Lottie animation unlocking new materials) to enhance Gamification.Thiết kế Empty States có chủ đích trên app Học sinh (hiển thị illustration hướng dẫn thay vì màn hình trắng khi chưa được xếp lớp). Khi được auto-enroll, trigger Micro-interaction (VD: Lottie animation mở khóa tài liệu mới) để tăng tính Gamification.
System I/O: Submit Assignment (Student App) → Auto-grading → Result Report (Parent Portal).Nộp bài (Student App) → Chấm điểm tự động → Báo cáo (Parent Portal).
UX/UI Action: Optimized cross-platform journey. When students submit, a Loading Skeleton appears during grading, followed by Success Feedback (Confetti). Simultaneously, the Parent App receives a Push Notification with a deep-link directly to the Result Report screen.Tối ưu hành trình đa nền tảng. Khi học sinh bấm nộp, hiển thị Loading Skeleton chờ hệ thống chấm điểm, sau đó là Success Feedback (Tung hoa). Ngay lúc đó, Parent App nhận Push Notification với deep-link thẳng đến màn hình Báo cáo kết quả.
Unified Design SystemHệ thống thiết kế hợp nhất
Building a unified UI architecture that serves both high-density data tables (ERP) and conversion-focused shopping experiences (E-commerce).Xây dựng kiến trúc UI hợp nhất phục vụ cả các bảng dữ liệu mật độ cao (ERP) và trải nghiệm mua sắm tối ưu chuyển đổi (E-commerce).
No hardcoded values. Everything runs on semantic tokens (e.g., --color-brand-primary, --space-4) ensuring consistency across desktop, mobile web, and native apps.Không sử dụng giá trị hardcode. Mọi thứ vận hành qua semantic token (VD: --color-brand-primary) đảm bảo tính nhất quán trên desktop, mobile web và native app.
Baked in from day one. Ensuring color contrast ratios of minimum 4.5:1 for normal text and error states that rely on text+icon rather than color alone.Tích hợp ngay từ đầu. Đảm bảo tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản và các trạng thái lỗi dựa trên cả text+icon thay vì chỉ dùng màu sắc.
Dual-mode components. For instance, buttons scale from 40px height for dense ERP interfaces to 48px/56px for touch-friendly E-commerce actions.Component đa chế độ. Ví dụ: Button scale từ 40px cho giao diện ERP mật độ cao sang 48px/56px cho các thao tác chạm trên E-commerce.
Purposeful motion leveraging Material M3 patterns (e.g., Container Transform, Shared Axis) to reduce cognitive load during complex multi-step flows.Chuyển động có mục đích sử dụng các pattern của Material M3 để giảm tải nhận thức trong các luồng nhiều bước phức tạp.
Impact & TakeawaysKết quả & Bài học
The values delivered by the project and lessons learned after designing the School Management System.Những giá trị dự án mang lại và bài học đúc kết được sau quá trình thiết kế Hệ thống Quản trị Trường học.
Form Wizard helps parents easily register for courses and pay tuition online, significantly increasing conversion rates.Form Wizard giúp phụ huynh dễ dàng đăng ký môn học và đóng học phí trực tuyến, tăng đáng kể tỷ lệ chuyển đổi.
The Parents' Portal allows tracking of grades, schedules, and student health records anytime, anywhere.Cổng thông tin cho phép phụ huynh theo dõi điểm số, lịch học và hồ sơ sức khỏe của học sinh mọi lúc mọi nơi.
The ERP system automates HR, classroom, and financial workflows, saving massive administrative resources.Hệ thống ERP xử lý tự động quy trình nhân sự, xếp lớp và tài chính giúp tiết kiệm nguồn lực hành chính khổng lồ.
Data from CRM, Portal, and ERP flows seamlessly without fragmentation, forming a truly cohesive system.Dữ liệu từ CRM, Portal và ERP được đồng bộ liền mạch, xóa bỏ hoàn toàn sự phân mảnh dữ liệu.
Designing for students, parents, and school administrators requires different tailored experiences while maintaining consistent data flows beneath the surface.Thiết kế cho học sinh, phụ huynh và ban giám hiệu đòi hỏi các trải nghiệm chuyên biệt nhưng vẫn phải đảm bảo tính nhất quán về luồng dữ liệu ngầm.
Breaking down complex admissions or enrollment processes into manageable, step-by-step Form Wizards is critical to prevent user drop-off.Việc chia nhỏ các quy trình tuyển sinh hay đăng ký phức tạp thành các Form Wizard từng bước dễ quản lý là yếu tố quan trọng để hỗ trợ người dùng hoàn tất đăng ký.
Transcripts and academic schedules need to be displayed in intuitive tables and charts, allowing parents to effortlessly track student progress without reading lengthy text reports.Bảng điểm và lịch trình học cần được hiển thị dạng bảng và biểu đồ trực quan, giúp phụ huynh dễ dàng theo dõi sự tiến bộ của con cái mà không cần đọc các báo cáo văn bản dài dòng.
Return to the homepage to view my design process and other projects.Trở lại trang chủ để xem quy trình thiết kế và các dự án khác.