Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh cuộc Cách mạng công nghiệp 4.0 và quá trình chuyển đổi số tại Việt Nam, sự cạnh tranh giữa các doanh nghiệp không chỉ giới hạn ở mô hình cửa hàng truyền thống mà đã mở rộng sang nền tảng số, đặc biệt là các ứng dụng di động và website thương mại điện tử. Người tiêu dùng tại Việt Nam ngày càng hình thành thói quen mua sắm trực tuyến thông qua điện thoại thông minh, với các dữ liệu thực tiễn được ghi nhận:

  • 46% người dùng tại Việt Nam kiểm tra điện thoại trong vòng 5 phút ngay sau khi thức dậy và dành hơn 2 giờ mỗi ngày cho thiết bị di động.
  • 82% người tiêu dùng sẵn sàng cung cấp thông tin cá nhân để nhận các mặt hàng hoặc ưu đãi miễn phí.
  • Phương thức thanh toán khi nhận hàng (COD) vẫn chiếm ưu thế do tâm lý e ngại rủi ro gian lận khi thanh toán trực tuyến.

Foam Market là doanh nghiệp hoạt động lâu năm trong lĩnh vực cung ứng nông sản và thực phẩm do chính đơn vị tự sản xuất. Doanh nghiệp định hình phong cách hiện đại, trẻ trung và theo đuổi sứ mệnh "Nâng tầm bữa ăn Việt". Trước sự cạnh tranh gay gắt từ các sàn thương mại điện tử lớn (Tiki, Shopee, Lazada) và các chuỗi thực phẩm khác, Foam Market đặt ra yêu cầu xây dựng một ứng dụng di động riêng nhằm kết nối trực tiếp với khách hàng, mở rộng thị phần và hỗ trợ người nội trợ giải quyết khó khăn trong việc lên thực đơn hàng ngày.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài được xác định gồm hai nội dung chính:

  1. Nghiên cứu, phân tích hành vi, nhu cầu và các điểm khó khăn (pain points) của khách hàng để xây dựng trải nghiệm người dùng (UX Design) tối ưu.
  2. Thiết kế hệ thống giao diện trực quan (UI Design) đồng bộ, hiện đại cho ứng dụng Foam Market, đáp ứng các mục tiêu kinh doanh (Business Goals) và tầm nhìn chiến lược (Vision Statement) của doanh nghiệp.

Đối tượng nghiên cứu của đồ án là quy trình nghiên cứu trải nghiệm người dùng và thiết kế giao diện ứng dụng di động trong lĩnh vực bán lẻ thực phẩm. Phạm vi nghiên cứu tập trung vào nhóm khách hàng tiềm năng sử dụng điện thoại thông minh tại Việt Nam, các mặt hàng thực phẩm nông nghiệp của Foam Market, được thực hiện trong năm 2020 tại Trường Đại học Bà Rịa – Vũng Tàu.

Cơ sở lý thuyết và phương pháp

Khung lý thuyết và mô hình tiếp cận

Đồ án tiếp cận quy trình thiết kế sản phẩm số dựa trên các nền tảng lý thuyết thiết kế lấy người dùng làm trung tâm (User-Centered Design):

  • Khái niệm UX và UI: UX (User Experience) do Don Norman khởi xướng, bao quát toàn bộ trải nghiệm, tương tác vật lý và cảm xúc của người dùng với hệ thống; UI (User Interface) tập trung vào khía cạnh đồ họa, hình ảnh, kiểu chữ, bố cục và hệ thống chỉ dẫn trực quan.
  • Mô hình bậc thang 6 yếu tố đánh giá UX: Đánh giá sản phẩm qua các tiêu chí Findable (Dễ tìm kiếm), Accessible (Khả năng tiếp cận), Usable (Dễ sử dụng), Desirable (Sự lôi cuốn), Credible (Độ tin cậy), và Useful (Độ hữu dụng).
  • Quy trình thiết kế UX/UI 4 giai đoạn: Gồm Discover (Khám phá), Define (Xác định vấn đề), Ideate (Hình thành ý tưởng), và Design (Thiết kế chi tiết).

