Hiểu đúng về hệ thống thiết kế (Design System)

Tại DataCamp, sứ mệnh của chúng tôi là phổ cập giáo dục khoa học dữ liệu cho mọi người, và với hơn 2 triệu học viên trên toàn thế giới, chúng tôi đang tiến rất nhanh. Vận hành ở tốc độ tăng trưởng này đòi hỏi nỗ lực lớn từ tất cả mọi người trong công ty và mang đến nhiều thách thức mới đầy hứng khởi.

Với đội ngũ thiết kế, điều đó có nghĩa là chúng tôi chuyển từ cách thiết kế từng trang sang một phương pháp thiết kế có khả năng mở rộng hơn. Tái sử dụng các thành phần sẵn có, rút ngắn thời gian phát triển, cải thiện khả năng sử dụng và tăng cường khả năng tiếp cận ngày càng trở nên quan trọng.

Bài viết này đề cập cách chúng tôi bắt đầu tạo lập và lý giải một hệ thống thiết kế.

Design system là gì?

Một design system tập hợp tất cả các thành phần cần thiết để phân phối và tái tạo một giải pháp thiết kế. Đây không phải điều mới mẻ hay chỉ dành riêng cho thiết kế sản phẩm số — rất nhiều ví dụ có thể tìm thấy xuyên suốt lịch sử.

Chẳng hạn, đế chế Trung Hoa đầu tiên gặp vấn đề khi cung thủ không thể dùng mũi tên của đồng đội. Mỗi mũi tên được thiết kế riêng cho một loại cung nhất định nên mũi tên khác đơn giản là không vừa. Hoàng đế đầu tiên, Ying Zheng, đã chuẩn hóa cách thiết kế mũi tên và điều đó tạo ra tác động to lớn đến các cuộc chinh phạt quân sự của họ.

Vào thập niên 50, mỗi ga của Hệ thống Tàu điện NYC có hệ thống biển báo riêng. Điều này gây ra rất nhiều nhầm lẫn vì mỗi ga lại có một cách dẫn đường khác nhau. Hệ quả là nhiều người e ngại sử dụng hệ thống này vì họ không hiểu cách nó hoạt động. Massimo Vignelli và Bob Noorda đã tạo ra NYC Transit Authority — Graphics Standards Manual, tài liệu hóa cách làm biển báo và cách đặt chúng trong nhà ga. Theo thời gian, hệ thống này gần như giữ nguyên và đến nay vẫn đang được sử dụng.

Vì sao chúng ta cần một design system?

Khi mỗi trang được thiết kế tách biệt, nhiều thành phần sẽ có bản sao hoặc biến thể tương tự. Điều này khiến sản phẩm số khó hiểu với người dùng và khó bảo trì với kỹ thuật. Tại DataCamp, chúng tôi phát hiện hơn 20 kiểu nút khác nhau trong sản phẩm, mỗi kiểu lại có đặc trưng riêng (trạng thái hover khác nhau, trạng thái vô hiệu hóa không nhất quán, v.v.). Rất khó để theo dõi tất cả các thành phần này khi sản phẩm tăng trưởng nhanh, và gần như bất khả thi để duy trì. Đó là lúc một design system phát huy tác dụng.

Đối với sản phẩm số, một design system mô tả các thành phần giao diện người dùng có thể dùng để tạo nên giao diện giải quyết vấn đề và mang lại trải nghiệm nhất quán cho người dùng.

Khi được triển khai tốt, một design system sẽ tạo ra hiệu ứng dây chuyền dẫn đến …

• Giảm hiểu lầm trong giao tiếp
• Giảm thời gian triển khai
• Giảm công việc bảo trì
• Giảm lỗi
• Giảm yêu cầu hỗ trợ
• Tăng chất lượng
• Tăng hiệu suất
• Tăng tuổi thọ hệ thống
• Tăng khả năng học hỏi
• Tăng khả năng sử dụng
• Tăng khả năng tiếp cận
• Tăng đổi mới
• Tăng mức độ tập trung
• Tăng doanh số

Không hề dễ …

Việc tạo lập, duy trì và thực thi một design system đòi hỏi rất nhiều kỷ luật và nỗ lực liên tục từ tất cả những ai tham gia quá trình tạo ra nó. Không chỉ là thiết kế; kỹ thuật và quản lý sản phẩm cũng là các bên liên quan quan trọng. Tất cả đều cần có khả năng đặt ra những câu hỏi khó như: “Vì sao chúng ta xây dựng thứ này?”, “Chúng ta có thể tái sử dụng thành phần này ở nơi khác không?”, “Chúng ta đã có thứ gì tương tự chưa?”, “Thành phần tùy biến này có mang lại đủ lợi ích so với công sức bỏ ra không?”.

