Giới thiệu dự án

Thương mại điện tử trong lĩnh vực dịch vụ ẩm thực (Online Food Delivery - OFD) tại Việt Nam đang chứng kiến sự tăng trưởng vượt bậc với tỷ lệ tăng trưởng kép hàng năm (CAGR) đạt trên 20%. Theo các khảo sát thị trường, hành vi người tiêu dùng đã chuyển dịch mạnh mẽ từ phương thức gọi món truyền thống sang đặt món qua ứng dụng di động nhờ tính tiện lợi và tốc độ xử lý nhanh. Tuy nhiên, sự phát triển nhanh chóng của các nền tảng đặt món đại trà lại tạo ra rào cản lớn cho các chuỗi nhà hàng đặc thù: tỷ lệ chiết khấu trung gian cao (20% - 30%), giao diện ứng dụng chung bị quá tải thông tin, quảng cáo tràn lan làm gián đoạn trải nghiệm người dùng, và thiếu tính cá nhân hóa đối với các phân khúc ẩm thực chuyên biệt như ẩm thực chay và ẩm thực vùng miền.

Đồ án tốt nghiệp chuyên ngành Công nghệ Đa phương tiện tại Trường Đại học Mở Hà Nội, do sinh viên Nguyễn Thị Ngọc Minh thực hiện dưới sự hướng dẫn của ThS. Nguyễn Thị Quỳnh Như, tập trung giải quyết bài toán: "Thiết kế giao diện và trải nghiệm người dùng ứng dụng bán đồ ăn cho nhà hàng Sen Vàng (FoodSwift)".

[Khách hàng mục tiêu] ---> [Ứng dụng FoodSwift (Mobile App)] <---> [Hệ thống Quản trị (Admin CMS)]
                                   │                                         │
                         ┌─────────┴─────────┐                     ┌─────────┴─────────┐
                         ▼                   ▼                     ▼                   ▼
                  [Tra cứu & Đặt món] [Thanh toán & Đánh giá]      [Quản lý Menu/Đơn]  [Thống kê Doanh thu]

Điểm nghẽn thực tế (Pain Points)

  • Giao diện người dùng (UI) phức tạp: Người dùng dễ bị quá tải thị giác do màu sắc thiếu đồng bộ, hình ảnh khuyến mãi chèn ép không gian hiển thị, và font chữ không chuẩn hóa gây mỏi mắt.
  • Trải nghiệm người dùng (UX) đứt gãy: Quy trình đặt hàng nhiều bước trung gian, thiếu thông báo phản hồi trạng thái rõ ràng, và điều hướng không liền mạch khiến tỷ lệ từ bỏ giỏ hàng (Cart Abandonment Rate) tăng cao.
  • Khoảng cách quản trị: Thiếu hệ thống quản trị chuyên biệt đồng bộ giữa bộ phận bếp, nhân viên vận hành và khách hàng thời gian thực.

Mục tiêu dự án

  1. Nghiên cứu cơ sở lý luận UI/UX: Hệ thống hóa các nguyên tắc thị giác, lý thuyết màu sắc (Monochromatic, Complementary, Triadic, Tetradic) và các tiêu chuẩn công thái học giao diện số.
  2. Khảo sát và phân tích hành vi người dùng: Thực hiện nghiên cứu định tính qua phỏng vấn trực tiếp ($N=6$) và nghiên cứu định lượng qua biểu mẫu trực tuyến ($N=128$) để lượng hóa nhu cầu thực tế.
  3. Mô hình hóa hệ thống và luồng nghiệp vụ: Xây dựng sơ đồ phân rã chức năng (BFD), sơ đồ luồng dữ liệu (DFD) mức ngữ cảnh và mức đỉnh cho 30 chức năng nghiệp vụ cụ thể.
  4. Thiết kế hệ thống trực quan và Design System: Xây dựng bộ nhận diện thương hiệu, hệ thống phân cấp bố cục (Visual Hierarchy), Wireframe và Mockup hoàn chỉnh cho cả hai phân hệ: Khách hàng (User) và Quản trị viên (Admin).
  5. Hiện thực hóa tương tác (Interactive Prototyping): Xây dựng mẫu thử tương tác hoàn chỉnh trên nền tảng Figma, kiểm thử khả năng điều hướng và đánh giá mức độ hài lòng của người dùng.

Phương pháp tiếp cận và kết quả kỳ vọng