Phương pháp nghiên cứu và công cụ thực hiện

Tác giả kết hợp các phương pháp nghiên cứu định tính và định lượng trong thiết kế sản phẩm:

  • Nghiên cứu bối cảnh và tài liệu (Project Prompt / Background Research): Phân tích mô hình hoạt động từ nông trại đến cửa hàng của Foam Market, xác định Vision Statement và Business Goals.
  • Khảo sát người dùng (User Survey): Thực hiện khảo sát trực tuyến qua Google Forms với bảng hỏi gồm 2 phần (thông tin nhân khẩu học và thói quen/nhu cầu mua sắm thực phẩm, thái độ đối với chức năng gợi ý thực đơn) với sự tham gia của hơn 20 người dùng.
  • Phỏng vấn sâu người dùng (User Interview): Tiến hành phỏng vấn trực tiếp 1:1 theo 3 chủ đề chính: Mua sắm trên smartphone, thói quen nấu ăn hàng ngày, và quy trình thanh toán - giao nhận hàng.
  • Kiểm thử trải nghiệm (Usability Testing): Thiết lập 3 kịch bản (Scenarios) và chuỗi nhiệm vụ (Tasks) để đánh giá hành vi người dùng khi duyệt danh mục, tìm kiếm sản phẩm ("Thịt bò") và hoàn tất đơn hàng.
  • Mô hình hóa và cấu trúc hóa UX: Sử dụng sơ đồ mối quan hệ (Affinity Mapping), xây dựng 2 chân dung người dùng mẫu (User Personas), viết câu chuyện người dùng (User Stories), phân loại thẻ (Card Sorting), lập sơ đồ trang (Sitemap), và thiết kế 6 luồng người dùng (User Flow).
  • Công cụ thực hành: Giấy, bút, giấy note (phác thảo ban đầu); phần mềm Miro (phân tích, số hóa dữ liệu khảo sát và vẽ sơ đồ luồng); phần mềm Figma (thiết kế Wireframe, UI Guideline, Master Components và tạo mẫu tương tác).

Nội dung chính theo từng chương

CHƯƠNG 1: TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN

Chương này tổng quan về mặt lý thuyết nền tảng của ngành thiết kế sản phẩm số:

  • Trình bày triết lý thiết kế hướng trải nghiệm của Steve Jobs ("Bắt đầu từ trải nghiệm người dùng rồi mới đến công nghệ" và "Thiết kế là cách sản phẩm hoạt động").
  • Phân tích ví dụ thực tế về UX xấu (ghi phấn lên yên xe máy gây bẩn, khó tẩy xóa) và UX tốt (ứng dụng thẻ từ tại bãi đỗ xe giúp giảm ùn tắc).
  • Làm rõ 4 lợi ích của UX đối với doanh nghiệp: Giảm chi phí tạo ra sản phẩm (tránh việc sửa sai khi đã lập trình), giảm rủi ro khi nâng cấp/thay đổi tính năng, gia tăng doanh thu và nâng cao khả năng tiêu thụ sản phẩm.
  • Phân biệt vai trò, kỹ năng chuyên biệt của UX Designer (nghiên cứu đối thủ, phân tích người dùng, kiểm thử) và UI Designer (nghiên cứu đồ họa, xây dựng style guide, tương tác hình ảnh), cùng sự kết hợp của vai trò UI/UX Designer.
  • Giới thiệu tổng quan quy trình UX chuẩn gồm nhiều công cụ phân tích và thiết lập quy trình thiết kế riêng biệt cho đồ án Foam Market.

CHƯƠNG 2: TÌM HIỂU MỘT SỐ CÔNG CỤ THỰC HÀNH

