Cách tiếp cận mới về triển khai CSS

Bootstrap CSS framework đang rất thông dụng. Bản thân các sản phẩm của Got It cũng đang sử dụng Bootstrap, thậm chí từ thời Bootstrap 2.x. Qua nhiều năm làm việc với thư viện CSS này, team Design dường như đã quá rõ về nó. Và các HTML engineer nhận ra một điều: Nếu cứ dùng thư viện kiểu này thì khi có càng nhiều component sẽ phải viết càng nhiều CSS, dẫn đến việc sản phẩm sẽ luôn “bị phụ thuộc” vào HTML engineers. Giả sử những cá nhân này nghỉ phép, hoặc thậm chí nghỉ hẳn công việc ở Got It, thì ai sẽ đảm nhiệm được phần HTML/CSS đây? Nếu cùng 1 thời điểm, có 4 đến 5 sản phẩm cần cập nhật và đều gấp rút như nhau thì liệu 2 người có làm kịp hay không? (Bạn nào đang áp dụng nó thì sẽ rất rõ vấn đề này)

Chúng mình nghĩ đến việc xây nhà, ngôi nhà nào cũng có nhiều phòng, phòng nào cũng đều được xây dựng bởi những viên gạch. Lúc này một ý tưởng lóe lên: “Thế thì liệu có thể xây dựng một thư viện CSS chỉ có những thành phần cơ bản nhất thôi hay không? Rồi mình sẽ dùng nó như những viên gạch để xây dựng các components!”. Thực tế là team Design của Got It không hề sáng tạo ra cách tiếp cận này, mà đơn giản là chợt nghĩ đến và tìm kiếm xem liệu có ai đó trên đời đã thử áp dụng/kiểm định hiệu quả của cách đó hay chưa thôi.

Sau khi google, chúng mình đã nhận thấy chỉ có một số ít nguồn đề cập đến chủ đề này lúc bấy giờ (nổi bật hơn cả là Tailwind CSS). Và thế là cả team bắt đầu tìm hiểu kỹ hơn về nó để về sau có thể tự tin áp dụng ý tưởng này vào Got It Design System.

Phân tích các thành phần của Design System

Hướng tới đối tượng người dùng là chính các Designers, PMs, Engineers và QAs trong nội bộ nhóm làm sản phẩm, team Design của Got It đã xác định các thành phần chính cần phải xây dựng bao gồm: Style guide, UI Library, Code components và Design process (quy trình thiết kế) áp dụng Design System.

Style Guide

Style Guide là một bộ quy tắc tập hợp các tiêu chuẩn áp dụng cho việc quản lý branding; cách sử dụng màu sắc, text styles, illustrations,… trong thiết kế sản phẩm.

Ví dụ ở đây, các màu sắc được phân rõ chính, phụ, kèm mã màu và hướng dẫn sử dụng vô cùng cụ thể. Không chỉ team Design mà bất cứ team nào cần đưa ra hình ảnh, thông điệp, hoặc bất cứ sản phẩm nào mang màu sắc thương hiệu Got It đều có thể dễ dàng tham khảo và làm theo.

UI Library

UI Library là một file Sketch quản lý các components được tạo ra dưới dạng các Smart Symbols, Text Styles và Layer Styles mà các designers có thể dễ dàng thêm vào thư viện trong Sketch để sử dụng trong khi thiết kế. Khi cập nhật các thành phần trong thư viện này, các files sử dụng chúng sẽ nhận được thông báo cập nhật.

Code components

Mỗi component được tạo ra trong UI Library đều được team Design triển khai một phiên bản code ở dạng React Component. Cùng với UI Library, thư viện Code Components cũng cập nhật liên tục các mẫu, trạng thái, ví dụ thực tế kèm theo các đoạn Code Example, nhằm hỗ trợ công việc của các Frontend engineers, và chủ động bám sát những thay đổi của sản phẩm.

Design Process

Quy trình thiết kế cũng được thay đổi sau khi đưa Design System vào sử dụng. Việc sử dụng lại các components đã có sẵn giúp tiết kiệm thời gian thiết kế, đẩy nhanh việc triển khai các phương án thiết kế khác nhau cho một vấn đề, các Designers có thêm thời gian để tập trung hơn vào thiết kế nâng cao trải nghiệm người dùng.

Dù nhìn quy trình phức tạp hơn, nhưng thực tế khi áp dụng thì Design Process đã được thu gọn đáng kể so với trước đây. Ví dụ, trước đây mỗi lần nhận task và chuẩn bị mock design cho askbox, designer đều phải “đẻ ra” một phiên bản mới, dẫn đến vừa tốn thời gian, vừa dễ bị khác với những gì đã làm trước đó. Mà giả dụ có thể dùng lại những thiết kế của askbox cũ, thì việc tìm lại cũng khá… hên xui vì không có hệ thống lưu trữ thống nhất cho cả team. Chưa kể, cách làm này rất khó để đi lâu dài, công việc dễ trở nên rối rắm khi ngày càng có nhiều sản phẩm.

