UI/UX & Product Designer

Xin chào, mình là

Zoe Cao

Zoe đang vẽ trên bảng vẽ điện tử tại bàn làm việc

Mình học Biên – Phiên dịch trước khi chuyển sang thiết kế — có lẽ vì vậy mà đến giờ mình vẫn xem mỗi sản phẩm như một ngôn ngữ mà ai đó phải học thật nhanh. Chuyển ngữ giữa hai thứ tiếng và chuyển những logic kỹ thuật phức tạp thành một giao diện dễ hiểu thật ra không khác nhau mấy: cả hai đều đòi hỏi hiểu người nhận là ai trước khi chọn từ ngữ.

Tám năm sau, mình vẫn đang làm đúng điều đó — trên các nền tảng cloud, công cụ dữ liệu, food-tech và ứng dụng vận hành F&B.

Dự án tiêu biểu

Những dự án biết kể chuyện

Mỗi dự án là một cơ hội để giải quyết những vấn đề có ý nghĩa và tạo ra trải nghiệm chạm tới con người.

Minh họa isometric các máy chủ cloud trên bảng mạch

Product Design · 10/2022 – 11/2024 · FCI, TP.HCM

Demo project

Hợp nhất một nền tảng IaaS/PaaS/SaaS rời rạc — xây lại sitemap, design system và ra mắt ứng dụng mobile đầu tiên của sản phẩm. Đạt giải FPT Hackathon.

  • Design System
  • Kiến trúc thông tin
  • Ứng dụng mobile
  • Nền tảng cloud
Xem dự án
Giao diện FPT Cloud trên laptop, đang tạo một instance mới

Product Design · 2023 – 2024 · FCI, TP.HCM

FPT Cloud Service

Làm lại UX/UI cho nền tảng cloud server có sẵn trên web và mobile, phục vụ doanh nghiệp và các công ty thành viên FPT. Mình là designer duy nhất, làm từ sitemap đến design system.

  • Nền tảng cloud
  • Web App
  • Ứng dụng mobile
  • Design System
Xem dự án
Trình chỉnh sửa báo cáo Data Suite với biểu đồ tròn, cột chồng và phần cài đặt biểu đồ

Product Design · 2022 – 2023 · FCI, TP.HCM

Data Suite – Nền tảng trực quan hóa dữ liệu của FPT

Designer duy nhất của nền tảng trực quan hóa dữ liệu được xây dựng để thay thế Power BI trong Tập đoàn FPT: data modelling, báo cáo và dashboard trên web và mobile. Ra mắt tại FPT Techday 2024.

  • Trực quan hóa dữ liệu
  • Design System
  • Doanh nghiệp
  • Web & Mobile
Xem dự án

Mình làm gì

Kỹ năng & năng lực

Một bộ kỹ năng đa dạng, được bồi đắp từ sự tò mò, thực hành và niềm yêu thích học hỏi.

Cách làm việc

  • Quản lý thời gian
  • Tư duy phản biện
  • Prototyping
  • Tư duy phát triển
  • Tinh thần trách nhiệm

UX & Nghiên cứu

  • Nghiên cứu người dùng
  • Usability testing
  • Phỏng vấn người dùng
  • Journey mapping
  • Kiến trúc thông tin
  • Wireframing

UI & Thiết kế hình ảnh

  • Thiết kế giao diện
  • Design system
  • Typography
  • Lý thuyết màu sắc
  • Minh họa
  • Xây dựng thương hiệu

Sản phẩm & Chiến lược

  • Thấu cảm người dùng
  • Tư duy sản phẩm
  • Giải quyết vấn đề
  • Ưu tiên tính năng
  • Quản lý stakeholder
  • Chiến lược thiết kế
  • Điều phối workshop

Công cụ & Phần mềm

  • Figma
  • Adobe Creative Suite
  • Principle
  • Notion
  • Miro
  • HTML/CSS

Tất cả dự án

Tám năm với những bài toán mình vui vì đã gặp

Từ ứng dụng F&B outsource đến nền tảng cloud cho doanh nghiệp — mỗi dự án dạy mình một cách cẩn thận khác nhau.

Minh họa isometric các máy chủ cloud trên bảng mạch

Product Design · 10/2022 – 11/2024 · FCI, TP.HCM

Demo project

Hợp nhất một nền tảng IaaS/PaaS/SaaS rời rạc — xây lại sitemap, design system và ra mắt ứng dụng mobile đầu tiên của sản phẩm. Đạt giải FPT Hackathon.

  • Design System
  • Kiến trúc thông tin
  • Ứng dụng mobile
  • Nền tảng cloud
Xem dự án
Giao diện FPT Cloud trên laptop, đang tạo một instance mới

Product Design · 2023 – 2024 · FCI, TP.HCM

FPT Cloud Service

Làm lại UX/UI cho nền tảng cloud server có sẵn trên web và mobile, phục vụ doanh nghiệp và các công ty thành viên FPT. Mình là designer duy nhất, làm từ sitemap đến design system.

  • Nền tảng cloud
  • Web App
  • Ứng dụng mobile
  • Design System
Xem dự án
Trình chỉnh sửa báo cáo Data Suite với biểu đồ tròn, cột chồng và phần cài đặt biểu đồ

Product Design · 2022 – 2023 · FCI, TP.HCM

Data Suite – Nền tảng trực quan hóa dữ liệu của FPT

Designer duy nhất của nền tảng trực quan hóa dữ liệu được xây dựng để thay thế Power BI trong Tập đoàn FPT: data modelling, báo cáo và dashboard trên web và mobile. Ra mắt tại FPT Techday 2024.

  • Trực quan hóa dữ liệu
  • Design System
  • Doanh nghiệp
  • Web & Mobile
Xem dự án
Website đặt hàng Pizza Hut: trang chủ và thực đơn ưu đãi

UI & Graphic Design · 2017 – 2018 · Glite, TP.HCM

Pizza Hut – Ứng dụng đặt hàng

Ứng dụng đặt hàng trên web và mobile, nơi khách tự chọn pizza theo khẩu vị, tích điểm và đổi voucher. Thiết kế theo brand guideline cùng một UI library dùng chung.

  • Food-tech
  • Web & Mobile
  • Branding Guideline
  • UI Library
Xem dự án
Hai tablet chạy POS Pizza Hut và danh sách đơn hàng

UI & Graphic Design · 2016 – 2017 · Glite, TP.HCM

Pizza Hut – Hệ thống ứng dụng vận hành

Bộ ứng dụng vận hành nhà hàng cho Pizza Hut Indonesia: Kitchen Display, POS, Dine-in và Driver App trên tablet và mobile, với bố cục dễ chạm và cập nhật real-time giữa các ứng dụng.

  • Thiết kế POS
  • Ứng dụng vận hành
  • Tablet & Mobile
  • F&B
Xem dự án

Product Design · 2022 – 2024

Demo project – Biến một nền tảng rời rạc thành một hệ thống thống nhất

Một nền tảng dịch vụ cloud được xây từng tính năng một, bởi nhiều đội khác nhau, qua nhiều năm — cho đến khi không còn thứ gì có cảm giác thuộc về cùng một chỗ.

Công ty
FCI, TP.HCM
Thời gian
10/2022 – 11/2024
Vai trò
Lead Product Designer
Nền tảng
Web + Mobile
Lĩnh vực
Cloud / SaaS
Đám mây isometric phát sáng với tủ máy chủ phía trên bảng mạch

Tổng quan dự án

FCI SmartCloud cung cấp các dịch vụ IaaS, PaaS và SaaS, giúp doanh nghiệp ở mọi quy mô hiện đại hóa hoạt động. Khi mình tham gia, sản phẩm đã phát triển một cách tự phát — mỗi tính năng được xây riêng, component không được dùng chung, và trải nghiệm thiếu nhất quán trên từng màn hình.

Mục tiêu không phải là làm lại phần bề mặt. Mục tiêu là xây lại phần nền móng: hiểu những gì thực sự đang có, thiết lập hệ thống bên dưới, rồi mới khiến sản phẩm trở thành một thể thống nhất.

Việc đầu tiên mình làm không phải là redesign — mà là dựng lại sitemap và user flow dựa trên những gì thực sự đang tồn tại, để mọi quyết định sau đó đều đứng trên sản phẩm thật, chứ không phải trên tài liệu mô tả nó.

Đội ngũ & vai trò của mình

Mình là lead product designer, làm việc chặt chẽ với các product manager và trưởng nhóm kỹ thuật trên hai mảng sản phẩm cùng lúc.

Vai trò của mình

Lead Product Designer

Kiến trúc hệ thống, design system, UX research, thiết kế ứng dụng mobile, quản lý Figma.

Sản phẩm

Product Manager

Lộ trình sản phẩm, thống nhất với stakeholder, ưu tiên tính năng.

Kỹ thuật

Frontend Lead

Hiện thực component, tích hợp design system, các ràng buộc kỹ thuật.

Kỹ thuật

Backend Engineer (×3)

Thiết kế API, logic dịch vụ, hạ tầng nền tảng.

QA

QA Engineer

Lập kế hoạch kiểm thử, review thiết kế cho các trường hợp biên và trạng thái lỗi.

Stakeholder

Ban lãnh đạo FPT / FCI

Định hướng kinh doanh, nhà tài trợ Hackathon, phê duyệt cuối cùng.

Người dùng mục tiêu

Nền tảng phục vụ hai nhóm người dùng khác biệt, với nhu cầu và mức độ am hiểu kỹ thuật rất khác nhau.

IT Admin doanh nghiệp

Người dùng kỹ thuật quản lý tài nguyên cloud, khởi tạo dịch vụ và giám sát hạ tầng. Họ cần quyền kiểm soát, sự chính xác và truy cập nhanh vào trạng thái hệ thống.

Người ra quyết định kinh doanh

Các quản lý không chuyên kỹ thuật đang cân nhắc chuyển lên cloud. Họ cần hiểu rõ nền tảng làm được gì và tin rằng nó đáng tin cậy — mà không phải đọc tài liệu hướng dẫn.

Lập trình viên

Kỹ sư triển khai và quản lý ứng dụng trên nền tảng. Họ coi trọng hiệu quả, thông báo lỗi rõ ràng và hành vi có thể đoán trước.

Người dùng mobile (nhóm mới)

Những người cần giám sát và quản lý tài nguyên cloud khi đang di chuyển — chính là đối tượng của ứng dụng mobile đầu tiên mình thiết kế cho sản phẩm này.

Mục tiêu kinh doanh

  • Giảm trở ngại khi onboarding cho khách hàng doanh nghiệp mới sử dụng dịch vụ cloud của FCI
  • Tạo trải nghiệm sản phẩm nhất quán, có thể mở rộng cho các tính năng mới mà không tích tụ thêm design debt
  • Tiếp cận người dùng mobile bằng ứng dụng native mobile đầu tiên của sản phẩm
  • Giành giải FPT Hackathon để chứng minh khả năng đổi mới và năng lực của đội
  • Giúp design system có thể được kế thừa và cải thiện bởi các designer sau này mà không phải làm lại
Doanh nghiệp cần sản phẩm mang dáng dấp enterprise. Người dùng cần sản phẩm dễ dùng. Hai mục tiêu này thật ra gần nhau hơn nhiều so với những gì sản phẩm cũ cho thấy.

Bối cảnh thiết kế

Hiện trạng ban đầu

Trước khi mình tham gia, mỗi tính năng được xây dựng riêng lẻ. Các component trong sản phẩm không phải lúc nào cũng nhất quán — có màn hình dùng kiểu button, spacing token và kiểu điều hướng khác nhau cho cùng một tương tác. Cũng không có một sitemap chung phản ánh đúng sản phẩm đang chạy.

