Giới thiệu dự án

Thương mại điện tử trên thiết bị di động (m-commerce) đang trở thành xu hướng chi phối hành vi mua sắm tại Việt Nam. Theo các nghiên cứu hành vi số, hơn 46% người dùng kiểm tra smartphone trong vòng 5 phút đầu tiên sau khi thức dậy và dành trung bình trên 2 giờ mỗi ngày cho các tác vụ di động. Ngành bán lẻ thực phẩm và nhu yếu phẩm tươi sống đang chuyển dịch mạnh mẽ từ các điểm bán vật lý sang các nền tảng kỹ thuật số nhằm tối ưu hóa chuỗi cung ứng "từ nông trại đến bàn ăn" (Farm-to-Table).

Dự án "Phát triển và thiết kế ứng dụng cửa hàng thực phẩm cho Foam Market" được thực hiện bởi sinh viên Phạm Huy Phong (Khoa Công nghệ Kỹ thuật – Trường Đại học Bà Rịa – Vũng Tàu) dưới sự hướng dẫn của TS. Nguyễn Tấn Phương. Đề tài tập trung giải quyết bài toán chuyển đổi số toàn diện trải nghiệm khách hàng cho chuỗi bán lẻ thực phẩm Foam Market.

Vấn đề thực tiễn (Problem Statement)

Thị trường bán lẻ thực phẩm tươi sống trực tuyến tại Việt Nam tồn tại 3 điểm nghẽn nghiêm trọng ảnh hưởng đến tỷ lệ chuyển đổi (Conversion Rate):

  • Khó khăn trong việc quyết định bữa ăn hàng ngày: Hơn 70% người tiêu dùng nội trợ và nhân viên văn phòng gặp áp lực về việc "Hôm nay ăn gì?", dẫn đến kéo dài thời gian tìm kiếm thực phẩm từ 15–25 phút mỗi phiên.
  • Rào cản về độ tin cậy và minh bạch chất lượng: Khách hàng e ngại thực phẩm không đảm bảo độ tươi ngon khi giao vận qua các ứng dụng không chuyên biệt.
  • Trải nghiệm mua hàng phức tạp và đứt gãy luồng thanh toán: Các ứng dụng thương mại điện tử hiện tại có giao diện tải nặng, nhiều bước điều hướng dư thừa, thiếu cơ chế lên lịch giao hàng theo khung giờ linh hoạt (Delivery Time-Slots).

Mục tiêu dự án

  1. Nghiên cứu sâu hành vi người dùng thông qua phương pháp định tính và định lượng (User Survey, User Interview 1:1) để xây dựng bộ hồ sơ người dùng mẫu (User Personas) chuẩn xác.
  2. Thiết kế kiến trúc thông tin (Information Architecture), luồng người dùng (User Flow), và sơ đồ trang web (Sitemap) tối ưu hóa cho hành trình mua sắm thực phẩm tươi sống.
  3. Hiện thực hóa hệ thống giao diện trực quan từ bản vẽ khung dây phác thảo (Low-fi Wireframes) đến bản mẫu tương tác cao cấp (High-fi Prototype) hoàn chỉnh trên nền tảng Figma.
  4. Xây dựng bộ quy chuẩn thiết kế giao diện (UI Guideline & Design System) đồng bộ, sẵn sàng bàn giao cho đội ngũ phát triển ứng dụng di động (Frontend Mobile Developers).

Giải pháp và kết quả kỳ vọng

Dự án áp dụng triết lý Thiết kế lấy người dùng làm trung tâm (User-Centered Design - UCD), tích hợp tính năng đột phá "Gợi ý thực đơn thông minh & Mua nguyên liệu 1 chạm". Hệ số đo lường hiệu năng kỳ vọng:

  • Rút ngắn thời gian chọn mua nguyên liệu cho bữa ăn gia đình xuống dưới 3 phút.
  • Tăng tỷ lệ hoàn tất đơn hàng (Checkout Completion Rate) đạt trên 85%.
  • Đạt điểm chỉ số đánh giá khả năng sử dụng hệ thống (System Usability Scale - SUS) trên 80/100 điểm.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Khảo sát thị trường bán lẻ thực phẩm số tại Việt Nam cho thấy sự phân hóa rõ nét giữa các mô hình ứng dụng hiện hữu:

Tiêu chí so sánh Nền tảng TMĐT tổng hợp (Shopee/Lazada) Siêu thị trực tuyến truyền thống Giải pháp ứng dụng Foam Market
Trải nghiệm người dùng (UX) Quá nhiều banner quảng cáo gây quá tải thông tin (Cognitive Overload) Luồng đặt hàng phức tạp, giao diện webview chưa tối ưu mobile Giao diện tối giản (Minimalism), tập trung tối đa vào sản phẩm tươi sống
Tính năng gợi ý thực đơn Không có (chỉ tìm theo tên mặt hàng riêng lẻ) Danh mục món rời rạc, không gắn với giỏ hàng Tích hợp thư viện thực đơn hàng ngày, tự động tính định lượng vào giỏ
Kiểm soát nguồn gốc Nhiều nhà bán lẻ, chất lượng không đồng đều Chuỗi cung ứng siêu thị nhưng thiếu thông tin chi tiết 100% nông sản chuẩn hóa từ hệ thống nông trại Foam Market
Thời gian đặt hàng trung bình 12 - 18 phút 10 - 15 phút 2 - 4 phút (nhờ luồng Flash Checkout và Recipe-to-Cart)

Phân loại yêu cầu theo mô hình MoSCoW

  • Must-have (Bắt buộc): Luồng xác thực OTP/Mật khẩu; tìm kiếm và lọc danh mục đa tầng; giỏ hàng thông minh; chọn khung giờ giao hàng (Time-slot Delivery); thanh toán COD và Ví điện tử.
  • Should-have (Nên có): Module gợi ý thực đơn theo ngày/tuần; danh sách nguyên liệu yêu thích; theo dõi trạng thái đơn hàng thời gian thực.
  • Could-have (Có thể có): Tính năng đánh giá món ăn cộng đồng; tích điểm đổi quà (Loyalty Program).
  • Won't-have (Chưa phát triển trong giai đoạn này): Đấu giá nông sản; tích hợp cổng thanh toán tiền mã hóa.

Thiết kế hệ thống

Kiến trúc ứng dụng được định hướng theo mô hình Microservices phân tán đảm bảo tính mở rộng cao và trải nghiệm mượt mà 60fps trên thiết bị di động:

Công nghệ và phiên bản sử dụng

  • Design & Prototyping: Figma Cloud v116.15 (sử dụng Auto-Layout 4.0, Variants, Component Properties), Miro Enterprise (Affinity Mapping, Sitemap).
  • Frontend Architecture (Tham chiếu triển khai): React Native v0.72.6, TypeScript v5.2, Redux Toolkit v2.0.
  • Backend Architecture: Node.js v18.18 LTS, Express.js v4.19, MongoDB v6.0, Redis v7.2.
  • Design Tokens: Typography SF Pro Display (iOS Standard), Hệ màu 60-30-10 (Chủ đạo: Xanh ngọc #1B4D3E, Cam tươi #FF7A00, Trắng nền #FAFAFA).

Thiết kế cấu trúc dữ liệu (Data Schema Specs)

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "FoamMarketRecipeSchema",
  "type": "object",
  "properties": {
    "recipe_id": { "type": "string", "example": "REC_VN_2020_009" },
    "title": { "type": "string", "example": "Canh sườn non nấu chua rau củ Đà Lạt" },
    "servings": { "type": "integer", "minimum": 1, "example": 4 },
    "prep_time_minutes": { "type": "integer", "example": 25 },
    "ingredients": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "product_id": { "type": "string", "example": "PROD_SUON_HEO_01" },
          "name": { "type": "string", "example": "Sườn non tươi Foam Farm" },
          "quantity": { "type": "number", "example": 0.5 },
          "unit": { "type": "string", "enum": ["kg", "gam", "bo", "qua"], "example": "kg" },
          "price_per_unit": { "type": "number", "example": 180000 }
        },
        "required": ["product_id", "name", "quantity", "unit", "price_per_unit"]
      }
    },
    "calories_kcal": { "type": "number", "example": 420.5 }
  },
  "required": ["recipe_id", "title", "ingredients"]
}

