Winnie.N®LearnPress × Eduma
Chuyển hệ UI LMS phân mảnh thành một hệ thống có thể mở rộng cho học viên, giảng viên, quản trị viên và doanh nghiệp giáo dục.
- Vai trò
- UI/UX Designer tại PhysCode
- Phạm vi
- UI audit · Product journey · Semantic token · Component · Migration · Design QA
- Đầu ra
- Foundation · Component · Pattern · Tài liệu migration
UI tích lũy theo thời gian tạo ra component rời rạc, giá trị thiếu ngữ nghĩa và hành vi thiếu nhất quán.
93 màn hình được ánh xạ vào bảy giai đoạn hành trình trước khi tái cấu trúc foundation và component.
Tách Global token khỏi Alias token để component dùng ngữ nghĩa thay vì phụ thuộc trực tiếp vào raw value.
Chỉ công bố các kết quả đo được trong file thiết kế và migration; chưa suy diễn thành business outcome.
Một LMS core. Nhiều hành trình và cách biểu đạt.
LearnPress tổ chức các tác vụ học tập cốt lõi; Eduma đưa nền tảng đó vào nhiều bối cảnh giáo dục và thương hiệu. Một thay đổi ở component có thể xuất hiện trong course listing, learning flow, assessment và nhiều demo. Vì vậy, phạm vi thiết kế phải được xác định theo journey và quyết định dùng chung—không theo từng màn hình riêng lẻ.
Bài toán không phải là làm UI đẹp và đồng nhất hơn.
Làm thế nào để hỗ trợ thêm journey và brand context mà số quyết định UI phải làm lại không tăng tương ứng?
Đây là framing từ audit file thiết kế, không phải kết luận từ usability test.Chuyển đơn vị giải quyết từ màn hình sang quyết định dùng chung.
LearnPress tích lũy component rời rạc, giá trị thiếu ngữ nghĩa, nhiều hành trình theo vai trò và giới hạn từ WordPress. Công việc bắt đầu bằng việc ánh xạ 93 màn hình vào bảy giai đoạn hành trình, rồi tái cấu trúc hệ thống từ token gốc đến pattern sản phẩm có thể tái sử dụng.
- 01Product ecosystem
Xác định quan hệ giữa LearnPress core, add-on, theme và các demo Eduma.
- 02User journeys
Nhóm 93 màn hình theo bảy giai đoạn thay vì theo cấu trúc file rời rạc.
- 03Semantic system
Đưa raw value qua Global và Alias token trước khi chạm tới component.
- 04Reusable patterns
Chuẩn hóa anatomy, variant, state và responsive behaviour theo tác vụ.
- 05Product & handoff
Đối chiếu system với UI thật, ràng buộc WordPress và tài liệu triển khai.
Mỗi quyết định phải giải quyết complexity ở nhiều nơi.
Các quyết định dưới đây mô tả logic có thể đối chiếu trong file thiết kế. Chúng không ngụ ý mọi phương án thay thế đều đã được thử nghiệm.
Đi từ hành trình, không đi từ component.
- Vấn đề
- Cùng một pattern xuất hiện ở nhiều màn hình nhưng phục vụ các thời điểm khác nhau trong hành trình học.
- Ràng buộc
- Nếu audit theo tên frame hoặc page Figma, các mối quan hệ giữa khám phá khóa học, học tập, đánh giá và quản trị sẽ bị bỏ sót.
- Quyết định
- Ánh xạ 93 màn hình vào bảy giai đoạn và bốn nhóm vai trò trước khi quyết định component nào cần hợp nhất.
- Hệ quả
- Component được đánh giá theo phạm vi ảnh hưởng tới journey, không theo mức độ dễ sửa.
Đặt ý nghĩa trước mã màu.
- Vấn đề
- Eduma có nhiều hướng thương hiệu; cùng một vai trò hành động có thể mang màu khác nhau giữa các demo.
- Ràng buộc
- Hard-code màu thương hiệu trực tiếp vào component sẽ biến mỗi demo thành một nhánh hệ thống riêng.
- Quyết định
- Tách Global token khỏi Alias token; component tham chiếu vai trò như action, surface, border và feedback.
- Hệ quả
- Cấu trúc dùng chung được giữ ổn định trong khi phần biểu đạt thương hiệu vẫn có thể thay đổi.
Kiểm soát tổ hợp thay vì nhân variant.
- Vấn đề
- Khi type, size, state và layout bị ghép thành một ma trận, số variant tăng nhanh hơn giá trị sử dụng.
- Ràng buộc
- Một thư viện quá tổng quát khó bảo trì; một component cho từng trường hợp lại tạo fragmentation mới.
- Quyết định
- Tách Input theo Base–Composite và giữ mười biến thể type thay vì ma trận khoảng 300 tổ hợp.
- Hệ quả
- Property có trách nhiệm rõ hơn; designer và developer ít phải đoán variant nào là nguồn chuẩn.
Migration phải giữ được khả năng truy vết.
- Vấn đề
- Màn hình hiện hữu và hơn 1.000 icon instance không thể thay trong một lần mà không tạo rủi ro lệch UI.
- Ràng buộc
- Detach để sửa nhanh làm mất quan hệ với component gốc và khiến lần cập nhật sau tốn hơn.
- Quyết định
- Relink theo từng nhóm, tách legacy value để theo dõi và kiểm tra detached instance sau migration.
- Hệ quả
- 31 icon master trùng được loại bỏ; các instance đã chuyển vẫn nối với nguồn chuẩn.
Cố định cấu trúc. Cho phép biểu đạt thay đổi.
System Thinking ở đây không có nghĩa mọi demo phải giống nhau. LearnPress cần giữ logic task, state và accessibility; Eduma cần đủ linh hoạt để academy, university, kindergarten hay coaching có cá tính riêng.
- Component anatomy và state
- Ý nghĩa semantic token
- Thứ tự thông tin trong task
- Responsive rule và touch target
- Naming và handoff specification
- Brand color mode
- Typography biểu đạt
- Hình ảnh và art direction
- Content theo nhóm giáo dục
- Mật độ landing theo mục tiêu
Nối hệ thống lõi với UI thật và cách đội ngũ triển khai.
- 01
Audit & architecture
Rà soát màn hình và pattern; tổ chức Global/Alias token, typography, component, variant và state.
- 02
Product application
Áp dụng system vào LearnPress UI, demo và landing Eduma; kiểm tra cấu trúc dùng chung trong nhiều context.
- 03
Migration & handoff
Relink instance, kiểm tra detached component, đặc tả responsive và viết quy tắc để developer không phải đoán lại.
- 04
Release touchpoints
Thiết kế landing page, thumbnail, cover và illustration phục vụ release, giữ sản phẩm và thông điệp cùng một ngôn ngữ.
Đo thay đổi trong hệ thống. Không mượn metric chưa có.
Quá trình migration tạo ra kết quả đo được trong file thiết kế: 100% spacing property tại Eduma Component Source được bind token, hơn 1.000 icon cũ được relink, 31 icon master trùng được loại bỏ và không có detached instance. Đây là kết quả về chất lượng hệ thống—không phải tuyên bố về conversion, tốc độ delivery hay kết quả học tập.
Design System không bắt đầu từ component library. Nó bắt đầu từ việc xác định quyết định sản phẩm nào cần nhất quán—và phần nào phải được phép thay đổi.
Bước tiếp theo là theo dõi component adoption, exception rate và thay đổi phát sinh khi hệ thống tiếp tục mở rộng; đây mới là cách kiểm chứng hệ thống có thực sự giảm complexity trong delivery hay không.
Đi sâu vào lập luận và đối chiếu sản phẩm thật.
Bản case study đầy đủ giữ lại toàn bộ mạch audit, lập luận và visual. Hai liên kết còn lại dẫn tới Eduma Theme và LearnPress; file Figma không được công khai như CTA trên portfolio.
Đang cần biến UI phân mảnh thành một hệ thống?