Ràng buộc

Đội không thể ngừng ra mắt tính năng để refactor mọi thứ. Design system phải được xây dần, thay từng component khi tính năng được cập nhật — chứ không phải một cuộc redesign toàn bộ trong một lần.

Điểm xuất phát của mình

Mình audit sản phẩm đang chạy, không phải tài liệu. Từng màn hình, từng luồng, từng component — được lập bản đồ để hiểu những gì thực sự đang tồn tại trước khi quyết định thay đổi điều gì.

Vấn đề của người dùng

Vấn đề #1 — Điều hướng

Người dùng không đoán được tính năng nằm ở đâu. Điều hướng đã phình ra mà không có một kiến trúc thông tin nhất quán, nên mental model bị vỡ giữa các mục.

Vấn đề #2 — Component thiếu nhất quán

Cùng một hành động — ví dụ xác nhận xóa — lại hiện ra các kiểu modal khác nhau tùy người dùng đang ở phần nào của sản phẩm.

Vấn đề #3 — Không có bản mobile

Người cần kiểm tra trạng thái dịch vụ hoặc xử lý cảnh báo khi đang di chuyển không có lựa chọn nào trên mobile — họ phụ thuộc hoàn toàn vào desktop.

Vấn đề #4 — Trạng thái lỗi gây khó hiểu

Thông báo lỗi mang nặng tính kỹ thuật và thường không được diễn giải cho người dùng không phải lập trình viên, khiến người ra quyết định kinh doanh không thể tự xử lý vấn đề.

Chỉ số chính

Đầu tiên

Ứng dụng native mobile đầu tiên trong lịch sử sản phẩm, ra mắt trên iOS và Android.

Đạt giải FPT Corporation Hackathon với nền tảng đã được thiết kế lại.

2 năm

Từ lần audit đầu tiên đến một design system mà sản phẩm đang vận hành dựa trên đó.

Mức độ áp dụng design system theo từng khu vực sản phẩm
Màn hình mobile100%
Điều hướng95%
Form & input88%
Bảng dữ liệu82%
Modal & overlay78%

Nghiên cứu người dùng

Mình phỏng vấn 8 người dùng nội bộ (IT admin, lập trình viên và một quản lý kinh doanh) và xem lại các support ticket để tìm ra những điểm vướng lặp đi lặp lại.

Insight chính

Phát hiện 01 — Mental model về điều hướng

Người dùng nhóm tính năng theo loại dịch vụ (compute, storage, networking), nhưng điều hướng lại được nhóm theo thời điểm tính năng được xây. Hai cách này không khớp nhau.

Phát hiện 02 — Niềm tin vào trạng thái lỗi

Người dùng không chuyên kỹ thuật bỏ qua hẳn các modal báo lỗi khi không hiểu chúng — họ gọi cho bộ phận hỗ trợ. Nội dung thông báo lỗi là một vấn đề UX vô hình.

Phát hiện 03 — Hành vi giám sát trên mobile

3 trên 8 người dùng cho biết họ theo dõi tình trạng dịch vụ qua thông báo Slack vì không có bản mobile — một cách làm tạm che đi khoảng trống của sản phẩm.

Phát hiện 04 — Khoảnh khắc gỡ bỏ định kiến

Mình từng nghĩ một dashboard dày đặc thông tin sẽ khiến người dùng doanh nghiệp thấy “mạnh mẽ” hơn. Kết quả test cho thấy điều ngược lại: bố cục đơn giản giúp hoàn thành tác vụ nhanh hơn. Mình đã điều chỉnh thiết kế theo phiên bản đơn giản.

Phạm vi & user story

Dự án được chia thành hai giai đoạn: nền móng (design system + IA) và mở rộng (ứng dụng mobile + tính năng mới).

User storyPhạm viƯu tiênTrạng thái
Là IT admin, tôi muốn điều hướng nhất quán để tìm được tính năng mà không phải đoánXây lại IA + component điều hướngCaoHoàn thành
Là lập trình viên, tôi muốn thông báo lỗi cho biết bước tiếp theo cần làm, chứ không chỉ báo điều gì đã saiThiết kế lại trạng thái lỗi + nội dungCaoHoàn thành
Là quản lý kinh doanh, tôi muốn một dashboard có thể hiểu ngay mà không cần kiến thức kỹ thuậtThiết kế lại dashboardCaoHoàn thành
Là người dùng đang di chuyển, tôi muốn kiểm tra trạng thái dịch vụ và xử lý cảnh báo ngay trên điện thoạiỨng dụng mobile (iOS + Android)Trung bìnhHoàn thành
Là designer tương lai, tôi muốn một design system có thể mở rộng mà không phá vỡ những gì đang cóDesign system token + tài liệuTrung bìnhHoàn thành
Là admin, tôi muốn thao tác hàng loạt trên tài nguyên để không phải lặp lại một thao tác 20 lầnMẫu thao tác hàng loạtThấpĐang thực hiện

Logic & quy tắc nghiệp vụ

Luồng khởi tạo dịch vụ

Hành trình người dùng — khởi tạo một dịch vụ cloud mới
  1. 01Chọn loại dịch vụ
  2. 02Cấu hình thông số
  3. 03Xem lại & xác nhận
  4. 04Đang khởi tạo
  5. 05Dịch vụ hoạt động

Quy tắc nghiệp vụ chính

  • Người dùng không thể khởi tạo dịch vụ vượt quá hạn mức tài khoản — hệ thống phải hiển thị hạn mức còn lại trước bước 2, không đợi đến lúc xác nhận
  • Xóa một dịch vụ đang hoạt động cần xác nhận bằng cách gõ lại tên dịch vụ, để tránh mất dữ liệu ngoài ý muốn
  • Trạng thái lỗi phải có lời giải thích dễ hiểu + hành động được đề xuất cho người dùng không chuyên kỹ thuật, bên cạnh mã lỗi dành cho lập trình viên
  • Ứng dụng mobile chỉ có quyền xem — việc khởi tạo vẫn chỉ làm trên desktop ở bản v1 để giảm độ phức tạp và rủi ro

Màn hình UI

Một số màn hình tiêu biểu từ nền tảng sau khi thiết kế lại.

Toàn bộ màn hình nằm trong prototype Figma.

Tài liệu đính kèm

FCI SmartCloud — Tài liệu design systemFigma · Thư viện component + bảng token
Audit sitemap — Trước & sauPDF · Lập bản đồ kiến trúc thông tin
Tổng hợp phỏng vấn người dùngPDF · 8 buổi phỏng vấn, insight chính & trích dẫn
Prototype ứng dụng mobileFigma · Prototype tương tác, iOS & Android

Kết quả

Bản thiết kế lại mang đến một trải nghiệm thống nhất trên cả web và mobile — lần đầu tiên SmartCloud có cảm giác là một nền tảng duy nhất, thay vì một tập hợp tính năng.

  • Xây lại sitemap và điều hướng theo cách người dùng thực sự nghĩ về dịch vụ cloud, chứ không theo cách sản phẩm đã được xây
  • Thiết lập design system với token, component và tài liệu dùng chung — các thành viên sau này có thể kế thừa
  • Ra mắt ứng dụng mobile đầu tiên của sản phẩm (iOS + Android), bao gồm giám sát và quản lý cảnh báo
  • Đạt giải FPT Corporation Hackathon, chứng minh khả năng của đội trong việc ra mắt sản phẩm đổi mới dưới áp lực
  • Viết lại trạng thái lỗi bằng ngôn ngữ dễ hiểu, giảm số lượng support ticket liên quan đến UI
Phần việc quan trọng nhất không phải là những màn hình cuối cùng — mà là hệ thống bên dưới chúng. Mọi tính năng sau đó đều có sẵn một nền móng để xây tiếp.

Product Design · 2023 – 2024

FPT Cloud Service – Web App & Mobile App

Cải thiện UX/UI cho một nền tảng cloud đang vận hành, phục vụ doanh nghiệp trong nước, các công ty thành viên FPT và Tập đoàn FPT.

Khách hàng
Tập đoàn FPT
Thời gian
2023 – 2024
Vai trò
UI/UX Designer (một mình)
Nền tảng
Web, Mobile, Tablet
Lĩnh vực
Cloud / IaaS

Tổng quan

FPT Cloud Server cung cấp hệ thống máy chủ ảo an toàn, ổn định, được thiết kế tập trung để dễ mở rộng. Người dùng có thể tạo và cấu hình các compute instance với rất ít thao tác, và điều khiển hệ thống qua web, CLI và API. Từng thành phần đều cấu hình riêng được: bộ xử lý, lưu trữ, mạng, hệ điều hành và cách tính phí.

Điểm mạnh của sản phẩm

Auto-Scale

Instance tự thay đổi kích thước theo khối lượng công việc và nhu cầu sử dụng.

Uptime 99.99%

Cloud server của FPT Cloud cam kết vận hành ổn định với uptime lên đến 99.99%.

An toàn & Bảo mật

Có sẵn tường lửa Standard Firewall L4, cùng nhiều lựa chọn tường lửa từ các hãng bảo mật lớn.

Load Balancing

Chia tải giữa các máy chủ ảo giúp tăng hiệu năng, độ sẵn sàng và khả năng mở rộng.

Vai trò

Mình là designer duy nhất của sản phẩm, làm việc sát với nhóm Product Owner theo quy trình Agile (Jira và Microsoft 365).

  • Phối hợp với nhóm PO
  • Sitemap, wireframe và prototype
  • Design iteration và hi-fi UI mockup
  • Xây dựng design system
  • Tài liệu marketing

Quy trình thiết kế

Research

Nhóm phân tích phản hồi người dùng do đội sales thu thập và làm khảo sát nội bộ để tìm ra các pain point quan trọng và những chỗ cần cải thiện. Từ đó, mình và Product Owner thống nhất ba insight chính:

Insight 01

Cần một design system nhất quán giữa web và mobile.

Insight 02

Các tác vụ quản lý cloud phức tạp cần điều hướng và user flow dễ hiểu.

Insight 03

Trên mobile, người dùng cần theo dõi dễ dàng và xem nhanh các thông tin quan trọng.

Ideation

Sau khi có kết quả research, nhóm xây dựng wireframe và user flow mới cho web và mobile app, tập trung vào điều hướng, quản lý tài nguyên và trực quan hóa dữ liệu.

Iterative design

Dựa trên research, phân tích đối thủ và các user flow, mình xây dựng design system và style guide để mọi module của sản phẩm luôn nhất quán.

  • Design System, phiên bản 2.0
  • Style Guideline, phiên bản 1.0
  • Product design cho desktop, mobile và tablet (UI phiên bản 2.0.0, 2024)

Giải quyết vấn đề

Thách thứcGiải pháp
Thiết kế lại một sản phẩm đang chạy mà không làm gián đoạn người dùng hiện tạiThiết kế lại theo từng giai đoạn, ưu tiên các tính năng quan trọng dựa trên phản hồi người dùng
Tạo trải nghiệm liền mạch giữa các module phức tạp (IAM, Billing, Compute Engine và nhiều module khác)Một design system vững chắc giữ mọi module nhất quán
Cân bằng giữa đầy đủ tính năng cho dân IT và sự dễ dùng cho cấp quản lý trên mobileTách user flow riêng cho người dùng kỹ thuật và người dùng quản lý, tối ưu theo nhu cầu của từng nhóm

Thiết kế lấy người dùng làm trung tâm