Chương này mô tả các công cụ được ứng dụng trong suốt quá trình triển khai đồ án:

  • Bút, tẩy, giấy và giấy Note: Đóng vai trò ghi chú nhanh, lưu trữ thông tin phỏng vấn, hỗ trợ phân loại dữ liệu trong phương pháp Affinity Mapping và phác thảo sơ đồ.
  • Miro: Ứng dụng vẽ sơ đồ trực tuyến đa nền tảng, hỗ trợ số hóa thông tin phân tích từ giai đoạn khảo sát, xây dựng bản đồ trải nghiệm và liên kết nhóm làm việc.
  • Figma: Nền tảng thiết kế UI dựa trên nền web và máy tính (Windows/macOS), hỗ trợ quản lý Master Component, chuyển đổi thuộc tính thiết kế sang mã nguồn (CSS, Android, iOS), thiết lập tương tác mẫu (Interaction) và lưu trữ đám mây.

CHƯƠNG 3: DISCOVER – GIAI ĐOẠN KHÁM PHÁ

Giai đoạn này tập trung vào việc thấu hiểu doanh nghiệp và người dùng mục tiêu:

  • Phân tích thông tin dự án Foam Market: Doanh nghiệp có quy trình khép kín từ nông trại đến cửa hàng, phong cách hiện đại; mục tiêu xây dựng ứng dụng nhằm mở rộng thị trường trực tuyến và đồng hành cùng gia đình qua tính năng gợi ý thực đơn.
  • Khảo sát người dùng (User Survey) trên mẫu hơn 20 người qua Google Forms thu thập các dữ liệu nhân khẩu học (giới tính, độ tuổi, nghề nghiệp, tình trạng hôn nhân) và hành vi tiêu dùng (tần suất mua hàng, sự quan tâm về an toàn thực phẩm, mức độ khó khăn khi nghĩ thực đơn mỗi ngày, sự đón nhận với ứng dụng gợi ý món ăn).
  • Phỏng vấn người dùng 1:1 và quan sát kiểm thử hành vi thực tế dựa trên 3 kịch bản: Khám phá sản phẩm theo danh mục "Rau củ & Trái cây", tìm kiếm từ khóa "Thịt bò", và thực hiện chu trình đặt hàng - nhập địa chỉ - chọn phương thức thanh toán.

CHƯƠNG 4: DIFINE – GIAI ĐOẠN XÁC ĐỊNH CÁC VẤN ĐỀ

Chương 4 xử lý nguồn dữ liệu thô từ giai đoạn Discover để làm rõ vấn đề của người dùng:

  • Affinity Mapping: Phân nhóm dữ liệu về lý do mua sắm trực tuyến so với siêu thị truyền thống, các trở ngại trong giao nhận hàng, thói quen tìm kiếm sản phẩm và thói quen nấu nướng tại gia.
  • User Personas: Xây dựng 2 chân dung người dùng đại diện để định hình mục tiêu thiết kế và hành vi cốt lõi.
  • User Stories: Thiết lập các kịch bản người dùng cho từng tác vụ cụ thể: Đăng ký/đăng nhập, duyệt chọn sản phẩm cần mua, thực hiện mua sản phẩm, lựa chọn món ăn/thực đơn, và quản lý thông tin tài khoản cá nhân.
  • Pain Points & Solutions: Đối chiếu từng khó khăn của người dùng (thiếu thời gian, khó chọn thực đơn, lo ngại về thời gian giao hàng) với giải pháp thiết kế tương ứng trên ứng dụng.

CHƯƠNG 5: IDEATE – GIAI ĐOẠN HÌNH THÀNH Ý TƯỞNG CHO ỨNG DỤNG FOAM MARKET

