Giới thiệu dự án

Thương mại điện tử trong ngành thực phẩm tươi sống và bánh ngọt (F&B Pastry E-commerce) tại Việt Nam đang chứng kiến sự tăng trưởng vượt bậc với mức tăng trưởng kép hàng năm (CAGR) đạt trên 18.5%. Tuy nhiên, việc kinh doanh bánh ngọt trực tuyến gặp phải nhiều rào cản đặc thù về trải nghiệm người dùng (UX), hiển thị đa thiết bị và tính minh bạch của nguyên liệu. Đồ án "Thiết kế web bán bánh ngọt (Fairy Bakery)" được thực hiện bởi nhóm sinh viên Khoa Đa phương tiện – Học viện Công nghệ Bưu chính Viễn thông (PTIT), dưới sự hướng dẫn của ThS. Nguyễn Thị Thanh Tâm, nhằm giải quyết triệt để bài toán xây dựng nền tảng website chuyên biệt, kết hợp thương mại hóa sản phẩm và chia sẻ tri thức làm bánh.

+-----------------------------------------------------------------------+
|                             FAIRY BAKERY                              |
|   +---------------------------------------------------------------+   |
|   | [1. Khảo sát UX] -> [2. Use Case & UI] -> [3. Responsive Dev] |   |
|   +---------------------------------------------------------------+   |
|         |                     |                     |                 |
|   74.3% Nữ giới        10 Use Cases cốt lõi     3 Màn hình chuẩn      |
|   97.1% Thiết bị di động  3-Click Checkout        (1440 - 768 - 428px) |
+-----------------------------------------------------------------------+

Vấn đề thực tiễn và bài toán đặt ra

Qua nghiên cứu thực địa và dữ liệu khảo sát trực tiếp:

  • 97.1% người dùng truy cập website bán hàng bằng thiết bị di động (Mobile phone), nhưng phần lớn các website hiện hành chưa tối ưu trải nghiệm chạm vuốt và tốc độ tải trang.
  • 85.7% khách hàng quan tâm đặc biệt tới nguồn gốc xuất xứ nguyên liệu và tiêu chuẩn an toàn thực phẩm.
  • 60.0% người dùng gặp trở ngại về tốc độ giao hàng và 48.0% lo ngại về tình trạng bánh bị biến dạng trong quá trình vận chuyển.
  • Tỷ lệ bỏ rơi giỏ hàng cao do quy trình thanh toán phức tạp, thiếu định vị trực quan cửa hàng (74.3% mong muốn tích hợp bản đồ số thay cho văn bản tĩnh).

Mục tiêu dự án

  1. Nghiên cứu hành vi người dùng chuyên sâu: Ứng dụng kết hợp 5 phương pháp thu thập dữ liệu (Phỏng vấn sâu, Khảo sát bảng hỏi số lượng lớn, Thảo luận nhóm tập trung - Focus Group, Tiếp cận tự nhiên - Naturalistic Observation, Nghiên cứu tài liệu đối thủ) để xây dựng tập chân dung khách hàng (User Personas).
  2. Thiết kế hệ thống giao diện chuẩn UX/UI: Xây dựng hệ thống lưới (Grid System) đa tầng hỗ trợ triệt để Responsive Web Design trên các độ phân giải: Desktop (1440px), Tablet (768px) và Mobile (428px).
  3. Mô hình hóa nghiệp vụ: Chuẩn hóa sơ đồ Use Case và quy trình tương tác với 10 ca sử dụng cốt lõi, phục vụ 5 nhóm tác nhân trong hệ sinh thái.
  4. Tích hợp module giá trị gia tăng: Kết hợp phân hệ Bán hàng (E-shop) với phân hệ Cẩm nang & Công thức làm bánh (Recipe Blog - thu hút 65.7% tập khách hàng quan tâm) nhằm tối ưu hóa SEO và gia tăng tỷ lệ chuyển đổi (CR).

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ánh ngọt trực tuyến tại Việt Nam cho thấy sự phân hóa mạnh mẽ giữa các thương hiệu lớn:

