Dự án thì kết thúc, sản phẩm thì không
Nhiều đội làm design system như một dự án: ba tháng, một đội riêng, vẽ đủ bộ component, bàn giao, giải tán. Sáu tháng sau, thư viện lỗi thời, các squad quay lại làm riêng, và lần sau ai nhắc tới design system cũng được đáp "đã thử rồi, không được".
Design system là một sản phẩm nội bộ. Người dùng của nó là designer và kỹ sư của các squad. Nó cần được ưu tiên theo nhu cầu của người dùng, phát hành thường xuyên, đo mức sử dụng, và được duy trì chừng nào sản phẩm chính còn sống. PM nhìn nó bằng đúng con mắt nhìn một sản phẩm: ai dùng, dùng có được việc không, và vì sao người không dùng lại không dùng.
Bắt đầu nhỏ ở đâu
Giỏ Xanh không bắt đầu bằng bốn mươi component. Đội chọn một squad làm thí điểm và sáu component dựa trên bảng kiểm kê ở bài 4.
| Lựa chọn | Giỏ Xanh chọn | Lý do |
|---|---|---|
| Squad thí điểm | Giỏ hàng và thanh toán | Luồng nhiều tiền nhất, nhiều lỗi lệch nhất, PM sẵn sàng |
| Token đầu tiên | Màu, khoảng cách, chữ | Giải quyết phần lớn sự lệch, nền cho mọi component |
| Sáu component đầu | Nút, ô nhập, khối giá, thẻ sản phẩm, thông báo nhanh, hộp thoại xác nhận | Xuất hiện nhiều nhất trong luồng thanh toán |
| Thời gian | Một quý cho thí điểm | Đủ để đo, đủ ngắn để sửa hướng |
| Thứ chưa làm | Biểu đồ, bản đồ cửa hàng, giao diện Tết | Ít màn dùng, chờ có nhu cầu thật |
Đo cái gì
Đo design system bằng số component đã làm là đo sai, giống như đo một sản phẩm bằng số tính năng đã phát hành. Giỏ Xanh dùng bốn nhóm chỉ số:
| Nhóm | Chỉ số | Cách đo |
|---|---|---|
| Mức sử dụng | Tỉ lệ màn hình dựng chủ yếu từ thư viện | Kiểm kê nhẹ mỗi quý, như bài 4 |
| Mức sử dụng | Số chỗ làm riêng có gắn nhãn | Đếm nhãn trong code |
| Chất lượng | Lỗi lệch thiết kế mỗi quý | Nhãn lỗi trong hệ thống ticket (bài 5) |
| Tốc độ | Thời gian dựng một màn hình mới cỡ chuẩn | So sánh trước và sau |
| Hài lòng | Điểm hài lòng của designer và kỹ sư với thư viện | Khảo sát ngắn mỗi quý |
Kết quả sau hai quý
| Chỉ số | Trước (quý 2) | Sau hai quý |
|---|---|---|
| Màn hình dựng chủ yếu từ thư viện | 0 trên 46 | 29 trên 46 (63%) |
| Tổng lỗi giao diện mỗi quý | 140 | 112 |
| Lỗi lệch thiết kế mỗi quý | 42 (30%) | 14 (12,5%) |
| Thời gian dựng một màn hình mới cỡ chuẩn | 9 ngày làm việc | 5 ngày làm việc |
| Thời gian đổi màu hành động chính | 3 sprint, sót 4 chỗ | Một thay đổi token, review trong một buổi |
Khi người ta không dùng
Mức sử dụng thấp là thông tin, không phải lỗi của người dùng. Khi một squad không dùng thư viện, đội nền tảng hỏi như hỏi người dùng sản phẩm:
- Không biết có: tài liệu khó tìm, không ai giới thiệu. Sửa bằng buổi giới thiệu và kênh hỏi đáp.
- Biết nhưng không vừa: thiếu biến thể cần thiết. Sửa bằng quy trình đề xuất nhanh (bài 7).
- Vừa nhưng khó dùng: tên khó hiểu, thuộc tính rối. Sửa component, không đổ lỗi người dùng.
- Dùng thì chậm hơn: thư viện thành nút thắt. Xem lại cam kết thời gian duyệt.
Đưa nó vào lộ trình
Design system cần thời gian trong lộ trình như mọi sản phẩm. Ở Giỏ Xanh, đội nền tảng giao diện có backlog riêng, có mục tiêu quý, và các squad dành khoảng 10% thời gian sprint cho việc chuyển màn hình sang thư viện và nâng phiên bản. Con số này được thương lượng công khai với các PM, không lén lấy từ tính năng. Tóm tắt các khái niệm của khoá học được giữ tại Atomic design để người mới vào đội đọc trước.
Làm ngay
Viết một trang đề xuất thí điểm design system cho sản phẩm của bạn. Ghi: squad thí điểm và lý do, ba nhóm token và sáu component đầu tiên dựa trên bảng kiểm kê bạn đã làm ở bài 4, thời gian một quý, và bốn chỉ số bạn sẽ đo kèm con số hiện tại. Dùng hai con số bạn ghi ở bài 1 (số chỗ phải sửa và thời gian khi đổi một thứ dùng chung) làm điểm xuất phát. Mang trang này đến buổi lập kế hoạch quý tiếp theo.