Còn với Design Process mới, khi đã có một thư viện (library) các components có sẵn, designer có thể chỉ đơn giản lấy component mình cần ra dùng, hoặc lắp ghép các components với nhau để tạo ra cái mình muốn. Nếu chưa có component nào thì tạo ra thêm, rồi lại đưa vào thư viện để sau này có thể tái sử dụng, không cần mất thời gian lục lọi trong vô vọng, hay lo lắng về thiết kế không thống nhất.

Với những yêu cầu đòi hỏi phải tạo mới các components, các bên liên quan bao gồm PMs, Designers và Engineers sẽ cùng ngồi lại với nhau để thảo luận, bàn bạc để tạo nên các components mới không chỉ giải quyết các vấn đề hiện tại, mà còn tính toán để có thể sử dụng lại trong tương lai.

Bài học rút ra

Từ quá trình đầy “bão táp” để tạo nên Design System, team Design nhà Got It đã rút ra được kha khá những bài học, cũng là lời khuyên và gợi ý muốn chia sẻ đến các bạn đang gặp bài toán tương tự:

• Phải nói lên vấn đề mình gặp phải để các cấp quản lý cũng như đồng nghiệp tìm cách hỗ trợ xử lý kịp thời.
• Các team phải biết kết nối với nhau, đồng lòng cùng xử lý vấn đề chung.
• Biết tiếp thu học hỏi từ người khác, không nên bảo thủ. Nên học hỏi thêm nhiều kỹ năng khác tuy rằng công việc chính của mình chỉ là design hoặc code, nó sẽ là công cụ hữu ích cho mình trong quá trình phát triển sự nghiệp.
• Biết mạo hiểm chọn giải pháp mới, phù hợp với đặc thù sản phẩm của công ty.

Thành quả — Design System đã thay đổi công việc của các Got It-ians ra sao?

Nhìn chung: Sau một thời gian được đưa vào sử dụng, Design System đã chứng minh hiệu quả trong việc.

Cụ thể:

• PMs: Việc nắm được bao quát các thành phần hiện tại có trong sản phẩm giúp PMs dễ dàng hơn trong việc triển khai các yêu cầu, ý tưởng, lo-fi mocks. PMs trao đổi dễ dàng hơn với bộ phận kỹ thuật thông qua một ngôn ngữ chia sẻ chung nhờ cách đặt tên các components, prop và CSS utilities trong Design System.
• Designers: Thiết kế của sản phẩm được thống nhất, chất lượng các bản thiết kế từ các Designers trong team tương đối đồng đều theo tiêu chuẩn đã đề ra. Thay vì dành hết thời gian để chỉnh sửa mẫu thiết kế, Designers có thêm thời gian để tập trung vào thiết kế trải nghiệm người dùng.
• Engineers (bao gồm HTML engineers và Frontend engineers): Được kiểm chứng qua quá trình phát triển 2 sản phẩm gần đây của công ty, tốc độ triển khai HTML template nhanh hơn đáng kể: 40% đến 50%. Các Frontend engineers vốn chưa từng tự tạo HTML layout thì nay dựa vào DS dần dần đã biết cách áp dụng, chủ động hơn về mặt công việc, giảm phụ thuộc vào HTML engineers.
• QAs: Do nhất quán từ UI đến Code, nên không phải test đi test lại các thành phần UI nữa, dành nhiều thời gian tập trung vào việc test logic kỹ càng hơn.

Kế hoạch tiếp theo của team

• Phân tích, đánh giá khả năng áp dụng Design System vào các sản phẩm khác trong platform vốn dĩ đang sử dụng phương pháp cũ.
• Một số thành viên trong team tiếp tục học thêm về ReactJS để có thể chủ động tự bảo trì, cải tiến, thêm mới các thành phần cho Design System. Tương lai có thể tham gia vào team Frontend để tiến thêm một bước trong quá trình phát triển sự nghiệp.
• Chuyển giao công đoạn tạo HTML layout sang team Frontend vì giờ đây họ đã có thể tham khảo code mẫu của Design System trực tuyến (vẫn có sự hỗ trợ từ phía HTML Engineers), tiến tới cắt giảm nhân lực làm HTML/CSS trung gian (HTML engineers), giúp Design Process được tối ưu hơn nữa.
• Nghiên cứu xây dựng thêm các công cụ nội bộ hỗ trợ việc tạo layout bằng kéo thả. Trước mắt thử nghiệm với việc tạo những trang web tĩnh dạng landing page. Tiêu chí là dễ dùng nhất có thể cho các PM, Designer và bộ phận làm Branding/Marketing.

Việc xây dựng Got It Design System đã có sự đóng góp ý kiến, chia sẻ kinh nghiệm của bạn bè đồng nghiệp khắp nơi, giúp mọi thứ rõ ràng hơn. Đối với các kế hoạch tiếp theo, chắc chắn team Design sẽ có lúc nhờ cậy thêm từ mọi người, rất mong sẽ lại nhận được sự giúp đỡ của bạn bè gần xa!

Bạn có thể tham khảo Design System của Got It tại: https://designsystem.got-it.ai/