Mình tập trung làm giao diện dễ hiểu cho các tác vụ quản lý cloud phức tạp, phục vụ cả nhân viên IT lẫn cấp quản lý. Mobile app được thiết kế để nhận thông báo nhanh, theo dõi máy ảo dễ dàng và xem tổng quan chi phí đơn giản.

Yếu tố kỹ thuật

Mình làm việc với các nhóm phát triển để đảm bảo mọi cải tiến thiết kế đều khả thi trên kiến trúc hệ thống hiện có, và thiết kế sẵn cho việc mở rộng để thêm tính năng mới mà không ảnh hưởng đến trải nghiệm.

Kết quả và tác động

Dự án đang ở giai đoạn lên kế hoạch và sửa lỗi, với lộ trình cải thiện UX/UI dần dần. Mình đã lập kế hoạch đầy đủ để xây dựng lại design system và component library, giúp sản phẩm nhất quán hơn và giảm các phần bị hardcode.

Bài học rút ra

Dự án này cho thấy cách mình xử lý các bài toán thiết kế phức tạp trong dịch vụ cloud doanh nghiệp: xây dựng design system, cân bằng yêu cầu kỹ thuật với nhu cầu người dùng, và cải thiện một sản phẩm đang chạy mà không làm phiền những người dùng nó mỗi ngày.

  • Phải có nền móng vững (design system) trước khi phát triển tính năng thật nhanh
  • Thiết kế lại một sản phẩm đang chạy cần lên kế hoạch và ưu tiên thật cẩn thận
  • Phản hồi liên tục từ người dùng là thứ dẫn đường cho các quyết định đúng ở những sản phẩm kỹ thuật phức tạp

Product Design · 2022 – 2023

Data Suite – Nền tảng trực quan hóa dữ liệu của FPT

Nền tảng trực quan hóa dữ liệu cho công việc tài chính, kế toán trong Tập đoàn FPT, được xây dựng để song hành và dần thay thế Power BI.

Khách hàng
Tập đoàn FPT
Thời gian
2022 – 2023
Vai trò
UI/UX Designer (một mình)
Nền tảng
Web + Mobile
Trạng thái
Ra mắt tại FPT Techday 2024

Tổng quan

Mục tiêu của nhóm mình là một giải pháp trực quan hóa dữ liệu hoàn chỉnh, tương đương Power BI, phục vụ công việc tài chính, kế toán trong Tập đoàn FPT và dần thay thế Power BI. Nhu cầu nghe thì đơn giản, nhưng để đáp ứng được, nhóm PO và BA phải liên tục rà soát tính năng của Power BI, chọn ra những tính năng thật sự quan trọng với tập đoàn và các công ty con, đồng thời tìm hiểu cách đối thủ xử lý big data và bảo mật dữ liệu.

  • Ứng dụng web: trực quan hóa dữ liệu, báo cáo và dashboard, data modelling, quản lý tài khoản, quản lý workspace và tổ chức
  • Ứng dụng mobile native: xem báo cáo và dashboard

Vai trò

Mình là designer duy nhất của sản phẩm, làm việc với nhóm PO theo quy trình Agile (Jira và Microsoft 365).

  • Phối hợp với nhóm PO
  • Sitemap, wireframe và prototype
  • Design iteration và hi-fi UI mockup
  • Xây dựng design system
  • Tài liệu marketing

Quy trình thiết kế

Research

Với sự hỗ trợ của Product Owner, mình thu thập phân tích tính năng của Power BI và nhu cầu người dùng để nhìn UX của sản phẩm một cách khách quan. Từ đó, nhóm thống nhất ba insight chính:

Insight 01

Một hệ thống phân quyền truy cập dữ liệu nhiều cấp, an toàn là điều bắt buộc.

Insight 02

Công cụ data modelling và trực quan hóa phải dễ hiểu.

Insight 03

Sản phẩm phải dùng được trên cả web và mobile.

Ideation

Sau khi cùng nhóm làm rõ nhu cầu, nhóm hoàn thành các user flow cốt lõi cho những tính năng đầu tiên, rồi bắt đầu wireframe và user flow cho web và mobile, tập trung vào data modelling, trực quan hóa và quản trị tài khoản.

Iterative design

Cuối cùng, nhóm xây dựng một design system hoàn chỉnh cùng các prototype hi-fi, rồi tinh chỉnh qua phản hồi của stakeholder và A/B testing cho đến khi sản phẩm phục vụ người dùng cuối tốt nhất có thể.

Giải quyết vấn đề

Thách thứcGiải pháp
Thiết kế giao diện dễ hiểu cho data modelling và trực quan hóa phức tạpQuy trình data modelling từng bước với gợi ý trực quan rõ ràng
Tạo hệ thống phân quyền nhiều cấp an toàn mà không làm trải nghiệm nặng nềHệ thống phân quyền chi tiết với cách điều khiển dễ hiểu
Giữ web và mobile nhất quánMột design system linh hoạt, dùng được cho cả giao diện web và mobile

Thiết kế lấy người dùng làm trung tâm

Suốt lộ trình phát triển, nhóm hướng đến cách hiển thị dữ liệu dễ hiểu và dễ nhìn, để người dùng nắm insight nhanh và ra quyết định chính xác. Data Suite được điều chỉnh cho từng vai trò trong FPT, mỗi vai trò có mức truy cập dữ liệu và nhu cầu phân tích riêng.

Yếu tố kỹ thuật

Đội kỹ thuật đảm bảo kiến trúc hỗ trợ nhiều cách nhập dữ liệu và kết nối cơ sở dữ liệu, và cùng nhóm thiết kế kiểm chứng khả năng cập nhật real-time và đồng bộ giữa các nền tảng.

Kết quả và tác động

Khi mình chuyển sang dự án khác vào tháng 3/2023, Data Suite vẫn đang ở giai đoạn proof of concept, một số công ty thành viên FPT dùng thử và chạy A/B test để hoàn thiện trải nghiệm. Đến FPT Techday tháng 11/2024, sản phẩm đã ra mắt người dùng cuối và đang trong chiến dịch marketing.

Bài học rút ra

Dự án này cho thấy cách mình làm các công cụ trực quan hóa dữ liệu phức tạp: cân bằng nhu cầu người dùng với yêu cầu bảo mật khắt khe, xây dựng design system đầy đủ và điều chỉnh cho cả web lẫn mobile.

  • Sự đơn giản và thẩm mỹ là thứ biến dữ liệu thành insight
  • Thiết kế phân quyền dữ liệu nhiều cấp mà vẫn giữ trải nghiệm nhẹ nhàng là việc rất phức tạp
  • Công cụ dữ liệu phức tạp cần được kiểm thử và cải tiến liên tục

UX/UI Design · 2018 – 2022

Pizza Hut – Ứng dụng eCommerce cho chuỗi nhượng quyền

Website và ứng dụng native cho Pizza Hut Digital Ventures, giúp Pizza Hut phát triển thành thương hiệu nhượng quyền số.

Công ty
Yum! Brands · PHDV
Thời gian
2018 – 2022
Vai trò
UI/UX Designer
Nền tảng
Responsive web + app native
Đội ngũ
100–150 người

Tổng quan

Pizza Hut Digital Ventures (trước đây là Pizza Hut Digital & Technology) là thương hiệu số thuộc Pizza Hut, một phần của Yum! Brands. Mình tự hào được góp sức vào nền tảng số đẳng cấp thế giới của PHDV (web, iOS và Android), giúp Pizza Hut phát triển thành thương hiệu nhượng quyền số nhờ công nghệ dựa trên dữ liệu, sự đồng hành và văn hóa lấy con người làm đầu, và mang đến trải nghiệm đặt hàng tốt nhất cho mọi người yêu thích thực đơn Pizza Hut.

Ở PHDV, mình thiết kế và cải thiện website, ứng dụng mobile, và cùng các nhóm khác xây dựng design system cốt lõi. Mục tiêu của mình là học sâu hơn về product design xuyên suốt cả vòng đời phát triển sản phẩm.

Đội ngũ & vai trò của mình

  • Hỗ trợ UX research tại châu Á
  • Sitemap, user flow, wireframe và prototype
  • Kiểm thử nội bộ tại Việt Nam
  • Design iteration và hi-fi UI mockup
  • Hỗ trợ xây dựng design system
  • Tài liệu marketing

Đội sản phẩm có 100–150 người: thiết kế, UX research, phát triển web và mobile, product manager và nhiều vị trí khác, làm việc theo Agile với Jira và Monday.

Tháng đầu tiên, mình dành nhiều thời gian trò chuyện với đội thiết kế. Trước đây mình chỉ làm cùng một đồng đội và gánh phần lớn việc của nhóm; ở đây mình có những đồng nghiệp quốc tế nhiều năm kinh nghiệm. Mình bắt đầu học quy trình sản phẩm chuẩn và nhận các tính năng cụ thể trên website và app dưới sự hướng dẫn của Team Leader.

Câu chuyện kinh doanh

Doanh số của Pizza Hut tăng chậm lại, trong khi các đối thủ như Domino’s đẩy mạnh kênh số. Sau khoản đầu tư 130 triệu USD từ công ty mẹ Yum! Brands, Pizza Hut Digital Ventures (nay là Pizza Hut Digital & Technology) được thành lập năm 2017 để dùng công nghệ số cải thiện trải nghiệm khách hàng: thanh toán online, đặt giao hàng và mang đi, và chương trình khách hàng thân thiết.

Vấn đề 01

Doanh số tăng trưởng giảm mạnh.

Vấn đề 02

Pizza Hut tụt lại sau Domino’s và các chuỗi pizza nhượng quyền khác.

Vấn đề 03

Đặt hàng và tùy chỉnh món còn khó khăn.

Vấn đề 04

Thanh toán trực tiếp bất tiện.

Tầm nhìn

PHDT có sứ mệnh rõ ràng và tầm nhìn sản phẩm tập trung: một nền tảng thương mại điện tử cốt lõi, sáng tạo, gồm website và app native cho mọi thị trường nhượng quyền, mang đến trải nghiệm xuất sắc cho khách hàng và giúp việc đặt hàng, giao hàng hiệu quả, tiết kiệm hơn.

“Delivering Digital & Technology Excellence for Our Customers, Team Members, and Franchisees.”

Tính năng sản phẩm

Website và mobile app

Khách hàng đặt pizza yêu thích ở bất cứ đâu, bất cứ lúc nào.

Cách giao hàng & thời gian đặt

Chọn cách giao hàng và hẹn giờ đơn giản, ví dụ “ASAP” hoặc “hẹn giờ sau”.

Thực đơn & tùy chỉnh món

Thực đơn online dễ xem, dễ tùy chỉnh: topping, đế bánh và món ăn kèm.

Giỏ hàng & thanh toán

Giỏ hàng dễ dùng để quản lý đơn, thanh toán online nhanh và an toàn.

Theo dõi đơn hàng

Hẹn giờ đặt trước và theo dõi tiến độ đơn hàng theo thời gian thực.

Tích điểm & đổi quà

Chương trình khách hàng thân thiết tặng điểm cho mỗi đơn online, dùng để đổi giảm giá, pizza miễn phí và ưu đãi đặc biệt.

Persona & hành trình khách hàng

Sau giai đoạn khám phá và thấu cảm, nhóm chuyển sang giai đoạn định nghĩa vấn đề. Nhóm làm usability test với hai người thuộc các nhóm khách hàng cốt lõi: cho họ xem website Pizza Hut hiện tại và nhờ họ đặt một chiếc pizza với một cách nhận hàng, giao tận nơi hoặc đến lấy. Kết quả test cho thấy những khó khăn chính:

Giao hàng

Đặt giao tận nơi

Khách hàng khó kiểm tra món nào còn trên thực đơn và khó tùy chỉnh đơn hàng.

Đến lấy

Đặt rồi đến lấy

Khách hàng gặp khó khăn khi nhận hàng tại cửa hàng, do cách kiểm tra đơn và thông tin khách hàng.

Đội thiết kế tại Việt Nam vẽ customer journey map đầu tiên vào quý 1/2019.

Người dùng mục tiêu

Trong đợt research thứ hai (quý 4/2019), các UX researcher của PHDV UK làm nghiên cứu người dùng và khảo sát với 31 người tham gia tại Nhật Bản. Tổng hợp kết quả cùng họ và đối chiếu với chiến lược kinh doanh, nhóm tìm ra ba nhóm tuổi chính:

26%

30–35 tuổi

Khách hàng tập trung vào sự nghiệp, đặt pizza cho bữa ăn nhanh, thích sự đa dạng về hương vị, topping, món ăn kèm và giao hàng tận nhà.

26%

35–40 tuổi

Người đi làm lâu năm và cấp quản lý, quan tâm ưu đãi và combo cho bữa ăn gia đình, các buổi tụ họp.

13%

40–45 tuổi

Chuyên gia cấp cao và chủ doanh nghiệp, chọn ưu đãi và combo cho các buổi họp công ty và dịp giao lưu.

Nghiên cứu đối thủ

Nghiên cứu đối thủ là bước quan trọng trong giai đoạn định nghĩa. Phân tích tính năng và giải pháp trên thị trường giúp nhóm thấy Pizza Hut đang đứng ở đâu, dịch vụ nào còn cơ bản và dịch vụ nào đã đầy đủ, cùng điểm mạnh và điểm yếu của đối thủ. Nhờ đó nhóm xác định được giá trị cốt lõi và cơ hội để sản phẩm nổi bật.

Sitemap & User Flow

Sitemap và user flow thể hiện toàn bộ hành trình của người dùng trong app, từ lúc đặt hàng đến khi thanh toán. Chúng giúp nhóm tìm ra cơ hội cải thiện trải nghiệm, và cho designer, product manager và developer một bức tranh chung về cấu trúc của giải pháp.

Hi-fi UI Mockup (phiên bản 2, 2020)

Năm 2020, công ty phát triển nhanh, đội thiết kế mở rộng ở Anh, Mỹ và Việt Nam. Đây là cơ hội thú vị để làm phiên bản thứ hai cùng các product designer và UX researcher khắp thế giới.

Lựa chọn giao hàng & thời gian đặt

App hỗ trợ giao tận nơi và đến lấy. Người đến lấy tìm cửa hàng gần nhất trên bản đồ, bằng cách nhập địa điểm hoặc dùng vị trí điện thoại. Người đặt giao tận nơi nhập địa chỉ bằng mã bưu chính hoặc địa chỉ cụ thể, rồi chọn thời gian giao mong muốn.

Thực đơn & tùy chỉnh món

Thực đơn có sáu nhóm: ưu đãi, pizza, món ăn kèm, sốt chấm, tráng miệng và đồ uống. Người dùng tùy chỉnh pizza theo cỡ, đế, sốt, phô mai và topping: tự tạo pizza, chọn bốn topping bất kỳ, hoặc làm nửa nọ nửa kia với lựa chọn khác nhau cho mỗi nửa trước khi thêm vào giỏ.

Giỏ hàng & thanh toán

Trong giỏ hàng, người dùng quản lý thời gian đặt, địa chỉ giao và các món, có thể thêm coupon và món gợi ý. Khi thanh toán, họ nhập thông tin người nhận, chọn phương thức thanh toán và có thể đăng ký để tham gia chương trình khách hàng thân thiết. Sau khi đặt, màn hình xác nhận hiển thị theo dõi đơn, thời gian giao dự kiến, chi tiết đơn, địa chỉ và phương thức thanh toán.

Điều mình học được

Pizza Hut Digital & Technology là cơ hội tuyệt vời để mình đi sâu vào thiết kế sản phẩm số, nơi thiết kế sáng tạo và công nghệ kết hợp để tạo ra sản phẩm mang lại trải nghiệm liền mạch và giữ chân khách hàng. Mình cũng được làm việc liên phòng ban và hỗ trợ toàn bộ quy trình phát triển sản phẩm.

  • Cách phát triển sản phẩm số trong môi trường nhượng quyền
  • Giữ dữ liệu nhất quán giữa website và mobile app
  • Phối hợp liên phòng ban với các nhóm Agile
  • Làm việc trong môi trường đa văn hóa

UI & Graphic Design · 2017 – 2018

Pizza Hut – Ứng dụng đặt hàng

Ứng dụng giúp khách đặt pizza ngay trên điện thoại, tích điểm, đổi voucher và tùy chỉnh pizza theo khẩu vị.

Công ty
Glite, TP.HCM
Thời gian
2017 – 2018
Vai trò
UX/UI Designer & Graphic Assistant
Nền tảng
Web, Android, iOS
Lĩnh vực
eCommerce / F&B

Tổng quan

Với ứng dụng này, khách hàng dễ dàng mua pizza ngay trên điện thoại. Ngoài việc tích điểm và đổi voucher, điểm mạnh lớn nhất là cho phép khách tùy chỉnh pizza theo khẩu vị của mình.

Vai trò

Với vai trò UX/UI Designer kiêm Graphic Assistant, mình tự thiết kế 50% phần nền của ứng dụng: đăng nhập và đăng xuất, tài khoản, trang chủ và luồng đặt hàng. Sau đó, thêm một designer cùng mình làm giai đoạn go-live cho thị trường Nhật Bản, khi nhóm cần xử lý thêm hình ảnh cho cơ sở dữ liệu thực đơn và thiết kế lại trang thực đơn cho thị trường này.

Quy trình thiết kế

Bước 01

Tìm hiểu branding guideline FCDS

Một guideline gần với branding hơn là thiết kế web.

Bước 02

Xây dựng user flow & wireframe

Để tập trung vào trải nghiệm người dùng.

Bước 03

Thiết kế UI

Rồi gửi cho PM để chạy A/B testing.

Bước 04

Tạo design system

Một hệ thống phù hợp với sản phẩm số.

Bước 05

Lấy phản hồi từ stakeholder

Những người quyết định mục tiêu của từng tính năng.

Branding guideline FCDS & thư viện UI

FCD (Fast Casual Delivery & Carry Out) là mô hình cửa hàng của Pizza Hut chuyên giao hàng và mang đi, cũng là mô hình Pizza Hut dùng để vào thị trường mới. Mô hình này cải thiện trải nghiệm khách hàng bằng công nghệ, ví dụ giao hàng và nhận hàng không tiếp xúc.

Nhiệm vụ của nhóm là đưa sản phẩm ra thị trường đúng theo FCDS Style Guideline do nhóm ở Anh xây dựng.

Nhóm đã xây dựng gì?

Nhóm ở Anh xây dựng web app làm mẫu cho các thị trường khác. Với từng thị trường, Project Manager thu thập yêu cầu trực tiếp từ thị trường đó và làm các tính năng tương đương bản web của Anh, điều chỉnh theo khác biệt địa phương, nhất là ở cách nhận hàng và thực đơn. Cùng lúc đó, nhóm triển khai thiết kế cho mobile app.

  • Sản phẩm: website thương mại điện tử và mobile app
  • Nền tảng: website, Android và iOS
  • Thị trường: Anh, Mỹ, Malaysia, Indonesia, Singapore, Nhật Bản, Philippines, Thái Lan, Kuwait, New Zealand và nhiều nơi khác

Module & luồng chính

  • Marketing: landing page theo sự kiện và mùa
  • Đặt hàng: cách nhận hàng (giao tận nơi, mang đi, ăn tại chỗ), danh mục thực đơn, tùy chỉnh món (pizza, combo), giỏ hàng, thanh toán, theo dõi đơn
  • Tài khoản: tạo và quản lý tài khoản qua Facebook, Google hoặc email
  • Thành viên: điểm, coupon và voucher theo tài khoản, lịch sử đơn hàng
  • Phương thức thanh toán

User Flow & Wireframe

User flow bao trọn hành trình: màn hình chờ, khách vãng lai hoặc đăng nhập, chọn giao tận nơi hay đến lấy, tìm cửa hàng, hẹn giờ đặt, thực đơn với pizza nửa nọ nửa kia, giỏ hàng với coupon, thanh toán và xác nhận đơn.

Thêm màn hình

Bài học rút ra

Dù cùng một sản phẩm, mỗi quốc gia lại khác nhau về UX, ngôn ngữ, văn hóa, vị trí địa lý và nhiều thứ khác. Khi làm sản phẩm thương mại điện tử, cần cân nhắc thật kỹ cách tiếp cận người dùng và khuyến khích họ tương tác.

UI & Graphic Design · 2016 – 2017

Pizza Hut – Hệ thống ứng dụng vận hành

Bộ ứng dụng nhà hàng kết nối với nhau cho Pizza Hut Indonesia: Kitchen Display, POS, Dine-in và Driver, trên tablet và mobile.

Công ty
Glite, TP.HCM
Thời gian
2016 – 2017
Vai trò
UX/UI Designer
Nền tảng
Tablet + Mobile
Thị trường
Indonesia

Tổng quan

Một hệ thống hoàn chỉnh hỗ trợ vận hành hằng ngày của chuỗi nhà hàng: Kitchen Display System (KDS), POS, Dine-in App và Driver App, cho Pizza Hut tại Indonesia. Hệ thống được thiết kế cho tablet và mobile, với bố cục responsive và giao diện dễ chạm. Mình làm việc với developer để đảm bảo các tính năng real-time và việc trao đổi giữa các ứng dụng là khả thi.

Mình là UX/UI designer, làm việc cùng Product Owner Neeraj Kumar.

Quy trình thiết kế

Bước 01

Research

Phỏng vấn nhân viên nhà hàng và phân tích các quy trình làm tay hiện có.

Bước 02

Ideation

Tạo user flow và wireframe cho từng ứng dụng, tập trung vào giao diện dễ hiểu và kết nối liền mạch.

Bước 03

Iterative design

Làm prototype hi-fi và tinh chỉnh qua phản hồi của stakeholder và usability test với người dùng thật.

Bước 04

Phản hồi

Cập nhật user flow khi có phản hồi từ khách hàng.

Bước 05

Go-live

Đưa sản phẩm ra thị trường và thu thập phản hồi từ thu ngân khi dùng thật, làm nền cho các cải tiến sau.

Insight chính

Insight 01

Ghi đơn bằng tay và trao đổi với bếp tốn thời gian, dễ sai sót.

Insight 02

Một hệ thống real-time thống nhất có thể cải thiện rõ rệt hiệu quả và trải nghiệm khách hàng.

Insight 03

Mỗi nhóm người dùng (thu ngân, nhân viên bếp, khách ăn tại chỗ, tài xế) có nhu cầu và pain point riêng.

Wireframe low-fidelity

Wireframe cho thị trường Indonesia, bắt đầu từ POS.

Giải quyết vấn đề