Chương này chuyển hóa các giải pháp thành cấu trúc cụ thể cho ứng dụng:

  • Storyboard: Xây dựng 3 câu chuyện kịch bản bằng hình ảnh mô tả bối cảnh cuộc sống thực tế của khách hàng khi phát sinh nhu cầu sử dụng ứng dụng Foam Market.
  • Card Sorting: Tiến hành sắp xếp các nhóm thẻ tính năng và danh mục sản phẩm để tổ chức hệ thống điều hướng logic, thuận tiện cho người mua hàng.
  • Sitemap: Xây dựng sơ đồ phân cấp cấu trúc thông tin tổng thể của ứng dụng Foam Market.
  • User Flow: Thiết kế chi tiết 6 luồng thao tác của người dùng trên ứng dụng:
    1. Luồng đăng nhập hệ thống.
    2. Luồng Flash Test (kiểm tra tương tác nhanh).
    3. Luồng tìm kiếm và chọn mua sản phẩm.
    4. Luồng thanh toán đơn hàng.
    5. Luồng kiểm tra lịch sử mua hàng.
    6. Luồng thêm sản phẩm vào danh sách yêu thích.

CHƯƠNG 6: DESIGN – THIẾT KẾ ỨNG DỤNG

Chương 6 trình bày các cấp độ tạo mẫu và chuẩn hóa giao diện trực quan:

  • Phân cấp Wireframes: Triển khai thiết kế theo các mức độ chi tiết từ Low-fidelity (Low-fi), Mid-fidelity (Mid-fi) đến High-fidelity (High-fi) cho các màn hình chính (Trang chủ, Chi tiết sản phẩm, Thực đơn & Món ăn, Tìm kiếm, Yêu thích, Giỏ hàng, Thanh toán, Chọn ngày giờ giao hàng, Địa chỉ giao hàng).
  • Hệ thống lưới (Grid Layout): Thiết lập thông số kỹ thuật cho hệ thống cột (Grid Columns) và hàng (Grid Rows) đảm bảo tính cân đối, chuẩn xác trên giao diện di động.
  • Bộ hướng dẫn thiết kế giao diện (UI Guideline):
    • Màu sắc: Xác định 2 màu sắc chủ đạo bắt nguồn từ nhận diện thương hiệu Foam Market kết hợp hệ thống màu bổ trợ.
    • Kiểu chữ (Typography): Sử dụng bộ phông chữ SF Pro Display với các định dạng phân cấp tiêu đề và nội dung.
    • Thành phần giao diện (Components): Chuẩn hóa thông số kỹ thuật cho nút bấm (Button), ô nhập dữ liệu (Input field), danh mục thả xuống (Dropdown menu), thanh điều hướng (Navigation Bar) và các thành phần phụ trợ.

CHƯƠNG 7: TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN

  • Tổng kết toàn bộ kết quả đạt được trong việc hoàn thiện quy trình UX/UI cho ứng dụng Foam Market.
  • Chỉ ra các hạn chế trong quá trình thực hiện và đề xuất các định hướng phát triển trong tương lai.

Thiết kế và quy chuẩn giao diện

Bảng dưới đây tổng hợp các thông số kỹ thuật và quy chuẩn thiết kế được tác giả xây dựng trong chương Thiết kế ứng dụng:

Thành phần thiết kế Chi tiết quy chuẩn trong đồ án Vai trò và ứng dụng
Grid Layout Thiết lập thông số Grid Columns và Grid Rows theo chuẩn di động Đảm bảo tính cân đối, căn chỉnh thẳng hàng cho toàn bộ bố cục
Màu sắc chủ đạo 2 màu thương hiệu chính lấy cảm hứng từ Foam Market Thể hiện cá tính thương hiệu hiện đại, trẻ trung, tươi sạch
Màu sắc bổ trợ Hệ thống màu phụ trợ cho thông báo, trạng thái, nền Phân cấp thị giác và làm nổi bật các trường thông tin quan trọng
Typography Phông chữ SF Pro Display và các định dạng biến thể Tối ưu khả năng đọc trên màn hình điện thoại di động
UI Components Button, Input field, Dropdown menu, Navigation Bar Đồng bộ hóa tương tác, chuẩn hóa thông số cho lập trình viên
Cấp độ Wireframe Low-fi wireframes $\rightarrow$ Mid-fi $\rightarrow$ High-fi wireframes Chuyển đổi từ ý tưởng cấu trúc thô đến bản mẫu đồ họa chi tiết

Kết quả và đóng góp

Kết quả nghiên cứu và thiết kế