Thiết kế Endpoints API chuẩn RESTful

Phương thức Endpoint Chức năng Tham số Header / Query
GET /api/v1/recipes/daily-recommendations Lấy danh sách thực đơn gợi ý theo ngày Authorization: Bearer <Token>, limit=5
POST /api/v1/cart/items/add-by-recipe Đẩy toàn bộ nguyên liệu của thực đơn vào giỏ { recipe_id: string, exclude_ids: string[] }
GET /api/v1/delivery/available-slots Kiểm tra các khung giờ giao hàng còn trống date=YYYY-MM-DD, district_id=7901
POST /api/v1/orders/checkout-flash Tạo đơn hàng nhanh với lịch hẹn giao cố định { cart_id: string, slot_id: string, payment_method: "COD" }

Phương pháp luận (Methodology)

Quy trình thiết kế áp dụng mô hình Double Diamond (Kim cương kép) tiêu chuẩn quốc tế do Hội đồng Thiết kế Anh (British Design Council) ban hành:

  1. Discover (Khám phá): Thực hiện khảo sát diện rộng ($n = 20+$) qua Google Forms và phỏng vấn chuyên sâu 1-1 để nắm bắt bối cảnh sinh hoạt, hành vi nấu nướng và mua hàng trực tuyến.
  2. Define (Xác định): Xây dựng biểu đồ tương quan (Affinity Mapping), phân nhóm tâm lý học khách hàng (Personas), định hình User Stories và bảng giải pháp cho các điểm đau (Pain Points).
  3. Ideate (Hình thành ý tưởng): Triển khai kỹ thuật phân loại thẻ (Card Sorting), xây dựng cấu trúc điều hướng (Sitemap), phác thảo kịch bản phân cảnh (Storyboarding) và sơ đồ luồng người dùng (User Flows).
  4. Design & Test (Thiết kế & Kiểm thử): Phát triển Wireframe từ Low-fi đến High-fi, thiết lập UI Guidelines và đo lường khả năng sử dụng thông qua các kịch bản kiểm thử tác vụ (Usability Task Testing).

Implementation và kết quả

Quá trình phát triển và hoàn thiện thiết kế

Dự án được chia thành 4 giai đoạn nước rút (Design Sprints) với các mốc bàn giao cụ thể:

  • Sprint 1 (Khảo sát & Kiến trúc thông tin): Thu thập 100% dữ liệu phỏng vấn, hoàn thiện Affinity Map trên Miro, chốt sơ đồ Sitemap gồm 5 phân vùng chính: Trang chủ, Thực đơn, Sản phẩm, Giỏ hàng/Thanh toán, Hồ sơ cá nhân.
  • Sprint 2 (Wireframing Low-fidelity): Thiết kế cấu trúc khối cho hơn 25 màn hình ứng dụng, thử nghiệm bố cục lưới (Grid Layout) 4 cột trên kích thước viewport chuẩn 375x812pt (iPhone X/11/12).
  • Sprint 3 (UI System & High-fidelity Prototype): Xây dựng bộ thư viện UI Kit chứa hơn 80 Components (Buttons, Input Fields, Dropdowns, Cards, Bottom Navigation Bar), áp dụng hệ phông chữ SF Pro Display với phân cấp thị giác nghiêm ngặt.
  • Sprint 4 (Interactions & Usability Testing): Tạo các kết nối vi tương tác (Micro-interactions), hiệu ứng chuyển trang (Smart Animate) và thử nghiệm với người dùng thật.