Thách thứcGiải pháp
Thiết kế một hệ thống liền mạch trên nhiều thiết bị (tablet và điện thoại)Một ngôn ngữ thiết kế nhất quán cho mọi ứng dụng, để ứng dụng nào cũng quen thuộc
Làm giao diện dễ hiểu cho người dùng có mức độ quen công nghệ rất khác nhauMàn hình đơn giản, tập trung vào tác vụ, phân cấp thị giác rõ ràng
Giữ mọi ứng dụng đồng bộ real-timeLàm việc với đội backend để dòng dữ liệu real-time chạy trơn tru

Persona

Thu ngân · 24 tuổi · 1 năm ở Pizza Hut

Kartika

Mỗi khi khách hỏi về chiếc pizza của họ, Kartika phải gọi to vào bếp và đọc số đơn. Cả ngày cô phải theo dõi bếp và trao đổi với tài xế về các đơn giao hàng. Mục tiêu của cô: bớt trao đổi không cần thiết, kiểm tra thông tin nhanh, và chuyển thông tin chỉ bằng một thao tác.

Đầu bếp · 32 tuổi · 4 năm ở Pizza Hut Jakarta

Ahmad

Ahmad làm việc dưới áp lực để mọi đơn ra đúng giờ, đúng chất lượng và đúng thứ tự ưu tiên. Anh đọc từng đơn trên mẩu giấy in nhỏ xíu và đánh dấu bằng tay. Mục tiêu của anh: bớt việc làm tay, kiểm tra thông tin dễ dàng, và đánh dấu món đã xong chỉ bằng một chạm.

Thêm màn hình

Bài học rút ra

Dự án này thử thách khả năng của mình trong việc xây dựng các hệ thống phức tạp, liên kết với nhau, cân bằng nhu cầu người dùng và mục tiêu kinh doanh. Dự án cũng cho thấy điều kiện thị trường và mục tiêu công ty ảnh hưởng thế nào đến sản phẩm: chỉ POS và KDS được ra mắt. Driver App và Dine-in App không được phát triển vì giới hạn ngân sách, và tại Indonesia đã có một ứng dụng tài xế khác ra mắt và được quảng bá mạnh hơn.

  • Nghiên cứu thị trường và đánh giá tính khả thi kinh doanh thật kỹ trước khi phát triển toàn diện
  • Design system cần đủ linh hoạt để theo kịp yêu cầu kinh doanh thay đổi
  • Giữ trao đổi với stakeholder suốt quá trình thiết kế
  • Cân nhắc các giải pháp đã có trên thị trường và khả năng tích hợp với chúng
Zoe phác thảo trên bảng vẽ điện tử, xung quanh là tranh vẽ trên giấy và kệ sách

Về mình

Xin chào, mình là Zoe

Mình là product designer sống ở TP. Hồ Chí Minh, có nền tảng thiết kế truyền thông và rất yêu việc kể chuyện. Trong 6 năm qua, mình đã làm việc với các startup và những công ty lâu năm để tạo ra trải nghiệm số mang cảm giác gần gũi và có ý nghĩa.

Cách làm của mình bắt nguồn từ sự thấu cảm, sự rõ ràng và chú ý đến từng chi tiết. Mình tin rằng thiết kế tốt nhất là thiết kế vô hình — nó dẫn dắt người dùng một cách tự nhiên mà không cần thu hút sự chú ý về phía mình.

Khi không thiết kế, mình thường viết nhật ký, chụp lại những khoảnh khắc yên tĩnh hoặc khám phá quán cà phê mới cùng cuốn sổ vẽ. Mình luôn tò mò về câu chuyện phía sau những đồ vật thường ngày và cảm xúc mà chúng gợi lên.

Khi rảnh, mình hay nghĩ ra ý tưởng cho kịch bản “nếu sau này mình thất nghiệp” và thử những sở thích ít người biết. Mình là mẹ của một cậu con trai nhỏ, một người không ngừng chạy cùng những đợt sóng thay đổi, và là một designer tin vào dữ liệu hơn là phỏng đoán.

Cách mình làm việc

Những giá trị mình không đánh đổi

Nhiều góc nhìn, một cách có chủ đích

Mình luôn cho rằng cách hiểu đầu tiên về một vấn đề là chưa đầy đủ. Trước khi chọn hướng đi, mình nhìn nó từ vị trí của người dùng, của doanh nghiệp và của kỹ sư.

Dữ liệu hơn ý kiến

Mình thích tìm hiểu cách mọi người thực sự hành xử, chứ không phải cách chúng ta nghĩ họ sẽ hành xử. Khi được hỏi về một quyết định, mình tìm bằng chứng thay vì tìm sự đồng thuận chung chung.

Hệ thống, không chỉ màn hình

Mình thích xây một bản thiết kế có thể mở rộng hơn là vá từng căn phòng. Dựng một design system và sitemap vững chắc hôm nay nghĩa là ngày mai có thể ra mắt tính năng mới trong một nửa thời gian.

Cẩn thận trước, tò mò sau

Mình cẩn thận trước khi nhanh. Mình thà hỏi thêm một câu còn hơn ra mắt một giả định sai. Nhưng khi nền móng đã vững, mình sẽ tiếp tục tiến lên.

Kinh nghiệm

Chặng đường đến hôm nay

10/202211/2024

Product Design — FCI SmartCloud & Data Suite

FCI SmartCloud & Data Suite — Tập đoàn FPT, TP. Hồ Chí Minh

Đây là vị trí giúp mình nhận ra rằng phần việc thiết kế quan trọng nhất thường là phần không ai nhìn thấy.

Sản phẩm mang theo cả một lịch sử những quyết định thiếu nhất quán qua nhiều năm. FCI SmartCloud cung cấp dịch vụ IaaS, PaaS và SaaS cho khách hàng doanh nghiệp. Các tính năng được xây bởi những nhóm riêng biệt, component không được dùng chung, và điều hướng phản ánh cách sản phẩm được xây chứ không phải cách mọi người nghĩ về nó. Trên giấy thì mọi thứ vẫn chạy. Nhưng trên thực tế, nó không có cảm giác là một sản phẩm.

Mình không bắt đầu bằng redesign. Mình bắt đầu bằng audit — lập bản đồ từng màn hình, từng luồng, từng component trong sản phẩm đang chạy trước khi làm bất cứ điều gì. Ngay từ đầu dự án, mình đảm bảo mọi lựa chọn đều dựa trên những gì thực sự đang có, chứ không phải những gì tài liệu nói.

Song song với SmartCloud, mình dẫn dắt thiết kế cho Data Suite – một nền tảng doanh nghiệp hỗ trợ ra quyết định dựa trên dữ liệu. Sản phẩm dữ liệu có một rủi ro thiết kế riêng: thứ gì cũng quan trọng với một ai đó, nhưng thiếu thứ bậc thị giác rõ ràng và ngôn ngữ thiết kế chung thì dashboard chỉ là tiếng ồn. Mình xem design system là điều quan trọng nhất cần đạt được. Khi ngôn ngữ hình ảnh cho dữ liệu đã đúng một lần, mọi biểu đồ, báo cáo và tính năng mới sẽ dễ được tin tưởng hơn.

Làm cùng lúc hai nền tảng cho mình một trải nghiệm đặc biệt: xây design system cho hai sản phẩm khác nhau cùng lúc, dung hòa các ràng buộc của chúng, và tạo ra những thứ tồn tại lâu hơn thời gian mình ở trong đội. Giờ đây, đó là tiêu chuẩn của mình. Không chỉ giao màn hình, mà để lại một nền tảng cho người đến sau tiếp tục xây.

  • Tư duy hệ thống
  • Kiến trúc design system
  • Kiến trúc thông tin
  • Doanh nghiệp
  • UX
  • Trực quan hóa dữ liệu
  • Làm chủ end-to-end
  • Thiết kế ứng dụng mobile

7/20183/2022

UX/UI Design

Pizza Hut Digital Ventures — YUM! Brands, TP. Hồ Chí Minh

Đây là lúc mình ngừng nghĩ về từng màn hình và bắt đầu nghĩ về hệ thống.

Pizza Hut Digital Ventures không phải một agency, mà là một đội sản phẩm in-house thuộc một trong những doanh nghiệp F&B hàng đầu thế giới, với nhiệm vụ thiết kế và mở rộng các giải pháp số khắp khu vực châu Á. Áp lực ở đây khác hẳn: quyết định có tác động thật ở quy mô lớn, và “để sau sửa” không phải là một lựa chọn khi một luồng đặt hàng bị lỗi ảnh hưởng đến hàng nghìn giao dịch mỗi ngày.

Mình tập trung vào Master App – một hệ thống đặt hàng phải hoạt động ở những thị trường có hành vi người dùng khá khác nhau. Điều trông đơn giản trên giấy trở nên rất phức tạp khi tiêu chuẩn thanh toán, niềm tin vào việc giao hàng, thói quen chờ đợi và cả cách tương tác với màn hình đều khác nhau giữa các quốc gia. Mình dành thời gian để hiểu những khác biệt đó nhiều ngang với thời gian thiết kế xoay quanh chúng – vì một trải nghiệm chung giữa các thị trường phải nhất quán về kết quả, chứ không chỉ về bố cục hình ảnh.

Khoảng thời gian này cho mình hai bản năng mà mình mang vào mọi dự án. Thứ nhất, nghiên cứu người dùng không phải là một giai đoạn làm xong là thôi, mà là một bước kiểm tra cần lặp lại, kể cả khi mình tin là đã biết câu trả lời. Thứ hai, thiết kế đa thị trường tốt nhất không phải là sự thỏa hiệp giữa các nhu cầu địa phương, mà là một hệ thống đủ linh hoạt để thị trường nào cũng thấy như nó được làm riêng cho mình.

  • UX Research
  • Phân tích hành vi người dùng
  • Product design đa thị trường
  • Nghiên cứu liên tục
  • Kết quả hơn bố cục
  • Quyết định dựa trên dữ liệu

4/20167/2018

UI & Graphic Design

Glite, TP. Hồ Chí Minh

Công việc thiết kế chuyên nghiệp đầu tiên của mình – và là nơi mình học cách làm nhanh mà không làm ẩu. Trong môi trường outsource phục vụ nhiều khách hàng F&B cùng lúc, mình học cách chuyển đổi ngữ cảnh thật nhanh, nắm được nhu cầu khách hàng từ những brief ngắn, và giao những sản phẩm đứng vững qua các giai đoạn phát triển, UAT và go-live mà không phải sửa đổi liên tục.

Dự án chính là bộ ứng dụng Pizza Hut – POS, KDS, Dine-In và Driver App – cho ba thị trường châu Á: Indonesia, Malaysia và Singapore. Mình học được điều này từ sớm khi thiết kế cho những thị trường đó, và đến giờ vẫn là một thói quen: đừng chờ đợi chỉ một kiểu người dùng, đừng giả định chỉ một bối cảnh sử dụng.

Làm việc với nhiều lĩnh vực trong thời gian ngắn đã nén những gì cần nhiều năm vào vài tháng: mình mang theo một ngôn ngữ hình ảnh đa ngành, con mắt nhạy bén với quy trình hiệu quả, và sự tôn trọng sâu sắc với cách các quyết định thiết kế tác động đến kỹ thuật và kết quả kinh doanh.

  • UI Design
  • Graphic Design
  • Hiểu biết đa thị trường
  • Lặp nhanh
  • Quản lý nhiều khách hàng
  • Phối hợp Dev & UAT

1/20122/2016

Quản trị khách sạn – nhà hàng

TP.HCM, Mũi Né & Phú Quốc

Trước khi làm sản phẩm số, mình thiết kế trải nghiệm cho con người. Mình học các kỹ năng vận hành, sales & marketing và đào tạo tại các khách sạn, resort ở ba địa điểm — những điều đã định hình cách mình làm product design hôm nay.