Đồ án đã hoàn thành đầy đủ quy trình thiết kế UX/UI cho ứng dụng Foam Market dựa trên dữ liệu thực tế:

  • Thu thập và phân tích dữ liệu khảo sát từ hơn 20 người dùng, xác định được các yếu tố người dùng quan tâm nhất khi mua thực phẩm và nhu cầu về tính năng gợi ý thực đơn.
  • Hoàn thiện bộ tài liệu phân tích UX gồm: Sơ đồ Affinity Mapping, 2 User Personas, 5 nhóm User Stories, 3 Storyboards, kết quả Card Sorting, Sitemap tổng thể và 6 biểu đồ User Flow.
  • Xây dựng hệ thống giao diện mẫu High-fi Wireframe hoàn chỉnh cho các chức năng: Đăng nhập/Đăng ký, Trang chủ, Danh mục & Chi tiết sản phẩm, Màn hình gợi ý món ăn, Tìm kiếm, Danh sách yêu thích, Giỏ hàng, Nhập địa chỉ, Lựa chọn thời gian giao hàng và Thanh toán.
  • Thiết lập bộ UI Guideline hoàn chỉnh với các thông số cụ thể về màu sắc, phông chữ SF Pro Display và các thành phần giao diện cơ bản trên Figma.

Giải pháp và đóng góp của đề tài

  • Đề xuất giải pháp tích hợp tính năng gợi ý thực đơn và công thức món ăn ngay trên ứng dụng bán lẻ thực phẩm, giải quyết khó khăn thường nhật của người nội trợ ("hôm nay ăn gì"), từ đó kích thích nhu cầu mua sắm nguyên liệu tươi sạch.
  • Cung cấp quy trình thiết kế UX/UI bài bản, khoa học từ khâu nghiên cứu thị trường đến hoàn thiện giao diện đồ họa cho một doanh nghiệp nông sản - thực phẩm cụ thể (Foam Market), làm cầu nối trực tiếp giữa khâu thiết kế (Design) và khâu phát triển phần mềm (Development).

Hạn chế và hướng nghiên cứu tiếp

Hạn chế của đồ án

  • Quy mô mẫu khảo sát trong giai đoạn Discover còn khiêm tốn (hơn 20 người tham gia), dữ liệu mang tính định hướng ban đầu cho dự án quy mô nhỏ của sinh viên.
  • Đồ án dừng lại ở mức độ nghiên cứu UX và thiết kế giao diện đồ họa (UI Prototype) trên Figma, chưa đi vào giai đoạn lập trình mã nguồn (Frontend/Backend) và triển khai ứng dụng lên các kho ứng dụng di động.
  • Chưa tiến hành kiểm thử tương tác thực tế (Usability Testing) trên bản High-fi Prototype hoàn chỉnh với tập người dùng lớn để đo lường định lượng các chỉ số trải nghiệm.

Hướng phát triển

  • Chuyển giao hệ thống UI Guideline và tài nguyên thiết kế trên Figma cho đội ngũ kỹ sư phần mềm để tiến hành lập trình ứng dụng trên các nền tảng Android và iOS.
  • Tiếp tục mở rộng nghiên cứu hành vi người dùng sau khi ứng dụng đi vào hoạt động thử nghiệm để tối ưu hóa luồng thanh toán và trải nghiệm gợi ý thực đơn.
  • Phát triển thêm các chức năng nâng cao như liên kết ví điện tử, chương trình khách hàng thân thiết và tối ưu hóa hệ thống gợi ý thực đơn thông minh.

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích cho các đối tượng:

  • Sinh viên chuyên ngành Công nghệ thông tin, Lập trình thiết bị di động, Thiết kế đồ họa hoặc Truyền thông đa phương tiện đang thực hiện đồ án tốt nghiệp liên quan đến thiết kế UX/UI cho ứng dụng di động.
  • Các nhà thiết kế UI/UX mới vào nghề cần tham khảo cấu trúc một bộ hồ sơ thiết kế sản phẩm hoàn chỉnh theo chuẩn 4 giai đoạn: Discover – Define – Ideate – Design.
  • Các phần có giá trị tham khảo cao trong tài liệu bao gồm: Quy trình xây dựng sơ đồ Affinity Mapping, phương pháp thiết lập kịch bản kiểm thử (Scenarios/Tasks) trong User Interview, và cách tổ chức bộ UI Guideline với phông chữ SF Pro Display trên Figma.