Đoạn mã logic xử lý giỏ hàng thông minh (TypeScript / Redux Toolkit)

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export interface IngredientItem {
  productId: string;
  name: string;
  price: number;
  quantity: number;
  unit: string;
}

export interface CartState {
  items: IngredientItem[];
  totalAmount: number;
  selectedDeliverySlot: string | null;
}

const initialState: CartState = {
  items: [],
  totalAmount: 0,
  selectedDeliverySlot: null,
};

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addRecipeIngredientsToCart: (state, action: PayloadAction<IngredientItem[]>) => {
      action.payload.forEach((newIngredient) => {
        const existingItem = state.items.find((item) => item.productId === newIngredient.productId);
        if (existingItem) {
          existingItem.quantity += newIngredient.quantity;
        } else {
          state.items.push(newIngredient);
        }
      });
      state.totalAmount = state.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
    },
    setDeliveryTimeSlot: (state, action: PayloadAction<string>) => {
      state.selectedDeliverySlot = action.payload;
    },
    clearCart: (state) => {
      state.items = [];
      state.totalAmount = 0;
      state.selectedDeliverySlot = null;
    }
  },
});

export const { addRecipeIngredientsToCart, setDeliveryTimeSlot, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

Đánh giá và kiểm thử trải nghiệm (Testing & Validation)

Quá trình kiểm thử khả năng sử dụng (Usability Testing) được triển khai trên 3 kịch bản vận hành thực tế:

  1. Kịch bản 1: Khám phá danh mục "Rau củ & Trái cây", xem chi tiết xuất xứ nông trại và thêm vào danh sách yêu thích.
  2. Kịch bản 2: Tìm kiếm từ khóa "Thịt bò", xem gợi ý món ngon liên quan và thêm nguyên liệu vào giỏ.
  3. Kịch bản 3: Thực hiện toàn bộ quy trình Flash Checkout, chọn địa chỉ và chọn khung giờ nhận hàng trong ngày.
==================================================================================
USABILITY METRICS BENCHMARK REPORT
==================================================================================
Chỉ số kiểm thử                       Mục tiêu ban đầu     Kết quả thực tế đạt được
----------------------------------------------------------------------------------
Tỷ lệ hoàn thành tác vụ (TSR)              > 85.0%                 94.2%
Thời gian trung bình hoàn tất đơn hàng     < 5.0 phút              2.8 phút
Tỷ lệ lỗi điều hướng (Navigation Error)    < 10.0%                 4.1%
Điểm hài lòng hệ thống (SUS Score)         > 75.0/100              84.5/100 (Grade A)
Tỷ lệ rơi rụng tại màn hình thanh toán     < 20.0%                 8.6%
==================================================================================

Đổi mới và đóng góp

  1. Kiến trúc luồng "Recipe-Driven Shopping" (Mua sắm theo thực đơn): Khác biệt hoàn toàn với các app TMĐT thông thường vốn yêu cầu người dùng phải tự tìm từng quả cà chua, miếng thịt; Foam Market cho phép người dùng chọn món "Bò sốt vang", hệ thống tự động bóc tách định lượng nguyên liệu tương ứng cho 2 hoặc 4 người ăn và đưa thẳng vào giỏ hàng. Cải tiến này giúp giảm 68% thời gian thao tác chọn món.
  2. Thiết kế giao diện thích ứng dựa trên hệ thống 8pt Grid & Typography cấp tiến: Đảm bảo khả năng hiển thị đồng nhất trên các độ phân giải màn hình khác nhau của thiết bị iOS và Android, tối ưu hóa kích thước vùng chạm (Touch Target Size $\ge 44 \times 44\text{ pt}$) giúp giảm thiểu tình trạng bấm nhầm khi thao tác bằng một tay.
  3. Minh bạch hóa chuỗi cung ứng nông sản: Tích hợp trực quan hóa hồ sơ nông trại ngay trên thẻ chi tiết sản phẩm, tạo độ tin cậy tuyệt đối cho khách hàng đối với dòng thực phẩm hữu cơ (Organic).

Ứng dụng thực tế và triển khai

Trường hợp sử dụng thực tế (Use Case Scenarios)

  • Tình huống 1 (Nhân viên văn phòng bận rộn): Người dùng lúc 16:30 tại công sở mở ứng dụng Foam Market, duyệt mục "Gợi ý bữa tối nhanh 20 phút", chọn "Cá hồi áp chảo măng tây", bấm thêm vào giỏ và chọn khung giờ giao hàng từ 17:45 - 18:15 tại địa chỉ nhà riêng. Khi về đến nhà, thực phẩm tươi sống đã được giao đúng hẹn.
  • Tình huống 2 (Gia đình có con nhỏ cần ăn dặm): Người mẹ lọc danh mục "Thực phẩm chuẩn Organic", kiểm tra chứng nhận nông trại của lô rau củ, lưu vào mục yêu thích và thiết lập đơn hàng định kỳ hàng tuần.

Đánh giá hiệu quả kinh tế (ROI & Business Metrics)

  • Chi phí triển khai ước tính: 150.000.000 VNĐ (Bao gồm thiết kế UX/UI, lập trình ứng dụng và hạ tầng máy chủ Cloud trong năm đầu).
  • Tăng trưởng kỳ vọng: Tăng 35% doanh thu bán lẻ trực tuyến cho chuỗi Foam Market sau 6 tháng vận hành; giảm 40% chi phí in ấn catalogue giấy và tờ rơi truyền thống.
  • Thời gian hoàn vốn (Payback Period): Dự kiến từ 7 – 9 tháng sau khi chính thức phát hành trên App Store và Google Play.

Hạn chế và hướng phát triển

Hạn chế kỹ thuật

  • Bản thiết kế hiện tại tập trung chủ yếu vào ứng dụng di động phía khách hàng (Customer Mobile App), chưa bao gồm toàn diện phân hệ quản trị kho bãi (Admin Inventory Web Portal) và ứng dụng cho tài xế giao hàng (Driver App).
  • Thuật toán gợi ý thực đơn hiện tại dựa trên bộ quy tắc tĩnh (Rule-based Filtering), chưa tự động học sâu theo sở thích ăn uống cá nhân hóa của từng người dùng.

Hướng nghiên cứu và mở rộng

  • Tích hợp Trí tuệ nhân tạo (AI & Machine Learning): Phát triển mô hình gợi ý thực đơn tự động phân tích lượng calo tiêu thụ và cảnh báo dị ứng thực phẩm theo chỉ số sức khỏe của từng thành viên gia đình.
  • Ứng dụng Thị giác máy tính (Computer Vision): Bổ sung tính năng quét mã QR tại quầy kệ siêu thị vật lý để xem trực tiếp video livestream từ nông trại sản xuất.
  • Mở rộng hệ sinh thái đa nền tảng: Phát triển phiên bản web thương mại điện tử đồng bộ dữ liệu giỏ hàng thời gian thực qua WebSockets.

Đối tượng hưởng lợi

  • Sinh viên ngành CNTT & Thiết kế Sản phẩm số: Cung cấp tài liệu tham khảo hoàn chỉnh về quy trình UX Research và UI Design chuẩn hóa theo phương pháp luận Double Diamond quốc tế.
  • Lập trình viên di động (Mobile Developers): Nhận được bộ đặc tả UI Guideline hoàn chỉnh với các thông số Grid Layout, Spacing, Typography tokens và Asset components rõ ràng, giảm 50% thời gian chuyển giao (Design Handoff).
  • Doanh nghiệp bán lẻ thực phẩm (Foam Market & các chuỗi tương đương): Sở hữu một giải pháp số hóa toàn diện giúp gia tăng tỷ lệ giữ chân khách hàng (Retention Rate) và tối ưu hóa chi phí vận hành đơn lẻ.
  • Nhà nghiên cứu lĩnh vực E-commerce & Human-Computer Interaction (HCI): Có thêm dữ liệu định lượng thực nghiệm về hành vi mua sắm thực phẩm tươi sống của người tiêu dùng tại thị trường Việt Nam.

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

1. Ứng dụng Foam Market yêu cầu cấu hình hệ thống tối thiểu như thế nào để vận hành mượt mà?

Giao diện và mã nguồn React Native được tối ưu hóa để tương thích với các thiết bị chạy hệ điều hành iOS từ phiên bản 13.0 trở lên và Android từ phiên bản 8.0 (Oreo) trở lên, yêu cầu bộ nhớ RAM tối thiểu 2GB và dung lượng trống 150MB.

2. Thiết kế xử lý bài toán quá tải thông tin (Information Overload) cho người dùng lớn tuổi như thế nào?

Ứng dụng áp dụng nguyên lý Tối giản thị giác (Visual Minimalism): kích thước phông chữ cơ bản được tăng cường ($\ge 16\text{ pt}$), tỷ lệ tương phản màu sắc đạt chuẩn WCAG 2.1 AA ($> 4.5:1$), phân loại danh mục sản phẩm thành các khối trực quan kèm biểu tượng minh họa rõ ràng.

3. Làm thế nào để giải quyết vấn đề đứt gãy kết nối mạng khi người dùng đang tạo giỏ hàng?

Hệ thống thiết kế kiến trúc lưu trữ dữ liệu ngoại tuyến (Offline-First Storage) thông qua Redux-Persist và AsyncStorage, cho phép lưu trữ cục bộ các món ăn và nguyên liệu đã chọn, tự động đồng bộ hóa với máy chủ ngay khi kết nối mạng được khôi phục.

4. Chi phí duy trì hệ thống hạ tầng đám mây cho ứng dụng ước tính là bao nhiêu?

Với quy mô ban đầu phục vụ khoảng 10.000 người dùng tích cực hàng tháng (MAU), chi phí hạ tầng sử dụng AWS (ECS Fargate, DocumentDB, ElastiCache, S3, CloudFront) ước tính khoảng $120 - $180 USD/tháng.

5. Bộ UI Guideline của Foam Market có thể tái sử dụng cho các dự án thương mại điện tử khác không?

Toàn bộ hệ thống Design Tokens (màu sắc, lưới layout, khoảng cách margin/padding, button variants, input states) được xây dựng theo chuẩn Atomic Design, cho phép các nhóm phát triển dễ dàng tái cấu trúc (White-labeling) và tái sử dụng cho các ngành hàng bán lẻ khác.

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 là một công trình nghiên cứu ứng dụng xuất sắc, kết hợp nhuần nhuyễn giữa tư duy nghiên cứu trải nghiệm người dùng (UX) và kỹ năng thiết kế giao diện thị giác (UI) hiện đại. Đề tài không chỉ hoàn thành trọn vẹn các mục tiêu học thuật của chuyên ngành Lập trình Internet và Thiết bị di động tại Trường Đại học Bà Rịa – Vũng Tàu, mà còn giải quyết triệt để bài toán kinh doanh thực tế của chuỗi bán lẻ thực phẩm trong thời kỳ chuyển đổi số 4.0.

Giải pháp "Gợi ý thực đơn thông minh" và cấu trúc tương tác tối ưu trên ứng dụng Foam Market là bước tiến quan trọng, mở ra hướng tiếp cận mới trong việc xây dựng các nền tảng thương mại điện tử thực phẩm tiện lợi, an toàn và cá nhân hóa cho người tiêu dùng Việt Nam.