Hệ thiết kế D2C: linh hoạt đến đâu mà không loãng brand?
D2C chạy flash sale, mùa vụ, ra sản phẩm mới liên tục thì hệ thiết kế phải đủ nhanh cho marketing nhưng vẫn giữ nhận diện thương hiệu sau mỗi chiến dịch.
Thương hiệu D2C cần tách rõ hai lớp: brand system cố định (màu gốc, kiểu chữ, logo) và campaign expression linh hoạt (màu chủ đề chiến dịch, ảnh nền, tone ngữ điệu). Làm được điều đó bằng design token hai tầng và khoảng 40 component tập trung vào các block landing page thực sự dùng, không cần xây thư viện component đầy đủ như SaaS. Quan trọng không kém là đào tạo đội marketing tự triển khai trong Figma Variables, vì nếu họ không dùng được thì hệ đó không tồn tại lâu.
D2C (Direct-to-Consumer, bán thẳng đến người tiêu dùng) có nhịp sáng tạo khác hẳn các loại sản phẩm kỹ thuật số khác. Một năm có thể có Tết, Valentine, hè, 9/9, 11/11, 12/12 cùng vài đợt ra sản phẩm mới. Mỗi chiến dịch cần giao diện mới, màu chủ đề mới, ảnh mới, landing page mới. Câu hỏi Sinh Vũ gặp thường xuyên là: "Hệ thiết kế cần linh hoạt tới đâu mà không để brand bị loãng sau vài mùa?" Câu trả lời nằm ở chỗ phân tách đúng hai lớp.
Brand system và campaign expression: hai lớp khác nhau
David Aaker, trong Managing Brand Equity, phân biệt rõ: thương hiệu có phần cứng không đổi và phần mềm được phép biến thể theo ngữ cảnh. Áp dụng vào thiết kế, điều đó có nghĩa là:
- Brand system (cố định): logo, bộ màu gốc, kiểu chữ thương hiệu, tone ngữ điệu cốt lõi, cách sắp xếp visual.
- Campaign expression (linh hoạt): màu chủ đề theo mùa, ảnh nền, headline ngắn, màu nút kêu gọi hành động, bố cục hero section.
Lỗi phổ biến là cho phép campaign expression can thiệp vào brand system: thay logo màu khác cho Tết, dùng kiểu chữ khác vì "trông vui hơn", đổi layout hoàn toàn vì agency chiến dịch đề xuất. Sau 3-4 mùa, khách không còn nhận ra thương hiệu nữa.
Design token hai tầng: cách kỹ thuật giải quyết vấn đề này
Design token (thẻ giá trị thiết kế) là cách lưu trữ các giá trị như màu sắc, khoảng cách, kích thước chữ dưới dạng tên có nghĩa thay vì con số cứng. W3C Design Tokens Community Group mô tả cấu trúc hai tầng:
- Primitive token (thẻ gốc): giá trị thô như
color-blue-500 = #1A56DBhayspacing-4 = 16px. Tầng này không đổi. - Semantic token (thẻ ngữ nghĩa): vai trò như
color-brand-primaryhaycolor-cta-background. Tầng này trỏ đến primitive token và có thể được override theo chiến dịch.
Khi Tết đến, đội marketing chỉ cần đổi semantic token color-brand-primary trỏ sang đỏ thay vì xanh, toàn bộ landing page cập nhật đúng chỗ. Không cần vào từng component sửa tay, không có nguy cơ bỏ sót chỗ nào.
Xây nhiều: bao phủ mọi trường hợp trên lý thuyết, nhưng đội marketing không dùng được hết, component thừa gây nhầm lẫn, chi phí duy trì cao.
Xây ít, tập trung: 40 component thực sự dùng trong landing page D2C bao gồm hero, product feature block, testimonial/UGC, CTA section, footer, bao phủ phần lớn chiến dịch thực tế. Marketing tự dùng được vì không bị lạc trong thư viện quá lớn.
Lỗi thường gặp khi xây hệ cho D2C
- Đặt tên token campaign theo kỹ thuật thay vì ngữ nghĩa: sau 3 chiến dịch không ai nhớ
color-override-7dùng cho việc gì. - Không có quy trình archive: file Figma sau 1 năm lộn xộn, campaign cũ đè lên campaign mới.
- Component không có responsive state: marketing ra landing page trên desktop đẹp nhưng trên điện thoại vỡ layout, phải nhờ kỹ sư sửa mỗi lần.
- Xây component library hoàn chỉnh cho thương hiệu một sản phẩm: chi phí không tương xứng với nhu cầu thực tế.
Hệ thiết kế không tồn tại trên Figma. Nó tồn tại trong tay người dùng nó mỗi ngày.
Sinh Vũ Studio, kinh nghiệm thực hành
Góc nhìn của Sinh Vũ
Sinh Vũ tư vấn D2C theo hướng không cố gắng cover toàn bộ UI pattern như SaaS hay fintech. Gói làm việc A3 tập trung vào 40 component cho các block landing page thực sự được dùng, kèm campaign token system có tên ngữ nghĩa rõ ràng. Nhưng phần quan trọng không kém component là 3-5 buổi pairing trực tiếp với đội marketing, để họ tự tạo campaign theme trong Figma Variables mà không cần nhờ kỹ sư hay quay lại Sinh Vũ.
Lý do: D2C di chuyển nhanh. Nếu mỗi lần ra chiến dịch đội marketing phải chờ một người khác mở file Figma, hệ đó sẽ bị bypass ngay tuần thứ ba. Người ta sẽ mở Canva, chọn template cho nhanh, và brand bị loãng theo cách không ai để ý.
Câu hỏi Sinh Vũ thường hỏi trước khi bắt đầu bất kỳ dự án D2C nào: ai trong đội của Anh/Chị sẽ là người dùng hệ thiết kế này mỗi tuần? Nếu không có câu trả lời rõ, đó là dấu hiệu cần xem lại phạm vi đầu tư trước khi thiết kế bất cứ thứ gì.
Nguồn tham khảo
David Aaker, Managing Brand Equity và Building Strong Brands. W3C Design Tokens Community Group (DTCG). Sinh Vũ Studio, A3 Service Brief (kinh nghiệm thực hành).
Câu hỏi thường gặp
D2C mới ra mắt có nên xây design system ngay không?
Chưa nên. Thương hiệu dưới 2 tuổi hoặc chưa tìm ra kênh bán hiệu quả nên dùng template có sẵn trước. Design system chỉ trả chi phí khi Anh/Chị đã chạy ít nhất 4 chiến dịch lớn mỗi năm và đội marketing cần tự triển khai mà không chờ kỹ sư. Đầu tư sớm quá vào hệ thống trong khi brand identity còn thay đổi là lãng phí.
Khác gì giữa design system cho D2C và cho SaaS?
SaaS cần thư viện component kỹ thuật rộng vì giao diện ứng dụng có hàng trăm trạng thái khác nhau. D2C chủ yếu cần các block landing page như hero, tính năng sản phẩm, đánh giá khách hàng, CTA, footer, cùng token campaign để thay màu chủ đề theo mùa vụ. Xây component library kỹ thuật cao cho D2C đơn sản phẩm là đầu tư sai chỗ.
Nếu đội chỉ có 1-2 người và outsource thiết kế thì có cần design system không?
Không cần và không nên. Chi phí xây và duy trì design system đòi hỏi người bên trong hiểu và dùng nó thường xuyên. Nếu toàn bộ thiết kế outsource, hãy đầu tư vào brand guideline rõ ràng và bộ template chiến dịch thay vì một system hoàn chỉnh.