Câu hỏi thường gặp

1. Ứng dụng Foam Market được thiết kế nhằm giải quyết bài toán cốt lõi nào của doanh nghiệp?
Ứng dụng giúp Foam Market – một doanh nghiệp cung ứng nông sản tự sản xuất – tiếp cận thị trường thương mại điện tử di động, mở rộng thị phần và giải quyết khó khăn của người tiêu dùng trong việc lên thực đơn hàng ngày thông qua sứ mệnh "Nâng tầm bữa ăn Việt".

2. Tác giả đã sử dụng những công cụ kỹ thuật nào trong quá trình thực hiện đồ án?
Tác giả sử dụng bộ ba Bút/Tẩy/Giấy/Giấy note cho phác thảo sơ khởi, Google Forms để tạo bảng hỏi khảo sát, phần mềm Miro để vẽ sơ đồ phân tích và luồng người dùng, cùng phần mềm Figma để thiết kế giao diện UI, quản lý Master Component và xây dựng UI Guideline.

3. Khảo sát người dùng (User Survey) trong đề tài được tiến hành như thế nào và có quy mô bao nhiêu?
Khảo sát được thực hiện trực tuyến qua Google Forms với sự tham gia của hơn 20 người dùng, bảng hỏi chia làm 2 phần gồm: Nhóm câu hỏi nhân khẩu học (độ tuổi, giới tính, nghề nghiệp, hôn nhân) và nhóm câu hỏi về hành vi mua sắm thực phẩm, thói quen nấu nướng và nhu cầu gợi ý thực đơn.

4. Quy trình thiết kế UX/UI trong đồ án gồm những giai đoạn chính nào?
Quy trình gồm 4 giai đoạn chính: Giai đoạn 1 - Discover (Khám phá qua khảo sát, phỏng vấn, kiểm thử kịch bản); Giai đoạn 2 - Define (Xác định vấn đề qua Affinity Mapping, Personas, User Stories); Giai đoạn 3 - Ideate (Hình thành ý tưởng qua Storyboard, Card Sorting, Sitemap, User Flow); Giai đoạn 4 - Design (Thiết kế Low-fi/Mid-fi/High-fi Wireframes và UI Guideline).

5. Bộ hướng dẫn giao diện (UI Guideline) của ứng dụng quy định những thông số kỹ thuật nào?
Bộ UI Guideline quy định 2 màu sắc chủ đạo của thương hiệu Foam Market cùng hệ thống màu bổ trợ, kiểu chữ SF Pro Display và các định dạng biến thể, hệ thống lưới Grid Layout (Grid Rows, Grid Columns), cùng các thành phần chuẩn hóa gồm Button, Input field, Dropdown menu và Navigation Bar.

Kết luận

Đồ án tốt nghiệp "Phát triển và thiết kế ứng dụng cửa hàng thực phẩm cho Foam Market" của sinh viên Phạm Huy Phong đã vận dụng đầy đủ và nhất quán quy trình thiết kế lấy người dùng làm trung tâm để giải quyết bài toán số hóa cho một thương hiệu nông sản thực phẩm. Nghiên cứu đã chuyển hóa thành công các hiểu biết sâu sắc từ người dùng và doanh nghiệp thành hệ thống cấu trúc thông tin, luồng thao tác logic và bộ giao diện trực quan hoàn chỉnh trên nền tảng Figma. Đề tài đóng vai trò là một tài liệu thực hành thiết kế UX/UI điển hình, cung cấp nền tảng vững chắc cho việc lập trình và triển khai ứng dụng thương mại điện tử trong thực tế.