Dự án áp dụng quy trình thiết kế lấy người dùng làm trung tâm (User-Centered Design - UCD) kết hợp tư duy Mobile-First. Kết quả kỳ vọng đạt được là một giải pháp thiết kế toàn diện giúp giảm thời gian hoàn tất đơn hàng xuống dưới 2 phút, đảm bảo tỷ lệ hoàn thành tác vụ (Task Completion Rate) đạt trên 90% trong các kịch bản kiểm thử, và cung cấp hệ cơ sở dữ liệu quan hệ gồm 10 thực thể chuẩn hóa phục vụ trực tiếp cho quá trình lập trình phát triển sau này.

Phạm vi và giới hạn đề tài

  • Phạm vi: Tập trung vào trải nghiệm đặt món, quản lý giỏ hàng, theo dõi đơn hàng, đánh giá chất lượng và quản trị hệ thống menu/đơn hàng/tin tức cho chuỗi nhà hàng Sen Vàng.
  • Giới hạn: Đồ án dừng lại ở mức xây dựng thiết kế trực quan, đặc tả cấu trúc dữ liệu và mẫu thử tương tác cao (High-fidelity Prototype), chưa tích hợp cổng thanh toán trực tiếp hay triển khai mã nguồn Backend production.

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

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

Để tìm ra khoảng trống phát triển cho ứng dụng FoodSwift, nghiên cứu đã tiến hành phân tích đối sánh giữa các nền tảng thương mại điện tử ẩm thực hiện hành và các đề tài tốt nghiệp liên quan.

Tiêu chí phân tích ShopeeFood / GrabFood App Starbucks (Nguyễn Trung Kiên, 2021) App Rocket Academy (Nguyễn Tiến Anh, 2022) Ứng dụng FoodSwift (Đồ án đề xuất)
Mục tiêu nền tảng Sàn TMĐT đa thương hiệu Ứng dụng chuỗi đồ uống đơn lẻ Nền tảng học lập trình trực tuyến Ứng dụng chuyên biệt cho Nhà hàng Sen Vàng
Ưu điểm UI/UX Hệ sinh thái voucher đa dạng Thiết kế nhận diện thương hiệu tốt Bố cục gọn gàng, wireframe đầy đủ Giao diện tinh gọn, chuẩn màu sắc thương hiệu, UX tối ưu cho ẩm thực chay
Nhược điểm tồn tại Giao diện rối mắt, nhiều banner quảng cáo Chưa tối ưu Mobile responsive, tương tác hạn chế Khoảng trắng thừa nhiều, thiếu bắt lỗi đăng nhập Đã khắc phục khoảng trắng thừa, tích hợp hệ thống điều hướng 4 câu hỏi
Phân hệ Admin Phức tạp, phụ thuộc vào hệ thống sàn Chưa chi tiết hóa luồng quản trị Quản lý giảng viên/khóa học mất cân bằng Đầy đủ 30 chức năng quản lý: món, đơn, nhân viên, doanh thu

Phân loại yêu cầu người dùng theo mô hình MoSCoW

  • Must-have (Bắt buộc): Đăng ký/đăng nhập phân quyền, tìm kiếm và lọc danh mục món chay, xem chi tiết món ăn và giá niêm yết, thêm vào giỏ hàng, thiết lập đơn hàng, theo dõi trạng thái đơn hàng (Chờ xác nhận, Đang giao, Hoàn thành), phân hệ quản trị thực đơn và đơn hàng.
  • Should-have (Nên có): Đánh giá/nhận xét kèm sao sau khi nhận hàng, áp dụng mã khuyến mãi/voucher giảm giá, lưu lịch sử đơn hàng, cập nhật bảng tin tức ưu đãi.
  • Could-have (Có thể có): Kênh hỗ trợ tư vấn trực tuyến (Live Chat) giữa người mua và nhà hàng, tích hợp nhiều tài khoản ngân hàng liên kết.
  • Won't-have (Chưa thực hiện ở giai đoạn này): Tính năng phân tích dữ liệu dinh dưỡng tự động và định vị shipper thời gian thực qua bản đồ số chuyên sâu.
+-----------------------------------------------------------------------+
|                       MoSCoW REQUIREMENTS MATRIX                     |
+-----------------------------------+-----------------------------------+
|             MUST-HAVE             |            SHOULD-HAVE            |
| - Authentication & RBAC           | - Rating & Reviews System         |
| - Product Catalog & Filter        | - Voucher / Discount Engine       |
| - Shopping Cart & Order Flow      | - Order History Tracking          |
| - Admin CMS for Menu & Orders     | - News & Promotions Feed          |
+-----------------------------------+-----------------------------------+
|            COULD-HAVE             |             WON'T-HAVE            |
| - In-app Live Chat Support        | - AI Calorie Recommendation       |
| - Multi-bank Account Linking      | - Real-time GPS Fleet Tracking    |
+-----------------------------------+-----------------------------------+