Design System 101 tại DataCamp

1. Lập danh mục thành phần (Component Inventory)

Mục tiêu: Đảm bảo mọi người đều biết về sự tồn tại và trạng thái của một thành phần.

Khi tôi gia nhập DataCamp, có một tệp Sketch chứa màu sắc, biểu tượng, phông chữ và một số thành phần cơ bản. Dù còn xa mới hoàn chỉnh, đó là điểm khởi đầu tốt. Nhóm front-end cũng có một bộ thành phần dùng chung cho nhiều dự án.

Chúng tôi đã cùng nhau tạo một danh mục trong Airtable dựa trên các thành phần đang dùng trong sản phẩm. Điều này giúp đội ngũ thiết kế nắm được những gì đã tồn tại và tránh vô tình tạo ra thành phần mới. Nó cũng cho chúng tôi cái nhìn về số lượng thành phần tương tự và mức độ vấn đề nghiêm trọng đến đâu.

2. Dùng quy ước đặt tên

Mục tiêu: Tránh hiểu lầm giữa Thiết kế và Kỹ thuật.

Khi bắt đầu so sánh các thành phần, chúng tôi nhận ra Thiết kế và Kỹ thuật không nói cùng một ngôn ngữ. Ví dụ, “màu chủ đạo” do thiết kế định nghĩa lại là “màu phụ” trong mã. Những thứ như vậy dễ dẫn đến hiểu lầm khi đội ngũ mở rộng, gây nhầm lẫn và bực bội. Chúng tôi đảm bảo sử dụng chung một hệ thuật ngữ giữa các nhóm.

3. Tối ưu quy trình thiết kế

Mục tiêu: Tránh mất mát công việc và có quy trình minh bạch.

Làm việc chung như một đội thiết kế mang theo những thách thức riêng. Trước đây, chúng tôi lưu thiết kế trên Dropbox, nhưng khi đội ngũ mở rộng, rủi ro mất việc và công sức theo dõi thay đổi tăng vọt.

Đội ngũ thiết kế rất sẵn sàng thay đổi quy trình và chúng tôi bắt đầu dùng Abstract. Công cụ này giúp chúng tôi quản lý phiên bản thiết kế đúng cách, có quy trình minh bạch và tự tin hơn trong quá trình thiết kế.

4. Tài liệu hóa tốt hơn + Onboarding

Mục tiêu: Rút ngắn thời gian onboarding và tránh giao tiếp lặp lại quá mức.

Chúng tôi bắt đầu ghi chép quy trình và design system bằng Slite. Nếu phải giải thích điều gì hơn một lần, thì nên được ghi lại và chia sẻ với đội. Điều này giúp giảm đáng kể chi phí giao tiếp và tránh thất lạc thông tin.

5. Review thiết kế

Mục tiêu: Thiết lập kỳ vọng giữa Thiết kế và Kỹ thuật.

Điều quan trọng là review thiết kế diễn ra theo cả hai chiều. Nhà thiết kế nên có thể review front-end, và front-end cũng nên review thiết kế. Nhà thiết kế thường có xu hướng tạo ra thứ gì đó mới mẻ và “ngầu”. Kỹ sư cần có khả năng đặt câu hỏi khó như: “Sao chúng ta lại làm thứ tùy biến?”, “Không thể tái sử dụng thành phần này à?”, “Có thể làm thành phần này tốt hơn không?”, “Thành phần này có xứng đáng với công sức phát triển thêm không?”. Mục tiêu là biện minh cho quyết định và thiết lập kỳ vọng cho tất cả những người liên quan.

Kết luận

Chúng tôi vừa bắt đầu ghép nối design system và vẫn đang cố gắng sắp xếp lại tất cả các thành phần trùng lặp tìm thấy trong sản phẩm. Còn một chặng đường dài phía trước, nhưng với mỗi thành phần được xử lý, chúng tôi đang tạo ra một sản phẩm tốt hơn, nhất quán hơn và dễ học hơn cho khách hàng.

Chúng tôi rất muốn biết các tổ chức khác lý giải design system như thế nào. Hãy gửi cho tôi một email nếu bạn muốn chia sẻ trải nghiệm của mình.

Tại DataCamp, chúng tôi luôn tìm kiếm những nhân sự tài năng để gia nhập đội ngũ. Quan tâm? Xem các vị trí đang tuyển.