Vận hành bộ phận tiền sảnh là một khóa học cấp tốc về đọc hiểu con người – nhận ra khách cần gì trước khi họ hỏi, xử lý êm mọi vấn đề khi chúng xuất hiện, xây dựng những quy trình phục vụ chịu được áp lực. Tư duy hệ thống đến từ việc đào tạo nhân sự ở nhiều nơi: một quy trình tốt phải đủ dễ để ai cũng làm theo được, đủ nhất quán để khách cảm nhận ở mọi nơi, và đủ linh hoạt để xử lý khéo léo những tình huống bất ngờ.

Từ kinh nghiệm sales và marketing, mình hiểu điều gì thúc đẩy từng kiểu người và cách mang lại giá trị mà không khiến họ choáng ngợp. Đó cũng là những bản năng mình áp dụng hôm nay vào kiến trúc thông tin, luồng onboarding và thiết kế lấy người dùng làm trung tâm.

Làm dịch vụ, mình sớm nhận ra rằng trải nghiệm tốt nhất là trải nghiệm vô hình – khách chỉ để ý khi có điều gì đó không ổn.

  • Đọc hiểu con người
  • Thiết kế quy trình phục vụ
  • Quản lý vận hành
  • Đào tạo nhân sự
  • Xử lý vấn đề tức thời
  • Lấy khách hàng làm trung tâm

Học vấn

Mình đã đến đây như thế nào

Đại học HUFLIT

Cử nhân Biên – Phiên dịch

Nền tảng dạy mình nhìn mọi vấn đề giao tiếp từ cả hai phía — ý định của người gửi và cách hiểu của người nhận.

Trung tâm Đa phương tiện ARENA

Chứng chỉ Thiết kế thương hiệu, Thiết kế web, Dựng phim & Dựng hình nhân vật 3D

Được đào tạo thiết kế và sản xuất đa lĩnh vực, gồm Graphic & Branding Design, Web Design, làm phim & dựng video, nhiếp ảnh và dựng hình 3D (Autodesk Maya).

YOUIX — Đào tạo Thiết kế & Công nghệ

Chứng chỉ UI Global Style, UX Component, Advanced UI/UX

Chuyên sâu về design system, chiến lược product design toàn diện và các best practice UI/UX.

Coursera

Chứng chỉ Google UX

Nơi mình học cách đặt người dùng lên hàng đầu — từ nghiên cứu, dựng wireframe đến làm prototype và kiểm thử những thiết kế giải quyết vấn đề thật bằng sự thấu cảm và rõ ràng.

Hành trang

Những gì mình mang đến cho một đội

Cách làm việc

  • Quản lý thời gian
  • Tư duy phản biện
  • Prototyping
  • Thấu cảm người dùng
  • Product Design
  • Giải quyết vấn đề
  • Kiến trúc thông tin
  • Tư duy phát triển
  • Tiếp cận đa góc nhìn
  • Thiết kế không định kiến
  • Tư duy mở rộng
  • Con người là trên hết
  • Nhanh mà không đi tắt

Công cụ

  • Figma
  • Sketch
  • Zeplin
  • Miro
  • Jira
  • Monday
  • Adobe Suite
  • Invision
  • Canva

Khóa học thiết kế

Học cách nhìn như một designer

Các lớp học online về màu sắc, bố cục và thiết kế — từ bánh xe màu đầu tiên đến hệ thống lưới và màn hình mobile dễ tiếp cận. Mỗi buổi học kết hợp thực hành với từ vựng thiết kế thật và kết thúc bằng một dự án nhỏ.

Các vòng tròn đỏ, vàng, xanh dương chồng lên nhau thành màu mới, bên cạnh một bập bênh hình khối cân bằng

8–14 tuổi · 2 cấp độ · Online

Màu sắc, hình khối & câu chuyện hình ảnh

Hai cấp độ theo độ tuổi. Các bạn 8–10 tuổi pha màu, chơi với sự cân bằng và thiết kế poster cho một thú cưng tưởng tượng. Các bạn 11–14 tuổi học tiếp về phối màu, thứ bậc thị giác và quy tắc một phần ba, kết thúc bằng một poster phim.

  • Pha màu
  • Nóng & lạnh
  • Cân bằng
  • Thứ bậc thị giác
  • Quy tắc một phần ba
Xem khóa học
Lưới 12 cột phía sau mockup điện thoại và nhãn tỷ lệ tương phản

15 tuổi – Người lớn · 1 cấp độ · Online

Hệ thống & nguyên tắc chuyên nghiệp

Tâm lý học màu sắc, độ tương phản và khả năng tiếp cận, lưới 12 cột và các nguyên tắc Gestalt — áp dụng vào một thử thách UX/UI thật: thiết kế một màn hình ứng dụng mobile.

  • Tâm lý học màu sắc
  • Khả năng tiếp cận
  • Hệ thống lưới
  • Gestalt
  • UX/UI
Xem khóa học

Cách các buổi học diễn ra

Cùng một nhịp, ở mọi cấp độ

Màu sắc, rồi bố cục, rồi một dự án

Mỗi buổi học gồm ba phần: 45 phút về màu sắc, 45 phút về bố cục và thiết kế, và 30 phút để kết hợp cả hai vào một dự án nhỏ.

Học qua thực hành

Học viên pha, cắt, gấp, chụp ảnh và thiết kế. Lý thuyết đến qua hoạt động, chứ không đến trước hoạt động.

Từ vựng thiết kế thật

Mỗi cấp độ có danh sách từ vựng riêng, để học viên gọi được tên những gì mình nhìn thấy — từ “nóng và lạnh” đến “tỷ lệ tương phản”.

Màu sắc45 phút
Bố cục & thiết kế45 phút
Dự án30 phút

Một buổi học · 120 phút

Khóa học thiết kế · 8–14 tuổi

Màu sắc, hình khối & câu chuyện hình ảnh

Hai cấp độ theo độ tuổi, biến việc pha màu, cân bằng và bố cục thành những thứ các bạn nhỏ có thể tự tay làm ra.

Độ tuổi
8–10 và 11–14
Hình thức
Online, trực tiếp
Buổi học
120 phút
Cấp độ
2
Dự án cuối khóa
Poster thú cưng · Poster phim
Các vòng tròn màu cơ bản chồng lên nhau, một bập bênh cân bằng và các hình đối xứng

Tổng quan

Cấp độ 1 xây nền tảng: màu sắc pha trộn ra sao, cảm xúc mà màu sắc mang lại, và sự cân bằng thị giác đơn giản — tất cả qua các hoạt động vui và thực hành.

Cấp độ 2 mang đến từ vựng thiết kế thật, các cách phối màu và cấu trúc bố cục — thứ bậc thị giác và lưới — được dùng hằng ngày trong truyền thông số.

Một hình nhỏ mà sáng màu có thể cân bằng một hình lớn mà màu trầm. Ý tưởng đó, được khám phá bằng giấy và hồ dán, là khởi đầu của mọi quyết định bố cục.

Dành cho ai

Cấp độ 1 · 8–10 tuổi

Phép màu của màu sắc và hình khối

Dành cho các bạn nhỏ lần đầu làm quen với thiết kế. Không cần kinh nghiệm — chỉ cần sự tò mò và thứ gì đó để tô vẽ.

Cấp độ 2 · 11–14 tuổi

Nền móng của giao tiếp bằng hình ảnh

Dành cho các bạn lớn hơn, sẵn sàng với từ ngữ thiết kế chính thức và công cụ của truyền thông số: bảng màu, lưới ảnh và các ứng dụng thiết kế đơn giản.

Các bạn sẽ học gì

  • Gọi tên màu cơ bản và màu thứ cấp, và pha màu này từ màu kia
  • Dùng màu nóng và màu lạnh để tạo cảm xúc cho bức tranh
  • Làm cho trang giấy cân bằng, với bố cục đối xứng và bất đối xứng
  • Mô tả màu bằng sắc độ, độ bão hòa và độ sáng, và chọn cách phối màu bổ túc hoặc tương đồng
  • Dùng thứ bậc thị giác và quy tắc một phần ba để điều quan trọng nhất được nhìn thấy đầu tiên

Kế hoạch buổi học

Mỗi cấp độ là một buổi học 2 tiếng gồm ba phần. Chọn một cấp độ để xem kế hoạch.

Cấp độ 1 · 8–10 tuổi

Phép màu của màu sắc và hình khối

Khám phá cách pha màu, cảm xúc mà màu sắc mang lại và sự cân bằng thị giác đơn giản qua trò chơi.

Màu sắc45 phút
Bố cục & thiết kế45 phút
Dự án30 phút

Một buổi học · 120 phút

Bảng màu

45 phút

Màu cơ bản & thứ cấp, nóng & lạnh

Các bạn sẽ học được

  • Gọi tên các màu cơ bản: đỏ, vàng và xanh dương.
  • Pha các màu thứ cấp: cam, xanh lá và tím.
  • Phân biệt màu nóng (vui vẻ, năng động) với màu lạnh (êm dịu, bình yên).

Hoạt động

  1. Nồi súp bánh xe màu. Pha màu nước hoặc đất nặn chỉ từ ba màu cơ bản, và khám phá ra các màu thứ cấp trên đường đi.
  2. Vẽ cảm xúc. Vẽ Mặt Trời và Mặt Trăng — chỉ dùng màu nóng cho Mặt Trời, chỉ dùng màu lạnh cho Mặt Trăng — để thể hiện cảm giác của mỗi bên.

Bố cục & thiết kế

45 phút

Cân bằng & đối xứng (giống nhau và khác nhau)

Các bạn sẽ học được

  • Hiểu rằng cân bằng là điều khiến một bức tranh trông “đúng”.
  • Phân biệt bố cục đối xứng (như soi gương) với bố cục bất đối xứng — không đều nhưng vẫn cân bằng.

Hoạt động

  1. Trò chơi cân bằng hình khối. Sắp xếp các mảnh giấy cắt sẵn cho đến khi trang giấy cân bằng — và nhận ra rằng một hình nhỏ sáng màu có thể cân bằng một hình lớn màu trầm.
  2. Thử thách đối xứng. Gấp đôi tờ giấy, vẽ một nửa khuôn mặt hoặc đồ vật, rồi đồ lại nửa còn lại để có hình đối xứng hoàn hảo.

Ứng dụng

30 phút

Dự án “Thiết kế thú cưng của bạn”

Các bạn sẽ học được

  • Dùng màu nóng hoặc màu lạnh để tạo không khí cho thiết kế.
  • Sắp xếp mắt, mũi và phụ kiện thành một khuôn mặt cân đối ở chính giữa.

Hoạt động

  1. Poster cuối buổi. Thiết kế poster cho một thú cưng tưởng tượng. Dữ dằn và nhanh nhẹn? Dùng màu nóng, rực rỡ. Buồn ngủ và hiền lành? Dùng màu lạnh, pastel. Chân dung nằm ở chính giữa.

Cấp độ 2 · 11–14 tuổi

Nền móng của giao tiếp bằng hình ảnh

Học từ vựng thiết kế chính thức, các cách phối màu cơ bản và cấu trúc bố cục dùng trong truyền thông số.

Màu sắc45 phút
Bố cục & thiết kế45 phút
Dự án30 phút

Một buổi học · 120 phút

Bảng màu

45 phút

Phối màu: bổ túc & tương đồng

Các bạn sẽ học được

  • Định nghĩa sắc độ, độ bão hòa và độ sáng (sáng và tối).
  • Chọn và dùng cách phối màu bổ túc (tương phản cao) và tương đồng (hài hòa).