Thiết kế hệ thống

Kiến trúc tổng thể và ngăn xếp công nghệ (Technology Stack)

Hệ thống được thiết kế theo mô hình kiến trúc phân lớp hướng dịch vụ, sẵn sàng chuyển giao từ bản thiết kế sang giai đoạn phát triển phần mềm:

  • Công cụ thiết kế UI/UX: Figma (v124.0) hỗ trợ Auto-Layout, Component Variants và Design Tokens.
  • Công cụ đồ họa nhận diện: Adobe Illustrator CC 2024 (thiết kế logo, icon vector), Adobe Photoshop CC 2024 (xử lý hình ảnh sản phẩm tối ưu độ nét và dung lượng).
  • Mô hình kiến trúc triển khai dự kiến: Client-Server Architecture (Mobile Client viết bằng Flutter/React Native, Backend RESTful API viết bằng Node.js/NestJS hoặc Java Spring Boot).
  • Hệ quản trị cơ sở dữ liệu: MySQL / PostgreSQL chuẩn hóa dạng chuẩn 3 (3NF).
                      +---------------------------------------+
                      |         PRESENTATION LAYER            |
                      |   Mobile App UI / Admin Dashboard     |
                      |         (Figma Design Tokens)         |
                      +-------------------+-------------------+
                                          |
                                          v (RESTful API / HTTPS)
                      +---------------------------------------+
                      |          BUSINESS LOGIC LAYER         |
                      |  - Auth & RBAC Manager                |
                      |  - Order Processing Engine            |
                      |  - Cart & Product Catalog Manager     |
                      |  - News & Promotion Handler           |
                      +-------------------+-------------------+
                                          |
                                          v (ORM / SQL Queries)
                      +---------------------------------------+
                      |              DATA LAYER               |
                      |      Relational Database (3NF)        |
                      |   10 Core Entities / InnoDB Engine    |
                      +---------------------------------------+

Thiết kế cơ sở dữ liệu quan hệ (Database Schema)

Hệ thống gồm 10 bảng thực thể chính được liên kết chặt chẽ qua các khóa ngoại (Foreign Keys):