Tiêu chí phân tích ABC Bakery Givral Bakery Fairy Bakery (Giải pháp đề xuất)
Định vị sản phẩm Đa dạng dòng bánh nướng, bánh mì truyền thống Bánh tươi cao cấp phong cách Pháp Bánh ngọt thủ công, nguyên liệu organic, cá nhân hóa
Trải nghiệm Mobile Giao diện thu nhỏ, chưa tối ưu responsive chuyên biệt Tải trang chậm, bố cục giỏ hàng nhiều bước Tối ưu hóa chuẩn Mobile-First (428px), lưới linh hoạt
Minh bạch nguyên liệu Cơ bản, không nhấn mạnh xuất xứ Có chứng nhận an toàn, thiếu chi tiết nguyên liệu Tích hợp chi tiết nguồn cung ứng (Bột Bình Đông, Đường Phú Yên)
Tương tác tri thức Không có Thiếu mục hướng dẫn làm bánh Module Recipe Blog chuyên sâu + Video hướng dẫn
Quy trình đặt hàng Truyền thống qua hotline/form Form đặt hàng phức tạp Luồng mua hàng tối ưu hóa dưới 3 bước (3-Click Rule)

Áp dụng phương pháp phân loại yêu cầu người dùng theo ma trận MoSCoW:

  • Must-have: Danh mục sản phẩm trực quan kèm bộ lọc đa tiêu chí (Giá, Loại bánh, Khuyến mãi), Giỏ hàng & Thanh toán đa phương thức, Định vị cửa hàng tương tác qua bản đồ số.
  • Should-have: Module Tin tức - Công thức làm bánh chuẩn SEO, Hệ thống đánh giá/phản hồi sản phẩm, Phóng to chi tiết sản phẩm (Image Zoom).
  • Could-have: Tích hợp live chat đa kênh góc 4h/8h (Facebook Messenger API), Đăng ký học làm bánh offline.
  • Won't-have (giai đoạn này): Cổng thanh toán quốc tế đa tiền tệ, Tracking vị trí Shipper thời gian thực qua WebSockets.

Thiết kế hệ thống

Kiến trúc thông tin (Information Architecture - IA) của website được xây dựng tuân thủ nguyên tắc 7±2 của Miller nhằm hạn chế quá tải nhận thức cho người dùng.

                        [FAIRY BAKERY CORE IA]
                                  |
    +---------------+-------------+-------------+---------------+
    |               |                           |               |
[Trang chủ]   [Về chúng tôi]             [Sản phẩm]        [Công thức & Blog]
    |               |                           |               |
    +- Banner CTA   +- Lịch sử thương hiệu      +- Bánh kem     +- Kỹ thuật làm bánh
    +- Best Seller  +- Chứng nhận nguyên liệu   +- Bánh sinh nhật+- Video Tutorial
    +- Flash Sale   +- Hệ thống cơ sở (Maps)    +- Bánh nướng   +- Q&A cộng đồng

Kiến trúc phân hệ và Luồng Use Case cốt lõi

Hệ thống phục vụ 5 nhóm tác nhân chính: Khách hàng (Customer), Quản trị viên (Admin), Bộ phận kinh doanh/Kho, Nhân viên giao hàng (Shipper), và Cổng thanh toán ngân hàng.

+---------------------------------------------------------------------------------+
|                                USE CASE OVERVIEW                                |
+---------------------------------------------------------------------------------+
| [Khách hàng] ----+---> (Đăng ký / Đăng nhập / Sửa thông tin)                   |
|                  +---> (Tìm kiếm & Lọc sản phẩm đa tiêu chí)                   |
|                  +---> (Thêm vào giỏ hàng & Áp dụng Coupon)                     |
|                  +---> (Thanh toán trực tuyến & Nhận thông báo)                 |
|                                                                                 |
| [Bộ phận KD] ----+---> (Kiểm tra & Duyệt đơn hàng)                             |
| [Shipper]   ----+---> (Cập nhật trạng thái giao nhận & Xác nhận giao hàng)     |
| [Admin]     ----+---> (Quản trị hệ thống, Danh mục & Nội dung Recipe)          |
+---------------------------------------------------------------------------------+

Quy chuẩn thiết kế giao diện (Design Tokens & Typography)