Hoạt động

  1. Khám phá màu sắc trên máy. Dùng công cụ tạo bảng màu online để tìm các cặp màu bổ túc và tương đồng trên bánh xe màu.
  2. Cảm xúc của màu sắc. Xem các logo và poster phim thật, gọi tên cách phối màu của từng cái và cảm xúc nó tạo ra, rồi so sánh màu rực rỡ với màu đã giảm độ bão hòa.

Bố cục & thiết kế

45 phút

Thứ bậc thị giác & quy tắc một phần ba

Các bạn sẽ học được

  • Quyết định yếu tố nào quan trọng nhất và làm cho nó trông như vậy (thứ bậc thị giác).
  • Đặt điểm nhấn theo quy tắc một phần ba để bố cục sinh động hơn.

Hoạt động

  1. Bài tập tờ báo. Thiết kế lại một mẩu truyện ngắn hoặc quảng cáo để một câu được chọn nổi bật lên, chỉ dùng kích thước, màu sắc và độ đậm của chữ.
  2. Chụp ảnh theo quy tắc một phần ba. Bật lưới trong ứng dụng chụp ảnh và chụp với chủ thể nằm trên các đường kẻ hoặc tại giao điểm.

Ứng dụng

30 phút

Thử thách poster phim

Các bạn sẽ học được

  • Thiết kế poster theo một cách phối màu được giao — ví dụ cặp bổ túc xanh lá và hồng cánh sen.
  • Dùng quy tắc một phần ba cho hình ảnh chính và thứ bậc thị giác để tên phim được nhìn thấy đầu tiên.

Hoạt động

  1. Làm poster. Phác thảo poster trên giấy hoặc dựng trên máy, rồi cùng nhau nhận xét: Không khí có rõ không? Tên phim có nổi bật không? Hình ảnh chính đã được đặt đúng chỗ chưa?

Từ vựng chính

Cấp độ 1

  • Màu cơ bản
  • Màu thứ cấp
  • Màu nóng
  • Màu lạnh
  • Cân bằng
  • Đối xứng
  • Chính giữa

Cấp độ 2

  • Sắc độ (Hue)
  • Độ bão hòa (Saturation)
  • Độ sáng (Value)
  • Bổ túc
  • Tương đồng
  • Thứ bậc thị giác
  • Điểm nhấn
  • Quy tắc một phần ba

Chuẩn bị ở nhà

Lớp học diễn ra online, nên một vài dụng cụ đơn giản ở nhà sẽ giúp các hoạt động diễn ra trọn vẹn.

Cấp độ 1

Màu nước hoặc đất nặn đỏ, vàng, xanh dương · cọ vẽ · giấy thường và giấy vẽ khổ lớn · bút chì màu, bút lông màu, bút sáp · giấy màu, hồ dán, kéo.

Cấp độ 2

Máy tính hoặc máy tính bảng có internet · camera điện thoại hoặc máy tính bảng có lưới · giấy vẽ và thước kẻ · không bắt buộc: Canva hoặc Figma.

Hỏi về lớp học tiếp theo

Cho mình biết tuổi của bé, mình sẽ gợi ý cấp độ phù hợp.

Liên hệ với mình

Khóa học thiết kế · 15 tuổi – Người lớn

Hệ thống & nguyên tắc chuyên nghiệp

Những tiêu chuẩn mà designer chuyên nghiệp dựa vào — tâm lý học màu sắc, khả năng tiếp cận, lưới và Gestalt — áp dụng vào một bài toán UX/UI thật.

Độ tuổi
Từ 15 tuổi đến người lớn
Hình thức
Online, trực tiếp
Buổi học
120 phút
Trọng tâm
UX/UI
Dự án cuối khóa
Màn hình ứng dụng mobile
Lưới 12 cột với mockup điện thoại, nhãn tỷ lệ tương phản và các hình được nhóm lại

Tổng quan

Khóa học khám phá các tiêu chuẩn thiết kế chuyên nghiệp: hệ thống lưới, tâm lý học màu sắc và khả năng tiếp cận, cùng cách dùng lý thuyết thiết kế để giải những bài toán giao tiếp phức tạp.

Mọi thứ dẫn đến một kết quả thực tế — một màn hình ứng dụng mobile mà mỗi lựa chọn về màu sắc, căn chỉnh và điểm nhấn đều có lý do.

Đẹp không phải là mục tiêu. Một màn hình mà bảng màu hợp với thương hiệu, mọi thứ nằm trên lưới, và ánh mắt dừng lại ở hành động chính — đó mới là mục tiêu.

Dành cho ai

Các bạn từ 15 tuổi và người lớn muốn tìm hiểu phần chuyên nghiệp của thiết kế — lý do phía sau lưới, màu sắc và độ tương phản — và muốn áp dụng chúng vào giao diện thật.

Bạn sẽ học gì

  • Hiểu tâm lý phía sau màu thương hiệu và chọn bảng màu cho một nhóm đối tượng
  • Phân biệt RGB với CMYK và biết công việc nào cần hệ màu nào
  • Kiểm tra tỷ lệ tương phản để chữ luôn dễ đọc với mọi người
  • Dàn trang nội dung trên lưới 12 cột với khoảng gutter nhất quán
  • Nhóm thông tin bằng nguyên tắc gần nhau, tương đồng và khép kín
  • Dùng thứ bậc thị giác để dẫn ánh mắt đến hành động chính

Kế hoạch buổi học

Một buổi học 2 tiếng gồm ba phần.

Màu sắc45 phút
Bố cục & thiết kế45 phút
Dự án30 phút

Một buổi học · 120 phút

Bảng màu

45 phút

Tâm lý học màu sắc, hệ màu & khả năng tiếp cận

Các bạn sẽ học được

  • Giải thích ý nghĩa của các màu chính — đỏ cho nguy hiểm hoặc đam mê, xanh dương cho sự tin cậy và bình tĩnh.
  • Biết khi nào làm việc với RGB (màn hình) và khi nào với CMYK (in ấn).
  • Kiểm tra chữ so với nền bằng tỷ lệ tương phản.

Hoạt động

  1. Phân tích màu thương hiệu. So sánh bảng màu của ngân hàng, chuỗi đồ ăn nhanh và tổ chức môi trường, và tìm ra lý do mỗi bên chọn màu như vậy cho đối tượng của mình.
  2. Kiểm tra tương phản. Thử các cặp chữ và nền trên công cụ kiểm tra tương phản online và quyết định cặp nào đạt tiêu chuẩn tiếp cận cơ bản.

Bố cục & thiết kế

45 phút

Hệ thống lưới & nguyên tắc Gestalt

Các bạn sẽ học được

  • Dựng bố cục trên cột và gutter.
  • Nhóm thông tin bằng các nguyên tắc Gestalt: gần nhau, tương đồng và khép kín.

Hoạt động

  1. Thực hành dàn lưới. Sắp xếp 12 khối không liên quan — tiêu đề, đoạn văn, hình ảnh — trên lưới 12 cột, dùng gutter để tạo khoảng cách, như một trang tạp chí hoặc một trang web đơn giản.
  2. Áp dụng Gestalt. Xem các logo và giao diện được xây trên nguyên tắc Gestalt, như nguyên tắc khép kín trong logo FedEx, rồi nhóm lại 12 khối của bạn bằng nguyên tắc gần nhau và tương đồng.

Ứng dụng

30 phút

Thiết kế một màn hình ứng dụng mobile

Các bạn sẽ học được

  • Áp dụng mọi nguyên tắc vào một màn hình mobile vừa dùng tốt vừa đẹp.

Hoạt động

  1. Thử thách UX/UI. Thiết kế màn hình đăng nhập, cài đặt hoặc chi tiết sản phẩm: chọn bảng màu dựa trên tâm lý thương hiệu, căn mọi thứ theo lưới, và dùng thứ bậc thị giác để dẫn ánh mắt đến nút hành động chính.

Từ vựng chính

  • RGB
  • CMYK
  • Tâm lý học màu sắc
  • Tỷ lệ tương phản
  • Hệ thống lưới
  • Cột (Column)
  • Khoảng cách cột (Gutter)
  • Gestalt
  • Gần nhau (Proximity)
  • Khép kín (Closure)
  • Tương đồng (Similarity)
  • Thứ bậc thị giác

Công cụ

Một máy tính có Figma (bản miễn phí là đủ), Sketch hoặc InDesign, công cụ kiểm tra tương phản online, và giấy kẻ ô nếu bạn thích phác thảo trước.

Tham gia lớp tiếp theo

Gửi mình đôi dòng về bạn và điều bạn muốn thiết kế.

Liên hệ với mình

Nhật ký thiết kế

Một góc nhỏ cho thiết kế, làm đồ thủ công và những điều mình để ý

Những ghi chép ngắn về product design, vẽ tranh, đan móc và những người bạn bốn chân sống cùng mình.

31/10/2026 · 4 phút đọc · Cá nhân & Đồ handmade

Đan móc và nghệ thuật bắt đầu lại

Có một kiểu kiên nhẫn rất riêng mà việc đan móc dạy cho mình. Khi một mũi móc bị sai, mình có thể giả vờ như không nhận ra và tiếp tục làm.

Đọc bài

Nhật ký thiết kế · Số 01

Thiết kế tốt luôn dành chỗ cho những khoảng thở

19/10/2026 4 phút đọcUX & Thiết kế sản phẩm

Trước đây, mình từng nghĩ thiết kế tốt là thiết kế mà mọi chi tiết đều có mục đích, mọi khoảng trống đều được lấp đầy và mỗi tương tác đều phải có gì đó thú vị. Nhưng càng làm nghề, mình càng trân trọng điều ngược lại: đôi khi, điều tốt nhất mình có thể làm cho một thiết kế là lược bỏ một thứ gì đó.

Khoảng trắng giúp nội dung được thở. Một giao diện yên tĩnh giúp người dùng tập trung vào điều quan trọng thay vì phải xử lý quá nhiều thông tin cùng lúc. Mình nghĩ việc thiết kế cũng giống như đón khách ở nhà — tạo cảm giác thoải mái mà không cần liên tục tìm cách thu hút sự chú ý của họ.

Gần đây, trước khi thêm bất cứ thứ gì mới, mình thường tự hỏi: Điều này thực sự giúp trải nghiệm tốt hơn, hay chỉ khiến màn hình trở nên bận rộn hơn?

Nhật ký thiết kế · Số 02

Một cuộn len và buổi tối thật yên

21/10/2026 3 phút đọcCá nhân & Đồ handmade

Có điều gì đó rất dễ chịu ở việc đan móc mà mình không biết phải giải thích thế nào. Chỉ cần một cuộn len, một chiếc kim móc và một mẫu hướng dẫn là mình đã có thể biến một buổi tối bình thường thành khoảng thời gian chậm rãi hơn.

Khác với công việc UI/UX Designer, không có stakeholder nào đang chờ prototype, cũng chẳng có deadline yêu cầu mình chỉnh sửa một chiếc button. Mình có thể tháo cả một hàng móc chỉ vì cảm thấy nó chưa đúng ý. Mình có thể làm lại từ đầu mà không cần viết một lời giải thích nào.

Có lẽ đó là lý do mình thích làm những thứ bằng đôi tay của mình. Nó nhắc mình rằng không phải mọi thứ đều cần được tối ưu hóa. Có những việc đáng làm đơn giản vì chính quá trình thực hiện đã khiến mình vui.

Nhật ký thiết kế · Số 03