-- Bang Phan quyen nguoi dung (RBAC)
CREATE TABLE PHAN_QUYEN (
    MaQuyen VARCHAR(20) PRIMARY KEY,
    TacVu VARCHAR(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bang Khach hang
CREATE TABLE KHACH_HANG (
    MaKhachHang VARCHAR(20) PRIMARY KEY,
    TenKhachHang VARCHAR(100) NOT NULL,
    NgaySinh DATE,
    DiaChi VARCHAR(255),
    SoDienThoai VARCHAR(15) UNIQUE NOT NULL,
    Email VARCHAR(100) UNIQUE NOT NULL,
    GioiTinh VARCHAR(10),
    TenDangNhap VARCHAR(50) UNIQUE NOT NULL,
    MatKhau VARCHAR(255) NOT NULL,
    MaQuyen VARCHAR(20),
    FOREIGN KEY (MaQuyen) REFERENCES PHAN_QUYEN(MaQuyen) ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bang Danh muc san pham
CREATE TABLE DANH_MUC_SAN_PHAM (
    MaLoaiSanPham VARCHAR(20) PRIMARY KEY,
    TenLoaiSanPham VARCHAR(100) NOT NULL,
    MaNhanVien VARCHAR(20),
    NgayDang DATETIME DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bang San pham
CREATE TABLE SAN_PHAM (
    MaSanPham VARCHAR(20) PRIMARY KEY,
    TenSanPham VARCHAR(150) NOT NULL,
    MaLoaiSanPham VARCHAR(20),
    MaNhanVien VARCHAR(20),
    SoLuong INT DEFAULT 0,
    GiaSanPham DECIMAL(12, 2) NOT NULL,
    NgayDang DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (MaLoaiSanPham) REFERENCES DANH_MUC_SAN_PHAM(MaLoaiSanPham) ON DELETE CASCADE,
    FOREIGN KEY (MaNhanVien) REFERENCES NHAN_VIEN(MaNhanVien)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bang Gio hang
CREATE TABLE GIO_HANG (
    MaGioHang VARCHAR(20) PRIMARY KEY,
    MaSanPham VARCHAR(20),
    MaKhachHang VARCHAR(20),
    SoLuongSanPham INT NOT NULL DEFAULT 1,
    GiaSanPham DECIMAL(12, 2) NOT NULL,
    FOREIGN KEY (MaSanPham) REFERENCES SAN_PHAM(MaSanPham) ON DELETE CASCADE,
    FOREIGN KEY (MaKhachHang) REFERENCES KHACH_HANG(MaKhachHang) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bang Don hang
CREATE TABLE DON_HANG (
    MaDonHang VARCHAR(20) PRIMARY KEY,
    MaSanPham VARCHAR(20),
    MaKhachHang VARCHAR(20),
    MaNhanVien VARCHAR(20),
    TrangThaiDonHang ENUM('Pending', 'Confirmed', 'Shipping', 'Completed', 'Cancelled') NOT NULL,
    TongTien DECIMAL(12, 2) NOT NULL,
    NgayTao DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (MaSanPham) REFERENCES SAN_PHAM(MaSanPham),
    FOREIGN KEY (MaKhachHang) REFERENCES KHACH_HANG(MaKhachHang),
    FOREIGN KEY (MaNhanVien) REFERENCES NHAN_VIEN(MaNhanVien)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Phương pháp nghiên cứu và phát triển (Methodology)

Đồ án triển khai theo mô hình 5 giai đoạn lấy người dùng làm trung tâm (Design Thinking Framework) kết hợp phương pháp quản lý tiến độ chia thành các cột mốc tuần tự:

[Tuần 1-2: Khám phá & Nghiên cứu] ──> [Tuần 3-4: Phân tích & Thiết kế HT] ──> [Tuần 5-7: Wireframing & Design System] ──> [Tuần 8-11: UI High-Fidelity] ──> [Tuần 12-15: Prototyping & Đánh giá]
  • Tuần 1 - 2: Nghiên cứu tổng quan lý thuyết UI/UX, nguyên lý màu sắc, khảo sát định tính và định lượng 128 đối tượng thực tế.
  • Tuần 3 - 4: Khảo sát hệ thống, thiết lập mô hình BFD/DFD, chuẩn hóa 10 bảng cơ sở dữ liệu quan hệ.
  • Tuần 5 - 6: Xây dựng cấu trúc layout và wireframe mức thấp (Low-fidelity Wireframes) cho phân hệ User và Admin.
  • Tuần 7 - 11: Thiết lập bộ nhận diện thương hiệu (Logo, Typography 16pt, Color Palette), thiết kế giao diện chi tiết hơn 60 màn hình UI trực quan.
  • Tuần 12 - 15: Liên kết tương tác tạo Prototype hoàn chỉnh trên Figma, tiến hành kiểm thử UAT và hoàn thiện báo cáo đồ án.

Implementation và kết quả

Quá trình thực thi thiết kế (Development Process)

Quá trình thiết kế được phân rã thành 6 nhóm chức năng chính trên sơ đồ BFD với tổng cộng 30 chức năng chi tiết:

                                  ỨNG DỤNG BÁN ĐỒ ĂN SEN VÀNG (BFD)
        ┌──────────────┬──────────────┬──────────────┬──────────────┬──────────────┬──────────────┐
        ▼              ▼              ▼              ▼              ▼              ▼
   Quản lý TK     Quản lý Menu   Quản lý Món    Quản lý Giỏ    Quản lý Đơn    Quản lý Tin/BC
  (8 chức năng)  (3 chức năng)  (4 chức năng)  (3 chức năng)  (4 chức năng)  (8 chức năng)
  1. Nhóm Quản lý tài khoản (8 chức năng): Đăng ký, Đăng nhập, Đăng xuất, Thêm, Sửa, Xóa, Tìm kiếm, Phân quyền người dùng.
  2. Nhóm Quản lý tin tức (3 chức năng): Thêm, Sửa, Xóa tin tức khuyến mãi.
  3. Nhóm Quản lý danh mục (3 chức năng): Thêm, Sửa, Xóa danh mục món ăn.
  4. Nhóm Quản lý sản phẩm (4 chức năng): Tìm kiếm, Thêm, Sửa, Xóa sản phẩm.
  5. Nhóm Quản lý đánh giá (2 chức năng): Thêm, Sửa đánh giá đơn hàng.
  6. Nhóm Quản lý giỏ hàng & Đơn hàng (7 chức năng): Thêm/Sửa/Xóa giỏ hàng, Tìm kiếm, Cập nhật trạng thái, Hủy đơn hàng, Báo cáo thống kê doanh thu.

Giải thuật xử lý trạng thái giỏ hàng và chuyển đổi đơn hàng (State Machine Logic)

// Thuat toan kiem tra tinh hop le cua gio hang va chuyen doi trang thai don hang
interface CartItem {
  productId: string;
  name: string;
  unitPrice: number;
  quantity: number;
  stockAvailable: number;
}

enum OrderStatus {
  PENDING = "Pending",
  CONFIRMED = "Confirmed",
  SHIPPING = "Shipping",
  COMPLETED = "Completed",
  CANCELLED = "Cancelled"
}

class OrderProcessingEngine {
  public validateCart(items: CartItem[]): { isValid: boolean; message?: string } {
    if (!items || items.length === 0) {
      return { isValid: false, message: "Giỏ hàng rỗng. Vui lòng chọn món ăn." };
    }
    for (const item of items) {
      if (item.quantity <= 0) {
        return { isValid: false, message: `Số lượng món ${item.name} không hợp lệ.` };
      }
      if (item.quantity > item.stockAvailable) {
        return { isValid: false, message: `Món ${item.name} vượt quá số lượng tồn trong kho.` };
      }
    }
    return { isValid: true };
  }

  public calculateTotal(items: CartItem[], voucherDiscount: number = 0): number {
    const subtotal = items.reduce((sum, item) => sum + item.unitPrice * item.quantity, 0);
    const finalTotal = subtotal - voucherDiscount;
    return finalTotal > 0 ? finalTotal : 0;
  }

  public transitionOrderStatus(currentStatus: OrderStatus, action: "CONFIRM" | "SHIP" | "DELIVER" | "CANCEL"): OrderStatus {
    switch (currentStatus) {
      case OrderStatus.PENDING:
        if (action === "CONFIRM") return OrderStatus.CONFIRMED;
        if (action === "CANCEL") return OrderStatus.CANCELLED;
        break;
      case OrderStatus.CONFIRMED:
        if (action === "SHIP") return OrderStatus.SHIPPING;
        if (action === "CANCEL") return OrderStatus.CANCELLED;
        break;
      case OrderStatus.SHIPPING:
        if (action === "DELIVER") return OrderStatus.COMPLETED;
        break;
      default:
        return currentStatus;
    }
    throw new Error(`Hành động ${action} không hợp lệ khi đơn hàng đang ở trạng thái ${currentStatus}`);
  }
}

Kiểm thử và đánh giá trải nghiệm người dùng (Testing & Validation)

Dữ liệu khảo sát từ 128 người tham gia và phỏng vấn chuyên sâu 6 người dùng mẫu đã được chuyển hóa thành các chỉ số kỹ thuật phục vụ thiết kế:

[Khảo sát N=128] ──> Độ tuổi: 18-29 (78.1%) ──> Thiết bị: Mobile (92.3%) ──> Ưu tiên: Ảnh & Giá (84.6%)
  • Độ tuổi & Thiết bị: 78.1% người dùng thuộc độ tuổi 18–29; 92.3% sử dụng điện thoại thông minh để đặt món $\rightarrow$ Ưu tiên Mobile UI, font chữ Sans-serif kích thước tiêu chuẩn 16pt.
  • Nội dung quan tâm: 84.6% người dùng yêu cầu hình ảnh trực quan và giá cả rõ ràng $\rightarrow$ Bố trí hình ảnh món ăn chiếm tỷ lệ $40%$ diện tích thẻ sản phẩm, giá bán in đậm với màu sắc tương phản.
  • Kết quả đánh giá kiểm thử người dùng (User Acceptance Testing - UAT):
Chỉ số đánh giá Giá trị mục tiêu ban đầu Kết quả đạt được trên Prototype Mức độ cải thiện (%)
Thời gian hoàn tất đặt hàng $\le 180\text{ giây}$ $112\text{ giây}$ Rút ngắn $37.7%$
Tỷ lệ hoàn thành tác vụ (TCR) $\ge 85%$ $94.2%$ Vượt mục tiêu $+9.2%$
Tỷ lệ click nhầm / Lạc đường $\le 10%$ $3.5%$ Giảm thiểu $65.0%$
Điểm hài lòng giao diện (SUS Score) $\ge 75/100$ $86.5/100$ Đạt mức xuất sắc (Grade A)

Kết quả đạt được

  1. Bộ nhận diện hoàn chỉnh: Xây dựng thành công logo thương hiệu Nhà hàng Sen Vàng ở cả 3 định dạng (âm bản, dương bản, phối màu) dựa trên biểu tượng hoa sen kết hợp hình tượng đầu bếp.
  2. Hệ thống giao diện đồ sộ: Hoàn thiện 100% bản vẽ layout, wireframe và giao diện UI trực quan gồm hơn 60 màn hình (30+ màn hình phía Khách hàng và 30+ màn hình phía Quản trị viên).
  3. Mô hình hóa dữ liệu chính xác: Cung cấp đầy đủ sơ đồ luồng dữ liệu DFD mức khung cảnh, DFD mức đỉnh và 10 bảng thực thể cơ sở dữ liệu quan hệ với ràng buộc toàn vẹn dữ liệu.

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

Đổi mới kỹ thuật và phương pháp thiết kế

  • Hệ thống điều hướng 4 câu hỏi định vị: Ứng dụng mô hình điều hướng không gian giúp người dùng luôn xác định được: "Tôi đang ở đâu?", "Tôi đã đến đây bằng cách nào?", "Tôi có thể đi đâu tiếp theo?", và "Làm thế nào để quay lại trang chủ?". Điều này triệt tiêu hoàn toàn các ngõ cụt điều hướng (Dead-end screens).
  • Tối ưu hóa bảng màu công thái học: Áp dụng hệ thống 6 nguyên tắc phối màu (Monochromatic, Analogous, Complementary, Triadic, Split-Complementary, Tetradic), sử dụng sắc độ tối giản để giảm mỏi mắt cho người dùng khi duyệt menu thời gian dài.
  • Phân tách luồng quản trị chuyên sâu (Dual-flow Architecture): Khác biệt hoàn toàn với các đề tài trước đây vốn chỉ tập trung vào phía khách hàng, đồ án đã hoàn thiện trọn vẹn phân hệ Admin Dashboard với các tính năng quản lý nhân viên, kiểm soát trạng thái đơn hàng theo thời gian thực và xuất báo cáo thống kê doanh số.
+-----------------------------------------------------------------------------------+
|                           SO SÁNH CẢI TIẾN TRẢI NGHIỆM                            |
+------------------------------+---------------------------+------------------------+
| Vấn đề của các giải pháp cũ  | Giải pháp trên FoodSwift  | Hiệu quả định lượng    |
+------------------------------+---------------------------+------------------------+
| Giao diện quảng cáo rối mắt  | Layout tối giản, tập      | Giảm 45% tải nhận thức |
| (ShopeeFood / GrabFood)      | trung vào hình ảnh món ăn | (Cognitive Load)       |
+------------------------------+---------------------------+------------------------+
| Khoảng trắng thừa, mất cân   | Hệ thống 8-point Grid     | Tăng 35% mật độ thông  |
| bằng (Rocket Academy)        | căn chỉnh tự động         | tin hữu ích            |
+------------------------------+---------------------------+------------------------+
| Thiếu bắt lỗi và điều hướng  | Phản hồi trạng thái tức   | Giảm 65% tỷ lệ phát    |
| (Starbucks App)              | thời, xác thực Form chặn  | sinh lỗi thao tác      |
+------------------------------+---------------------------+------------------------+

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

Kịch bản sử dụng thực tế (Real-world Use Cases)

  • Kịch bản Khách hàng: Thực khách tại khu vực Hà Nội có nhu cầu dùng bữa chay thanh tịnh truy cập ứng dụng, tìm kiếm danh mục "Món chay đặc sắc", xem đánh giá thực tế kèm hình ảnh, thêm món vào giỏ, áp mã giảm giá khai trương và hoàn tất thanh toán trong 3 bước chạm.
  • Kịch bản Quản trị nhà hàng: Bộ phận thu ngân nhận thông báo đơn hàng mới, kiểm tra số lượng nguyên liệu sẵn có, bấm "Xác nhận đơn", hệ thống tự động chuyển trạng thái sang "Đang chuẩn bị" và điều phối nhân viên giao hàng.
[Khách chọn món & Apply Voucher] ──> [Bấm Đặt hàng] ──> [Admin nhận thông báo & Xác nhận] ──> [Chuyển trạng thái Vận chuyển] ──> [Khách nhận hàng & Đánh giá]

Yêu cầu triển khai hệ thống (System & Deployment Requirements)

+-----------------------+-----------------------------------------------------------+
| Phân hệ               | Cấu hình tối thiểu / Công nghệ khuyến nghị                |
+-----------------------+-----------------------------------------------------------+
| Thiết bị di động      | - Android 8.0 (API Level 26) trở lên hoặc iOS 13.0 trở lên|
| (Khách hàng)          | - Màn hình cảm ứng độ phân giải tối thiểu 720 x 1280 px   |
|                       | - RAM tối thiểu 2GB, kết nối mạng 3G/4G/5G/Wi-Fi          |
+-----------------------+-----------------------------------------------------------+
| Máy trạm quản trị     | - Trình duyệt web hiện đại (Chrome 110+, Edge, Safari 15+)|
| (Admin Web Portal)    | - Màn hình Full HD (1920 x 1080 px)                       |
|                       | - RAM 8GB, CPU Core i3 thế hệ 10 hoặc tương đương         |
+-----------------------+-----------------------------------------------------------+
| Máy chủ Backend & DB  | - Cloud VPS (Ubuntu 22.04 LTS, 2 vCPU, 4GB RAM, SSD 50GB) |
| (Production Server)   | - Web Server: Nginx Reverse Proxy với chứng chỉ SSL/TLS   |
|                       | - Database: MySQL 8.0 hoặc PostgreSQL 15                  |
+-----------------------+-----------------------------------------------------------+

Lộ trình triển khai 4 giai đoạn (Implementation Roadmap)

[Giai đoạn 1: Q1/2025] ──> [Giai đoạn 2: Q2/2025] ──> [Giai đoạn 3: Q3/2025] ──> [Giai đoạn 4: Q4/2025]
    Chuyển giao UI/UX         Xây dựng Backend &         Thử nghiệm Beta &         Vận hành chính thức &
    & Design Tokens          Mobile App (Flutter)       UAT tại Nhà hàng          Mở rộng đa chi nhánh
  • Giai đoạn 1 (Tháng 1 - Tháng 2): Xuất toàn bộ Design Tokens, Assets và Component Specs từ Figma; thiết lập Database Schema trên môi trường Staging.
  • Giai đoạn 2 (Tháng 3 - Tháng 5): Lập trình ứng dụng di động đa nền tảng (Flutter) và xây dựng hệ thống API RESTful kết nối cơ sở dữ liệu.
  • Giai đoạn 3 (Tháng 6 - Tháng 7): Triển khai thử nghiệm phiên bản Beta nội bộ tại Nhà hàng Sen Vàng (34 Quảng Bá, Tây Hồ, Hà Nội), tối ưu hiệu năng dựa trên phản hồi của 100 khách hàng đầu tiên.
  • Giai đoạn 4 (Tháng 8 trở đi): Phát hành chính thức trên Google Play Store và Apple App Store; mở rộng tích hợp phân hệ đặt bàn trực tiếp.

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

Hạn chế kỹ thuật

  • Tính chất tĩnh của mẫu thử: Sản phẩm hiện dừng lại ở mức High-fidelity Prototype tương tác mô phỏng, dữ liệu chưa được lưu trữ thực tế trên đám mây thời gian thực.
  • Cổng thanh toán tự động: Chưa tích hợp trực tiếp SDK cổng thanh toán số (VNPay, MoMo, ZaloPay), các giao dịch trực tuyến mới dừng ở mức mô phỏng chuyển khoản ngân hàng.

Hướng phát triển trong tương lai

  • Tích hợp trí tuệ nhân tạo (AI Engine): Phát triển module AI gợi ý thực đơn dựa trên lịch sử đặt món, lượng calo tiêu thụ và sở thích ăn uống cá nhân của thực khách.
  • Phát triển giao diện Dark Mode tự động: Cung cấp chế độ nền tối theo cài đặt hệ thống của thiết bị nhằm tiết kiệm pin màn hình OLED và bảo vệ thị lực khi đặt món ban đêm.
  • Hệ thống theo dõi đơn hàng thời gian thực: Tích hợp Google Maps API cho phép khách hàng theo dõi vị trí shipper trên bản đồ trực tiếp.

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

+-----------------------------------------------------------------------------------+
|                             GIÁ TRỊ CHO TỪNG ĐỐI TƯỢNG                            |
+----------------------+------------------------------------------------------------+
| Sinh viên / Học viên | Nắm vững quy trình thiết kế UI/UX bài bản từ UCD,          |
| ngành Multimedia/CNTT| Wireframing đến Design System và chuẩn hóa cơ sở dữ liệu   |
+----------------------+------------------------------------------------------------+
| Lập trình viên       | Tiết kiệm 40% thời gian xây dựng giao diện nhờ hệ thống    |
| (Frontend/Backend)   | Design Tokens và sơ đồ thực thể dữ liệu rõ ràng            |
+----------------------+------------------------------------------------------------+
| Doanh nghiệp F&B /   | Sở hữu kênh bán hàng trực tiếp độc lập, cắt giảm 20-30%    |
| Chủ nhà hàng         | phí hoa hồng trung gian và tăng 35% độ nhận diện thương hiệu|
+----------------------+------------------------------------------------------------+
| Nhà nghiên cứu       | Cung cấp dữ liệu khảo sát thực chứng (N=128) về xu hướng    |
| trải nghiệm số       | chuyển dịch hành vi tiêu dùng ẩm thực chay trực tuyến      |
+----------------------+------------------------------------------------------------+

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

1. Yêu cầu kỹ thuật tối thiểu để chuyển giao thiết kế sang giai đoạn lập trình là gì?

Đội ngũ phát triển cần truy cập vào file gốc Figma chứa hệ thống Component Styles (Colors, Typography 16pt, Spacing 8pt Grid) và tài liệu đặc tả API đi kèm sơ đồ thực thể cơ sở dữ liệu 10 bảng. Về mặt phần cứng, máy chủ Backend khuyến nghị tối thiểu 2 vCPU, 4GB RAM và hệ điều hành Ubuntu 22.04 LTS.

2. Thiết kế của FoodSwift xử lý bài toán quá tải thông tin như thế nào?

Ứng dụng sử dụng quy tắc phân cấp thị giác (Visual Hierarchy) dạng kim tự tháp: hình ảnh và tên món ăn chiếm vị trí trung tâm, giá cả được làm nổi bật với màu sắc tương phản, các thông tin phụ trợ (thành phần dinh dưỡng, đánh giá) được gom nhóm trong các thẻ Card riêng biệt với khoảng cách lề đạt chuẩn 16px.

3. Hệ thống có khả năng mở rộng cho chuỗi nhiều chi nhánh không?

Có. Thiết kế cơ sở dữ liệu đã chuẩn hóa bảng NHAN_VIEN và SAN_PHAM cho phép mở rộng thêm trường MaChiNhanh để quản lý tồn kho và đơn hàng phân tán theo từng điểm bán mà không làm thay đổi cấu trúc cốt lõi của giao diện người dùng.

4. Chi phí ước tính để vận hành hệ thống độc lập này so với việc thuê sàn TMĐT?

Chi phí ban đầu gồm duy trì máy chủ Cloud VPS và tên miền (khoảng 1.500.000 - 3.000.000 VNĐ/tháng). Với doanh thu nhà hàng đạt 100.000.000 VNĐ/tháng, việc tự vận hành giúp nhà hàng tiết kiệm từ 20.000.000 đến 30.000.000 VNĐ chi phí hoa hồng mỗi tháng, hoàn vốn đầu tư phần mềm chỉ sau 3 - 6 tháng.

5. Làm thế nào để đảm bảo tính nhất quán giữa bản thiết kế và sản phẩm thực tế?

Áp dụng quy trình kiểm soát chất lượng Design-to-Code bằng cách sử dụng chung một hệ thống quy chuẩn Design Tokens (mã màu Hex, kích thước font px/rem, kích thước icon 24x24 px). Mọi thay đổi về giao diện đều phải được đồng bộ hóa từ Figma sang kho mã nguồn thông qua tài liệu bàn giao kỹ thuật (Design Specs).

Kết luận

Đồ án tốt nghiệp "Thiết kế giao diện và trải nghiệm người dùng ứng dụng bán đồ ăn cho nhà hàng Sen Vàng" của sinh viên Nguyễn Thị Ngọc Minh đã hoàn thành xuất sắc các mục tiêu nghiên cứu và ứng dụng thực tiễn đề ra. Bằng việc kết hợp chặt chẽ giữa cơ sở lý thuyết thị giác, nguyên tắc phối màu công thái học và phương pháp thiết kế lấy người dùng làm trung tâm (UCD), dự án đã xây dựng một giải pháp giao diện số tối ưu, hiện đại và thân thiện cho thương hiệu Sen Vàng.

Những đóng góp chính của đề tài không chỉ dừng lại ở hơn 60 màn hình giao diện trực quan và mẫu thử tương tác hoàn chỉnh trên Figma, mà còn cung cấp một bản thiết kế kiến trúc hệ thống và cơ sở dữ liệu 10 thực thể chuẩn hóa, tạo nền tảng vững chắc cho quá trình lập trình phần mềm tiếp theo. Đồ án là tài liệu tham khảo giá trị cho sinh viên chuyên ngành Công nghệ Đa phương tiện, đồng thời mở ra hướng đi thực tế cho các doanh nghiệp F&B trong tiến trình tự chủ chuyển đổi số và nâng cao trải nghiệm khách hàng.