Hệ thống giao diện sử dụng phối màu đại diện cho ngành bánh ngọt: Tone màu chủ đạo là Nâu trầm (#4A2C11) và Cam pastel (#E88D43) kết hợp nền kem/be sáng, tạo cảm giác ấm cúng, sang trọng và kích thích vị giác.

  • Display Typography (Tiêu đề lớn, Tên thương hiệu): Font Pacifico (Cursiva/Script) – tạo nét mềm mại, thủ công, kích thước H1: 36px, H2: 24px.
  • Body Typography (Nội dung, Thông số): Font Roboto (Sans-serif) – trung tính, hiện đại, đa dạng độ đậm nhạt (Thin, Light, Regular, Medium, Bold, Black), cỡ chữ chuẩn 14px, khoảng cách dòng (line-height) gấp 2 lần cỡ chữ, letter-spacing: 0.12em.
:root {
  --primary-brown: #4a2c11;
  --accent-orange: #e88d43;
  --bg-cream: #faf5ef;
  --text-color: #2b2b2b;
  --font-heading: 'Pacifico', cursive;
  --font-body: 'Roboto', sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.017em;
  color: var(--text-color);
  background-color: var(--bg-cream);
}

h1, .brand-title {
  font-family: var(--font-heading);
  font-size: 36px;
  color: var(--primary-brown);
}

Methodology

Dự án áp dụng mô hình Design Thinking kết hợp Agile Scrum rút gọn gồm 4 Sprint (chu kỳ 2 tuần/Sprint):

  1. Sprint 1 (Empathize & Define): Triển khai khảo sát người dùng đa kênh, thu thập 150+ mẫu khảo sát hợp lệ, phân tích chân dung khách hàng và xây dựng ma trận yêu cầu.
  2. Sprint 2 (Ideate & Wireframing): Thiết lập Information Architecture, phác thảo Low-fidelity wireframe và định hình Design System.
  3. Sprint 3 (Prototyping & UI Design): Xây dựng High-fidelity prototype trên Figma, thiết lập lưới responsive đa độ phân giải, kiểm tra tỷ lệ tương phản màu WCAG 2.1 AA.
  4. Sprint 4 (Front-end Implementation & QA): Lập trình mã nguồn giao diện HTML5/CSS3/JavaScript ES6+, kiểm thử tương thích trình duyệt (Chrome, Safari, Edge) và nghiệm thu người dùng (UAT).

Implementation và kết quả

Development process

Quá trình lập trình Front-end tập trung vào việc hiện thực hóa hệ thống bố cục lưới (CSS Grid System & Flexbox) có khả năng co giãn linh hoạt theo 3 điểm ngắt (Breakpoints) tiêu chuẩn:

+-------------------+--------------------+--------------------+
| Desktop (1440px)  | Tablet (768px)     | Mobile (428px)     |
| 12 Columns        | 8 Columns          | 4 Columns          |
| Margin: 80px      | Margin: 32px       | Margin: 16px       |
| Gutter: 24px      | Gutter: 16px       | Gutter: 12px       |
+-------------------+--------------------+--------------------+

Mã nguồn triển khai hệ thống lưới linh hoạt (Responsive Grid)

/* Layout Core - CSS Grid & Responsive Breakpoints */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

/* Desktop Breakpoint */
@media screen and (min-width: 1025px) {
  .container {
    max-width: 1440px;
    padding: 0 80px;
  }
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* Tablet Breakpoint (iPad Pro 11") */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    max-width: 768px;
    padding: 0 32px;
  }
  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile Breakpoint (iPhone 14 Pro Max) */
@media screen and (max-width: 767px) {
  .container {
    max-width: 428px;
    padding: 0 16px;
  }
  .product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

Module Xử lý Giỏ hàng & Kiểm tra Dữ liệu Đơn hàng (JavaScript ES6+)

/**
 * Fairy Bakery Core Cart Engine
 * Handles item additions, reactive pricing calculation, and form validations.
 */
class BakeryCart {
  constructor() {
    this.cartItems = JSON.parse(localStorage.getItem('fb_cart')) || [];
    this.vatRate = 0.08; // 8% VAT
  }

  addItem(productId, name, price, quantity = 1, options = {}) {
    const existingIndex = this.cartItems.findIndex(
      item => item.id === productId && JSON.stringify(item.options) === JSON.stringify(options)
    );

    if (existingIndex > -1) {
      this.cartItems[existingIndex].quantity += quantity;
    } else {
      this.cartItems.push({
        id: productId,
        name: name,
        price: parseFloat(price),
        quantity: parseInt(quantity, 10),
        options: options
      });
    }
    this.syncStorage();
  }

  calculateTotals() {
    const subtotal = this.cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
    const tax = subtotal * this.vatRate;
    const shippingFee = subtotal > 300000 || subtotal === 0 ? 0 : 30000;
    const grandTotal = subtotal + tax + shippingFee;

    return {
      subtotal: subtotal.toFixed(0),
      tax: tax.toFixed(0),
      shippingFee: shippingFee.toFixed(0),
      grandTotal: grandTotal.toFixed(0)
    };
  }

  syncStorage() {
    localStorage.setItem('fb_cart', JSON.stringify(this.cartItems));
    window.dispatchEvent(new CustomEvent('cartUpdated', { detail: this.calculateTotals() }));
  }
}

Testing và validation

Hệ thống trải qua các giai đoạn kiểm thử nghiêm ngặt về tương thích giao diện và hiệu năng hiển thị:

  • Kiểm thử khả năng tương thích hiển thị (Cross-Device & Browser Testing): Kiểm thử trên Google Chrome v118+, Safari iOS 16+, Mozilla Firefox v119 và Microsoft Edge. Bố cục duy trì tính toàn vẹn 100% không bị vỡ khung hình (Layout Shift = 0.02).
  • Kiểm thử hiệu năng Google Lighthouse (Mobile Environment):
    • Performance: 92/100
    • Accessibility: 96/100 (Đảm bảo độ tương phản text/background đạt chuẩn WCAG AA)
    • Best Practices: 95/100
    • SEO: 98/100
  • User Acceptance Testing (UAT): Thực hiện thử nghiệm trên nhóm 30 người dùng đại diện (gồm 70% nữ giới độ tuổi 18-35). Thời gian hoàn thành tác vụ tìm kiếm và đặt 1 sản phẩm bánh sinh nhật giảm từ 3.5 phút (hệ thống truyền thống) xuống còn 1.2 phút (giảm 65.7% thời gian thao tác).

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

Hệ thống đã hoàn thiện toàn bộ 100% các phân hệ chức năng theo kế hoạch đề ra:

Hạng mục chức năng Trạng thái Đánh giá kỹ thuật & UX
Trang chủ (Home Page) Hoàn thành Banner động, Carousel sản phẩm nổi bật, CTA chuyển đổi cao
Về chúng tôi (About/Story) Hoàn thành Kể chuyện thương hiệu, tích hợp thông tin nguyên liệu Bình Đông/Phú Yên
Danh mục sản phẩm (Catalog) Hoàn thành Bộ lọc AJAX đa tầng, sắp xếp giá tăng/giảm, xem nhanh chi tiết
Trang chi tiết sản phẩm Hoàn thành Phóng to ảnh sắc nét, bảng thành phần dinh dưỡng, gợi ý sản phẩm
Tin tức & Công thức (Recipe) Hoàn thành Trình bày công thức chi tiết từng bước, nhúng Video hướng dẫn trực quan
Hệ thống Giỏ hàng & Checkout Hoàn thành Validate form thời gian thực, tích hợp bản đồ số định vị nhận hàng

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

  1. Mô hình Tích hợp Kép "Content-Commerce Hybrid": Khác biệt hoàn toàn với các website bán bánh truyền thống chỉ tập trung vào bán hàng tĩnh, Fairy Bakery tích hợp sâu module Công thức làm bánh (Recipe Blog) với Giỏ hàng. Người dùng khi xem công thức có thể bấm chọn mua ngay gói nguyên liệu tương ứng với 1 click, giải quyết nhu cầu của 65.7% khách hàng quan tâm đến kỹ thuật làm bánh.
  2. Cấu trúc Lưới Đa Điểm Ngắt Chuẩn Hóa: Thiết kế lưới chuyên biệt cho từng loại thiết bị với kích thước chiều cao và chiều ngang được đo lường chính xác theo độ phân giải phổ biến (Desktop 1440px x 4865px, Tablet 768px x 7348px, Mobile 428px x 6863px), đảm bảo bố cục responsive tự nhiên không phụ thuộc vào các framework cồng kềnh.
  3. Quy chuẩn Minh bạch Hóa Chuỗi Cung ứng: Đưa thông tin nguồn gốc xuất xứ nguyên liệu (Bột mì Bình Đông, Đường mía Phú Yên, Bao bì tự hủy Visingpack/Tân Tiến) thành một thuộc tính bắt buộc của sản phẩm, giúp giải tỏa 85.7% mối lo ngại về vệ sinh an toàn thực phẩm của khách hàng.

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

Kịch bản vận hành thực tế

  • Kịch bản 1: Mua bánh sự kiện/sinh nhật nhanh: Khách hàng văn phòng (23-40 tuổi) truy cập qua điện thoại, lọc danh mục "Bánh sinh nhật", chọn kích cỡ bánh, điền thông điệp ghi lên bánh, chọn ngày giờ giao hàng và định vị địa chỉ trực tiếp qua bản đồ chỉ trong 3 bước tương tác.
  • Kịch bản 2: Học làm bánh DIY tại nhà: Khách hàng nội trợ/sinh viên tìm kiếm công thức "Bánh Mousse dâu tây", tham khảo các bước làm và video hướng dẫn, sau đó click "Đặt mua bộ kit nguyên liệu" để nhận trọn gói vật liệu làm bánh tận nhà.

Yêu cầu triển khai hạ tầng kỹ thuật

  • Web Server: Nginx 1.24+ hỗ trợ HTTP/2 và nén Brotli/Gzip cho tài nguyên hình ảnh độ phân giải cao.
  • Node.js/Backend Runtime: Node.js v18 LTS hoặc PHP 8.2 (Laravel Core) phục vụ RESTful API endpoints.
  • Database: MySQL 8.0 / PostgreSQL 15 quản lý dữ liệu sản phẩm, đơn hàng và danh mục công thức.
  • CDN: Cloudflare tối ưu hóa phân phối hình ảnh bánh ngọt dung lượng lớn với định dạng WebP/AVIF.

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

Hạn chế hiện tại

  • Hệ thống hiện mới dừng lại ở mức độ hoàn thiện giao diện Front-end, prototype tương tác cao và mô phỏng luồng dữ liệu Client-side qua LocalStorage/Mock API; chưa hoàn thiện kết nối cơ sở dữ liệu phân tán ở Backend.
  • Chưa tích hợp hệ thống đo lường khoảng cách và tính phí vận chuyển động theo thời gian thực từ vị trí cửa hàng đến vị trí định vị GPS của khách hàng.

Hướng phát triển tiếp theo

  • Giai đoạn 1: Triển khai Backend RESTful API hoàn chỉnh với Node.js/Express, xác thực người dùng bằng JWT (JSON Web Token) và tích hợp cổng thanh toán VNPay / MoMo API.
  • Giai đoạn 2: Phát triển tính năng 3D Cake Customizer (WebGL / Three.js), cho phép khách hàng tự thiết kế mẫu bánh kem, phối màu và chọn phụ kiện trang trí trực quan trên không gian 3 chiều trước khi đặt hàng.
  • Giai đoạn 3: Ứng dụng thuật toán gợi ý (Recommendation System) dựa trên lịch sử mua sắm và chế độ ăn kiêng (ít đường, Keto, Gluten-free).

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

+-----------------------------------------------------------------------------+
|                            BENEFICIARY ECOSYSTEM                            |
+-----------------------------------------------------------------------------+
| [Sinh viên & Học viên Đa phương tiện]                                       |
| - Tài liệu tham khảo toàn diện về quy trình Design Thinking & UX Research.  |
| - Mẫu thiết kế chuẩn hóa hệ thống lưới đa thiết bị (Desktop, Tablet, App).  |
+-----------------------------------------------------------------------------+
| [Lập trình viên Front-end / UI Designer]                                   |
| - Kiến trúc CSS Grid/Flexbox thuần tối ưu không phụ thuộc framework nặng.   |
| - Mẫu code xử lý giỏ hàng Reactive và kỹ thuật Responsive Typography.      |
+-----------------------------------------------------------------------------+
| [Chủ doanh nghiệp / Cửa hàng Bánh ngọt F&B]                                 |
| - Giải pháp mẫu chuyển đổi số bán lẻ bánh tươi với chi phí tối ưu.          |
| - Mô hình kết hợp Content Marketing (Recipe) gia tăng 35-45% lượng Organic |
|   Traffic tự nhiên và niềm tin thương hiệu.                                 |
+-----------------------------------------------------------------------------+

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

1. Yêu cầu kỹ thuật tối thiểu để triển khai và chạy thử nghiệm website là gì?

Website được phát triển với cấu trúc Front-end chuẩn hóa, chỉ yêu cầu một Web Server cơ bản (như Apache hoặc Nginx) hoặc dịch vụ lưu trữ tĩnh (GitHub Pages, Vercel, Netlify) hỗ trợ HTML5/CSS3 và JavaScript ES6+. Để chạy môi trường phát triển cục bộ, người dùng chỉ cần cài đặt trình duyệt hiện đại (Chrome/Firefox/Edge) và công cụ Live Server trên Visual Studio Code.

2. Bố cục lưới của website xử lý như thế nào để tương thích với các màn hình dị biệt?

Hệ thống sử dụng hệ thống cột linh hoạt (Fluid Column Grid): 12 cột trên Desktop (tối đa 1440px), 8 cột trên Tablet (768px) và 4 cột trên Mobile (428px). Khi hiển thị trên các màn hình có tỷ lệ khác, thuộc tính margin hai bên sẽ tự động căn chỉnh (auto-margins) trong khi các gutter (khoảng cách cột 24px - 16px - 12px) giữ nguyên tỉ lệ nhận diện, ngăn ngừa hiện tượng tràn màn hình ngang.

3. Làm thế nào để tích hợp hệ thống bản đồ số mà không làm chậm tốc độ tải trang?

Địa chỉ cửa hàng được tích hợp thông qua Google Maps JavaScript API hoặc iframe nhúng được gắn cờ loading="lazy". Script của bản đồ chỉ được nạp bất đồng bộ (Asynchronous Loading) khi người dùng cuộn đến phân hệ "Liên hệ / Cơ sở tiệm bánh", giúp giảm thiểu dung lượng tải ban đầu và giữ chỉ số First Contentful Paint (FCP) dưới 1.2 giây.

4. Chi phí ước tính để duy trì và vận hành hệ thống trong thực tế là bao nhiêu?

Với quy mô một tiệm bánh độc lập phục vụ 5.000 - 10.000 lượt truy cập/tháng, chi phí hạ tầng hàng năm ước tính:

  • Tên miền (.vn / .com): ~300.000 - 750.000 VNĐ/năm.
  • Cloud VPS / Web Hosting (2 Core CPU, 4GB RAM): ~1.200.000 - 2.000.000 VNĐ/năm.
  • SSL Certificate & CDN: Miễn phí thông qua Cloudflare.
  • Tổng chi phí vận hành hạ tầng ước tính dưới 250.000 VNĐ/tháng.

5. Website giải quyết vấn đề bảo quản và giao hàng nguyên vẹn cho sản phẩm bánh kem như thế nào?

Về mặt giao diện và trải nghiệm, website bổ sung phân hệ hướng dẫn đóng gói chuyên dụng, cam kết tiêu chuẩn thùng giữ nhiệt chuyên dụng và hiển thị lưu ý về khung giờ giao hàng tối ưu. Đồng thời, form đặt hàng bắt buộc khách hàng xác nhận các mốc thời gian nhận bánh chính xác để hệ thống phân bổ tuyến giao nhanh nhất trong bán kính an toàn.

Kết luận

Đồ án "Thiết kế web bán bánh ngọt (Fairy Bakery)" của nhóm sinh viên Khoa Đa phương tiện – Học viện Công nghệ Bưu chính Viễn thông là một công trình nghiên cứu và thực nghiệm bài bản, kết nối chặt chẽ giữa lý thuyết thiết kế tương tác người dùng (UI/UX) và kỹ thuật phát triển web hiện đại. Bằng việc phân tích sâu sắc các dữ liệu khảo sát định lượng (74.3% người dùng nữ, 97.1% truy cập mobile), dự án đã giải quyết thành công bài toán tối ưu hóa trải nghiệm mua sắm thực phẩm ngọt trực tuyến thông qua hệ thống lưới responsive 3 tầng chuẩn xác, quy trình đặt hàng tối giản và phân hệ chia sẻ công thức làm bánh sáng tạo. Đây là nền tảng vững chắc có tính ứng dụng thương mại cao, sẵn sàng để tiếp tục mở rộng phát triển thành một hệ sinh thái thương mại điện tử F&B toàn diện.