Những chi tiết nhỏ khiến trải nghiệm trở nên gần gũi hơn

23/10/2026 5 phút đọcUX & Thiết kế sản phẩm

Khi nói về trải nghiệm người dùng, chúng ta thường nhắc đến user flow, tính dễ sử dụng, accessibility và conversion rate. Tất nhiên, những điều đó rất quan trọng. Nhưng mình tin rằng cảm xúc trong một trải nghiệm thường nằm ở những chi tiết nhỏ hơn nhiều.

Hãy nghĩ đến một biểu mẫu ghi nhớ lựa chọn trước đó của bạn, một thông báo lỗi giải thích cách khắc phục vấn đề, hay một màn hình xác nhận cho biết chính xác điều gì sẽ xảy ra tiếp theo. Những tính năng này không cần phải trông thật ấn tượng. Chúng chỉ đơn giản giúp người dùng bớt cảm thấy lúng túng.

Với mình, UX tốt không phải là khiến người dùng ngưỡng mộ giao diện. Đó là giúp họ cảm thấy mình có thể làm chủ những gì đang thực hiện. Trải nghiệm tốt nhất đôi khi là trải nghiệm mà họ ít để ý đến nhất — bởi mọi thứ đều hoạt động đúng như mong đợi.

Nhật ký thiết kế · Số 04

Học cách quan sát qua từng nét cọ

25/10/2026 3 phút đọcThực hành sáng tạo

Hội họa dạy mình dành thêm thời gian quan sát những điều bình thường. Cái bóng dưới một chiếc cốc, mép lá không hoàn toàn đều, hay cách ánh nắng buổi chiều làm thay đổi màu sắc của bức tường — những chi tiết trước đây mình có thể bỏ qua bỗng trở nên thú vị.

Mình thấy thói quen này hữu ích một cách bất ngờ trong thiết kế. Trước khi quyết định một thứ nên trông như thế nào, mình cố gắng hiểu điều mình thực sự đang nhìn thấy. Chi tiết nào thu hút sự chú ý đầu tiên? Điều gì tạo nên cảm giác cân bằng? Chuyện gì xảy ra khi một màu sắc trở nên dịu đi một chút?

Hội họa và thiết kế giao diện sử dụng những công cụ khác nhau, nhưng cả hai đều yêu cầu mình đưa ra lựa chọn về màu sắc, bố cục, độ tương phản và điểm tập trung. Quan trọng hơn, cả hai nhắc mình rằng quan sát luôn đi trước sáng tạo.

Nhật ký thiết kế · Số 05

Thiết kế không chỉ nằm ở những gì chúng ta thêm vào

27/10/2026 5 phút đọcUX & Thiết kế sản phẩm

Một trong những bài học khó nhất khi làm product design là hiểu rằng nhiều tính năng hơn không đồng nghĩa với nhiều giá trị hơn.

Đội ngũ sản phẩm có thể yêu cầu thêm một bộ lọc, một lối tắt hoặc một khu vực mới trên trang vốn đã chật chội. Xét riêng từng yêu cầu, tất cả đều có thể hợp lý. Nhưng khi mọi thứ đều trở thành ưu tiên, trải nghiệm tổng thể có thể khó hiểu hơn.

Mình học cách dừng lại và đặt ba câu hỏi: Chúng ta đang giải quyết vấn đề gì? Ai đang gặp phải vấn đề này? Và liệu có cách nào đơn giản hơn để giải quyết nó không?

Những giới hạn đôi khi khiến mình khó chịu, đặc biệt khi bố cục không còn nhiều không gian hoặc một yêu cầu tưởng như không thể từ chối. Nhưng giới hạn cũng có thể khuyến khích chúng ta suy nghĩ tốt hơn. Đôi khi, quyết định thiết kế có ý nghĩa nhất không nằm ở thứ chúng ta đưa vào — mà ở thứ chúng ta chọn giữ lại bên ngoài.

Nhật ký thiết kế · Số 06

Những điều thú cưng của mình có lẽ sẽ thay đổi trong thiết kế

29/10/2026 3 phút đọcĐộng vật & Sự đồng cảm

Nếu động vật có thể đánh giá giao diện của chúng ta, mình tự hỏi chúng sẽ nói gì.

Có lẽ chúng sẽ hỏi tại sao button lại nhỏ đến vậy, tại sao chức năng quan trọng bị giấu sau ba lớp menu, hoặc tại sao một thao tác đơn giản lại cần quá nhiều bước. Chắc chúng cũng chẳng mấy quan tâm đến gradient đẹp mắt hay font chữ được lựa chọn kỹ lưỡng của chúng ta.

Động vật có một cách rất đáng yêu để nhắc chúng ta chú ý đến những nhu cầu trước mắt. Thức ăn có dễ tiếp cận không? Chỗ nghỉ có thoải mái không? Chúng có thể khám phá xung quanh mà không cảm thấy bị mắc kẹt không?

Mình nghĩ ở đây có một bài học UX nho nhỏ: trước khi làm một thứ thật ấn tượng, hãy đảm bảo nó thực sự hữu ích với người cần dùng nó. Dù thiết kế cho con người hay chăm sóc động vật, sự đồng cảm bắt đầu khi chúng ta ngừng cho rằng mọi người đều trải nghiệm thế giới giống mình.

Nhật ký thiết kế · Số 07

Đan móc và nghệ thuật bắt đầu lại

31/10/2026 4 phút đọcCá nhân & Đồ handmade

Có một kiểu kiên nhẫn rất riêng mà việc đan móc dạy cho mình. Khi một mũi móc bị sai, mình có thể giả vờ như không nhận ra và tiếp tục làm. Nhưng sớm hay muộn, lỗi đó cũng sẽ xuất hiện trong hình dáng của thành phẩm.

Thế là mình dừng lại. Nhìn kỹ phần vừa làm. Và đôi khi, mình phải tháo nhiều hàng móc chỉ để sửa một chi tiết nhỏ.

Trước đây, mình từng nghĩ bắt đầu lại đồng nghĩa với việc lãng phí công sức. Bây giờ, mình xem đó là một phần của việc tạo ra thứ gì đó bằng sự cẩn thận. Trong thiết kế cũng vậy, phiên bản đầu tiên hiếm khi là phiên bản cuối cùng. Nghiên cứu làm thay đổi những giả định của chúng ta. Testing phát hiện những vấn đề không ngờ tới. Feedback cho chúng ta lý do để suy nghĩ lại.

Bí quyết không phải là tránh mọi sai lầm. Đó là nhận ra chúng đủ sớm, hiểu tại sao chúng xảy ra và đủ kiên nhẫn để làm mọi thứ tốt hơn.

Nhật ký thiết kế · Số 08

Màu sắc là cảm xúc trước khi trở thành một hệ thống

2/11/2026 4 phút đọcThực hành sáng tạo

Là designer, chúng ta thường nói về màu sắc thông qua các hệ thống: bảng màu chính và phụ, màu ngữ nghĩa, tỷ lệ tương phản và nguyên tắc accessibility. Những nền tảng này rất cần thiết, nhưng mối quan hệ cá nhân của mình với màu sắc lại bắt đầu từ một nơi ít kỹ thuật hơn.

Nó bắt đầu từ màu xanh dịu của chậu cây bên cửa sổ, màu kem ấm áp của cuộn len yêu thích, hay sắc hồng trầm xuất hiện trong một bức tranh khi mình vô tình pha hai màu với nhau.

Màu sắc gắn liền với những liên tưởng, nhưng các liên tưởng ấy không giống nhau ở tất cả mọi người. Một màu khiến người này cảm thấy bình yên có thể khiến người khác thấy lạnh lẽo. Văn hóa, ký ức, bối cảnh và những màu sắc xung quanh đều ảnh hưởng đến cách chúng ta cảm nhận.

Đó là lý do mình thích khám phá màu sắc trước khi gán cho nó một vai trò cụ thể. Đôi khi, một bảng màu không bắt đầu từ brand guideline, mà từ cảm giác mình muốn người khác trải nghiệm.

Nhật ký thiết kế · Số 09

Một góc nhỏ dành cho những thứ mình làm thật chậm

4/11/2026 3 phút đọcCá nhân & Đồ handmade

Những thứ mình yêu thích nhất không phải lúc nào cũng là những thứ mình hoàn thành nhanh chóng. Đôi khi, đó là những dự án nhỏ ở bên cạnh mình suốt nhiều tuần: một món đồ móc len còn thiếu hàng cuối, một bức tranh cần thêm một lớp màu, hay một ý tưởng cá nhân mà mình vẫn chưa sẵn sàng chia sẻ.

Mình thích có những sở thích không cần phải trở thành điều gì lớn lao hơn. Không phải bức vẽ nào cũng cần trở thành tranh in. Không phải món đồ handmade nào cũng cần trở thành sản phẩm. Không phải ý tưởng nào cũng cần biến thành một case study trong portfolio.

Là một designer, mình dành rất nhiều thời gian suy nghĩ về kết quả cuối cùng. Những dự án nhỏ này nhắc mình tận hưởng khoảng thời gian ở giữa lúc bắt đầu và hoàn thành — phần chưa hoàn hảo, chưa hoàn tất, nơi sự tò mò vẫn còn không gian để lớn lên.

Nhật ký thiết kế · Số 10

Thiết kế bằng nhiều sự tử tế hơn

6/11/2026 5 phút đọcUX & Thiết kế sản phẩm

Càng làm thiết kế lâu, mình càng tin rằng thiết kế tốt bắt đầu từ việc thực sự chú ý đến con người.

Không chỉ là những người dùng được mô tả trong tài liệu nghiên cứu, mà là những con người thật phía sau các mô tả ấy. Một người đang mệt mỏi sau ngày dài. Một người chưa quen sử dụng công nghệ. Một khách hàng lo lắng vì sợ mắc lỗi. Một đồng nghiệp đang cố giải thích một yêu cầu phức tạp.

Sự tử tế trong thiết kế không có nghĩa là mọi màn hình đều phải dịu dàng hay mọi thông báo đều phải vui vẻ. Đôi khi, đó là việc cung cấp hướng dẫn rõ ràng. Đôi khi, đó là cho phép người dùng sửa lỗi mà không phải bắt đầu lại từ đầu. Và đôi khi, đó là tôn trọng thời gian của họ bằng cách loại bỏ một bước không cần thiết.

Mình muốn tiếp tục học hỏi về khía cạnh kỹ thuật của nghề, nhưng cũng muốn luôn nhớ lý do mình làm công việc này. Mục tiêu không chỉ là khiến sản phẩm số trông đẹp hơn. Đó còn là làm cho những tương tác hằng ngày trở nên dễ dàng, rõ ràng và chu đáo hơn một chút.

Có lẽ đó là kiểu designer mà mình muốn trở thành: một người biết quan sát, biết đặt những câu hỏi tốt hơn và giúp mọi người cảm thấy bớt phiền toái hơn so với trước khi họ sử dụng sản phẩm.

Cùng trò chuyện nhé

Sẵn sàng cho vai trò mới và những bài toán mới cần gỡ rối

Bạn đang xây dựng một sản phẩm cần người cẩn thận với từng chi tiết và tò mò về dữ liệu — mình rất muốn được nghe về nó.

Vì sao chúng ta nên làm việc cùng nhau?

Mình biến những thách thức hệ thống phức tạp thành hành trình người dùng trực quan — kết hợp UX research và thiết kế hình ảnh để xây những hệ thống có thể mở rộng, giúp tiết kiệm thời gian phát triển.

hoặc bạn có thể liên hệ trực tiếp qua