01 / Phân tán
Component phân tán
Cùng một pattern được dựng nhiều lần; những sai lệch nhỏ tích lũy trên toàn hệ thống.
01 · Tổng quan
01 / BỐI CẢNH
LearnPress là hệ sinh thái LMS trên WordPress, phục vụ người học, giảng viên, quản trị viên và các đơn vị giáo dục.
BÀI TOÁN THIẾT KẾ
Qua nhiều giai đoạn phát triển, UI mở rộng theo từng tính năng và giao diện thương hiệu. Các component có cấu trúc tương tự vẫn được dựng riêng; quy tắc đặt tên, token và tài liệu chưa tập trung về một nguồn thống nhất.
Tôi nhóm lại 93 màn hình theo hành trình sản phẩm, chuẩn hóa Foundation và component, rồi đối chiếu các quyết định với UI thực tế. Các con số dưới đây thể hiện phạm vi rà soát trong file thiết kế, không phải hành vi của người học.
93màn hình UI được rà soát theo hành trình sản phẩm
235variables theo cấu trúc Global → Alias
67text styles cho máy tính và di động
7giai đoạn trong hành trình sản phẩm
02 · Bối cảnh sản phẩm
Cùng một nền tảng, nhiều điểm chạm và cách thể hiện.
LearnPress tổ chức các tác vụ học tập; Eduma đưa nền tảng ấy vào nhiều bối cảnh giáo dục và giao diện thương hiệu. Một thay đổi ở cấp component có thể xuất hiện ở danh sách khóa học, luồng học và nhiều demo. Vì vậy phạm vi thiết kế cần được xác định theo hành trình và quy tắc dùng chung.
NỀN TẢNGWordPress
LearnPress LMSKhóa học · bài học · đánh giá · quản lý
LearnPress LMSKhóa học · bài học · đánh giá · quản lý
HÀNH TRÌNHBa nhóm tác vụNgười học: khám phá và học
Giảng viên: nội dung và đánh giá
Quản trị: theo dõi và vận hành
Giảng viên: nội dung và đánh giá
Quản trị: theo dõi và vận hành
BIỂU ĐẠTEdumaDemo giáo dục khác nhau, cùng quy tắc semantic và cấu trúc component
Sơ đồ diễn giải mối quan hệ sản phẩm từ hai file thiết kế; các màn hình LearnPress và demo Eduma được đối chiếu bằng ảnh nguồn ở các phần dưới.
03 · Thách thức thiết kế
Khi UI mở rộng theo tính năng, sự thiếu nhất quán trở thành chi phí vận hành.
02 / Ngữ nghĩa
Giá trị thiếu ngữ nghĩa
Màu, khoảng cách và bo góc được đặt thủ công thay vì phản ánh vai trò trong UI.
03 / Quy mô
Nhiều vai trò, nhiều hành trình
Hệ thống phải bao phủ khám phá khóa học, học tập, đánh giá, trao đổi và quản trị.
04 / Ràng buộc
Hệ sinh thái WordPress
Giải pháp cần linh hoạt với giao diện và add-on WordPress, đồng thời đủ rõ ràng để lập trình viên triển khai.
Mục tiêu là tạo một nguồn quy chuẩn đáng tin cậy cho các quyết định thiết kế sản phẩm.
04 · Đặt lại bài toán
Chuyển đơn vị giải quyết từ màn hình sang quyết định dùng chung.
CÂU HỎI THIẾT KẾ
Làm sao hỗ trợ nhiều journey và giao diện thương hiệu mà số quyết định UI phải làm lại không tăng theo từng màn hình?
Ưu tiên theo phạm vi ảnh hưởng
- Nhận diện pattern lặpĐặt 93 màn hình theo bảy giai đoạn để tìm điểm chạm có cùng cấu trúc hoặc hành vi.
- Quy định điều phải giữVai trò màu, cấu trúc component, state và thứ tự thông tin được định nghĩa tại nguồn.
- Chừa chỗ cho khác biệtBrand mode và nội dung từng demo thay đổi; ý nghĩa hành động và cách sử dụng vẫn có quy tắc.
Đây là cách tôi diễn giải và ưu tiên phạm vi thiết kế từ audit, không phải kết quả thử nghiệm người dùng.
05 · Kiến trúc sản phẩm
Đặt 93 màn hình trở lại đúng hành trình của người dùng.
Tôi sắp xếp 93 màn hình theo bảy giai đoạn của hành trình học tập. Cách tổ chức này giúp đội ngũ nhìn thấy mối liên hệ giữa các điểm chạm và truy ngược mỗi màn hình về instance, component và token.
- Khám phá01
- Đánh giá & đăng ký02
- Học tập03
- Đánh giá04
- Trao đổi05
- Theo dõi & quản lý06
- Mở rộng & quản trị07
Hành trình sản phẩm trên UI thật
Bốn điểm chạm tiêu biểu cho thấy cấu trúc hành trình được áp dụng xuyên suốt từ khám phá khóa học đến học tập, trao đổi và theo dõi tiến độ.
Học tập liền mạch
Điều hướng bài học, trạng thái câu hỏi và tiến độ được chuẩn hóa để người học nhận biết vị trí hiện tại và bước tiếp theo.
Tạo nội dung nhất quán
Pattern cho khóa học, chương trình, bài học và bài đánh giá giúp giảng viên không phải học lại cách dùng từng module.
Quản lý trên quy mô lớn
Số liệu, trạng thái, bảng và phản hồi dùng chung quy tắc ngữ nghĩa, giúp việc đọc và xử lý thông tin nhất quán.
06 · Tái cấu trúc hệ thống
Token hóa từ nền tảng, không vá từng component.
Global tokens giá trị gốc
Alias tokens vai trò ngữ nghĩa
Components hành vi + trạng thái
Patterns luồng tái sử dụng
Màn hình sản phẩm ngữ cảnh thật
Global → Alias → Component
Màu, typography, khoảng cách, bo góc, bề mặt, viền, hành động, phản hồi và icon được phân tầng. Component tham chiếu semantic token để thay đổi tập trung từ nguồn.
Tên gọi phản ánh chức năng
Tên tạm, lỗi chính tả, ký tự ẩn và variant trùng được loại bỏ. Property được tổ chức theo kiểu hiển thị, kích thước, trạng thái, nội dung, bố cục và hướng.
Chuyển đổi có kiểm soát
Giá trị cũ được nhận diện riêng để tiếp tục chuyển đổi mà không làm thay đổi các màn hình đang vận hành.
Một thay đổi đi từ token đến UI thế nào?
Ví dụ được đối chiếu với bảng Global / Alias Color Tokens và hướng dẫn semantic của Eduma. Nền xanh ở bước Global minh họa giá trị màu gốc, không biểu thị trạng thái đang chọn.
- 01 · Globalblue/main-2026Giá trị gốc #2563EB cho chế độ Eduma Main 2026.
- 02 · Aliascolor/bg/brandVai trò màu thương hiệu; component tham chiếu alias thay vì mã hex.
- 03 · ComponentButton (canonical)Variant và state được quản lý tại một nguồn component.
- 04 · PatternCTA khám phá khóa họcHành động chính theo semantic role, dùng trong điểm chạm khám phá.
- 05 · Product UIEduma Main 2026Kiểm tra mode thương hiệu trên trang chủ demo thật.
Quan hệ Global → Alias được ghi trong Figma; UI demo là nơi kiểm tra ứng dụng của mode.Xem ảnh UI Eduma Main ↗
07 · Component trong sản phẩm thật
Tái sử dụng chỉ có ý nghĩa khi component sống tốt trong sản phẩm thật.
Từ khám phá khóa học đến bài đánh giá, tôi kiểm tra cấu trúc component, cách trạng thái truyền đạt phản hồi và cách instance xuất hiện trên màn hình. Course Card và Quiz Choice là hai ví dụ đối chiếu được với file nguồn. Xem Course Card trong màn khám phá khóa học ↗
Nhu cầu người dùngNgười học cần so sánh khóa học theo điểm đánh giá, số bài, lượng học viên, giá và hành động tiếp theo.
Cấu trúc componentẢnh → điểm đánh giá & tên khóa → thông tin bài học/học viên → giá → CTA. Các nhóm giữ thứ tự đọc rõ ràng.
Quyết định hệ thốngGiữ Course Card dưới dạng instance với các nhóm nội dung và Button lồng bên trong để tái sử dụng trong danh sách khóa học.
Minh chứngẢnh bên trái là component thật trong LearnPress; hình bên dưới thể hiện các trạng thái Quiz Choice dùng cho bài đánh giá.
SƠ ĐỒ GIẢI THÍCH · KHÔNG PHẢI MÀN SẢN PHẨMSơ đồ kiểm tra responsive
Kiểm tra thứ tự thông tin và cách bố cục thay đổi khi Course Card đi từ danh sách nhiều cột sang một cột.
Thứ tự ưu tiên thông tinẢnhTên khóa + đánh giáThông tin phụGiáCTA
08 · Hành vi responsive
Đặc tả cách component thích ứng trước khi nhân rộng sang viewport khác.
Dựa trên cấu trúc Course Card ở phần trước, tôi xác định thông tin nào phải giữ thứ tự và hành vi nào cần kiểm tra ở từng breakpoint. Sơ đồ bên cạnh là danh sách kiểm tra thiết kế, không phải UI sản phẩm.
01Giữ thứ tự đọc: ảnh → tên/đánh giá → thông tin phụ → giá → CTA.
02Kiểm tra tên khóa dài, thông tin phụ nhiều dòng và độ rộng CTA ở viewport hẹp.
03Định nghĩa Hug, Fill, Fixed và vùng chạm trong đặc tả component trước khi bàn giao.
Đây là tiêu chí kiểm tra responsive; case study chưa có bằng chứng về màn di động đã triển khai.
Đối chiếu với component nguồn của Eduma
Figma thể hiện Course Card ở dạng dọc và ngang. Tài liệu Responsive / Usage quy định số cột và hành vi ở từng breakpoint.
Máy tính ≥ 1200px4 cột · container tối đa 1290px
Máy tính bảng 768–1199px2 cột · card Fill trong grid
Di động < 768px1 cột · vùng chạm tối thiểu 44px
09 · Mở rộng sang Eduma
Một hệ thống lõi, nhiều cách thể hiện thương hiệu.
Eduma bắt đầu từ UI Kit tôi xây trong quá trình phát triển nhiều demo. Khi quy mô tăng, tôi tái cấu trúc thành Design System: tách Foundation và Component Source, hợp nhất Button, xây Input theo Base–Composite và đưa icon về một thư viện chuẩn.
120 biến thể Button10 chế độ màu314 biến thể icon254 ý nghĩa
Hệ thống lõiLearnPress Core
10 chế độ màu EdumaGlobal color → semantic mode → component
10 / 10Eduma Main 2026#2563EB
Online Learning#098CE9
Global University#418435
Yoga Coaching#A36C45
Preschool#8329FE
Single Course#5D30F7
Marketplace#356DF1
Learning Platform#FF7700
Ecommerce#003AAA
Ivy League#FA394A
Màu và tên mode đối chiếu từ Global / Alias Color Tokens trong file Eduma Design System.
Một nền tảng, nhiều ngữ cảnh giáo dục
Cùng kiến trúc component nhưng mỗi demo có thông điệp, hình ảnh, typography và semantic color phù hợp với nhóm người dùng mục tiêu.
01 / 05
10 · Quyết định và đánh đổi
Giữ một nguồn chuẩn mà không khóa cứng mọi giao diện.
Các đánh đổi dưới đây mô tả hệ quả của cấu trúc hiện có trong Figma. Chúng không ngụ ý rằng mọi phương án thay thế đều đã được thử nghiệm.
Đặt ý nghĩa trước mã màu
Vấn đề: cùng vai trò hành động nhưng Eduma có nhiều màu demo.
Quyết định: Global giữ giá trị, Alias nêu vai trò; component tham chiếu semantic token theo mode.
Đánh đổi: cần quản lý và kiểm tra từng mode; bù lại không nhân bản Button theo từng brand.
Bằng chứng · Alias Color Tokens · 10 modesTách loại khỏi tổ hợp trạng thái
Vấn đề: ghép loại input, kích cỡ và state trong một ma trận làm nguồn khó bảo trì.
Quyết định: tách Base → Composite → Selection; riêng Base có 30 biến thể từ 3 radius × 2 size × 5 state, còn Input / Field giữ mười biến thể loại ở lớp sản phẩm.
Đánh đổi: người dùng thư viện cần hiểu quan hệ lồng nhau; bù lại tránh một ma trận 300 biến thể.
Bằng chứng · Input Architecture / 01 BaseChuyển đổi mà vẫn truy được nguồn cũ
Vấn đề: màn hình hiện hữu và icon cũ không thể thay thế bằng một bước thiết kế duy nhất.
Quyết định: phân biệt giá trị legacy, liên kết lại instance icon và kiểm tra detached instance sau chuyển đổi.
Đánh đổi: migration cần thêm lượt rà soát; đổi lại nguồn thiết kế có thể được cập nhật có kiểm soát.
Xem số liệu audit ↗11 · Kết quả đo được
Những thay đổi có thể kiểm chứng trong file thiết kế.
thuộc tính khoảng cách trong Eduma Component Source được liên kết với token.
instance icon cũ được liên kết lại với thư viện chuẩn.
icon gốc trùng hình được loại bỏ.
biến thể loại Input / Field, tránh ma trận 300 biến thể.
instance mất liên kết với component gốc sau chuyển đổi.
chiều rộng trang tài liệu chuẩn, giảm từ mức tối đa 5.200px.
Đây là số liệu về tài sản thiết kế và quá trình chuyển đổi trong phạm vi LearnPress / Eduma; không đo tốc độ triển khai, tỷ lệ chuyển đổi hay kết quả học tập sau phát hành.
12 · Giá trị cho sản phẩm
Hệ thống tạo ra quy tắc làm việc chung cho thiết kế và phát triển.
01 · Nhất quán
Quy tắc chung, ứng dụng theo ngữ cảnh
Một Button được quản lý tại nguồn, còn mười chế độ màu Eduma quyết định biểu đạt thương hiệu theo từng demo.
02 · Thao tác
Ít thao tác lặp trong file thiết kế
Input / Field được giữ ở 10 biến thể loại thay vì nhân thành ma trận 300 biến thể. Thời gian thiết kế thực tế chưa được đo.
03 · Bảo trì
Thay đổi tập trung
Thuộc tính khoảng cách trong Eduma Component Source đã bind token; hơn 1.000 instance icon cũ được liên kết lại với thư viện chuẩn.
04 · Bàn giao
Ít chỗ phải suy đoán
Spec mô tả anatomy, state, token và breakpoint; đây là cơ sở bàn giao nhất quán, chưa phải số đo về tốc độ phát triển.
13 · Bàn giao và cộng tác
Viết ra quy tắc để mỗi lần triển khai không phải đoán lại.
01 · VAI TRÒcolor/bg/brandAlias nối tới Global color theo mode.
02 · COMPONENTButton / Course CardThuộc tính, anatomy, variant và state ở nguồn.
03 · HÀNH VIGrid & breakpoint≥1200: 4 cột · 768–1199: 2 cột · <768: 1 cột.
04 · ĐỐI CHIẾUInstance trong UIKiểm tra thứ tự thông tin và trường hợp nội dung dài.
Một điểm bàn giao có thể kiểm chứng
Tài liệu Course Card Eduma ghi rõ container Fill tối đa 1290px, card Fill trong grid, ảnh giữ tỉ lệ và vùng chạm tối thiểu 44px. Hướng dẫn semantic color chỉ rõ vai trò token để developer đối chiếu implementation với component nguồn.
Các đặc tả là bằng chứng trong file thiết kế; case study chưa có dữ liệu đo thời gian phát triển hay chất lượng code sau bàn giao.
Responsive / UsageSemantic color usage
14 · Vai trò và phạm vi đóng góp
Từ hệ thống lõi đến sản phẩm và bộ thiết kế khi ra mắt.
Tôi tham gia cả hai dự án ở ba lớp công việc liên kết với nhau: chuẩn hóa nguồn thiết kế, xây dựng demo/theme ứng dụng LearnPress, và thiết kế các điểm chạm giới thiệu sản phẩm khi release. Phạm vi này giúp tôi kiểm tra liệu quy tắc chung có vận hành được ngoài thư viện component.
Audit và dựng Design System
Rà soát màn hình và pattern; tổ chức Global / Alias tokens, typography, component, variant và state. Đặc tả responsive, chuyển instance, kiểm tra liên kết và tài liệu bàn giao.
Thiết kế demo và theme
Xây dựng thêm các demo và theme sử dụng hệ thống LearnPress; áp dụng component vào UI thực tế và điều chỉnh cách thể hiện theo từng ngữ cảnh giáo dục, thương hiệu và nội dung.
Thiết kế tài sản truyền thông
Thiết kế landing page, thumbnail, cover và ảnh minh họa phục vụ release. Giữ mối liên hệ giữa giao diện sản phẩm, thông điệp giới thiệu và hệ thống hình ảnh.
Phạm vi công việc ở phần này do người thiết kế cung cấp. Những hình demo trong case study minh họa phần ứng dụng; các tài sản release chưa được đưa vào file này để đối chiếu trực quan.