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

Sự phát triển của công nghệ thông tin cùng xu hướng chuyển dịch số trong thương mại điện tử đã làm thay đổi hành vi tiêu dùng, đặc biệt trong lĩnh vực chăm sóc sắc đẹp và sức khỏe cá nhân. Đối với ngành hàng mỹ phẩm, việc kinh doanh trực tuyến đặt ra nhiều bài toán đặc thù về trải nghiệm người dùng, mức độ nhận diện thương hiệu và sự tin cậy đối với chất lượng sản phẩm.

Đề tài "Hệ thống quản lý bán hàng mỹ phẩm trực tuyến" được nhóm tác giả Đoàn Hồng Phương Ngọc, Nguyễn Thúy Hằng và Trần Bảo Long thực hiện dưới sự hướng dẫn của ThS. Hà Lê Hoài Trung tại Khoa Công nghệ Thông tin, Trường Đại học Tôn Đức Thắng (năm 2020) trong khuôn khổ đồ án môn Thiết kế giao diện người dùng. Đề tài hướng đến việc nghiên cứu, phân tích nhu cầu thị trường và xây dựng mô hình giao diện website bán mỹ phẩm mang tên ICE (ICE.vn) với thông điệp "vẻ đẹp luôn trường tồn mãi với thời gian".

Mục tiêu và nhiệm vụ nghiên cứu của đồ án bao gồm:

  1. Phân tích bối cảnh thị trường thương mại điện tử mỹ phẩm, nhận diện điểm mạnh, điểm yếu, cơ hội và thách thức (SWOT) từ các nền tảng hiện hữu như Shopee, Tiki và các thương hiệu quốc tế như Dior, Chanel.
  2. Khảo sát thực tế nhu cầu, thói quen tiêu dùng, khó khăn và tiêu chí tìm kiếm sản phẩm của khách hàng khi mua sắm mỹ phẩm trực tuyến.
  3. Xác định các nhóm đối tượng liên quan trong hệ thống, thiết lập ma trận phân quyền vai trò và trách nhiệm giữa khách hàng, nhân viên, quản trị viên và người quản lý.
  4. Xây dựng hồ sơ chân dung người dùng (Personas) theo từng nhóm tuổi và xây dựng kịch bản trải nghiệm người dùng (Storyboard).
  5. Ứng dụng công cụ Figma để thiết kế hoàn chỉnh hệ thống giao diện từ sơ đồ tổng quan, khung xương giao diện (Wireframe) đến các bản mẫu tương tác (Prototype), đặc biệt chú trọng tính năng thử mỹ phẩm thực tế ảo ("Try on").

Về đối tượng và phạm vi nghiên cứu:

  • Đối tượng nghiên cứu: Quy trình thiết kế trải nghiệm người dùng (UX) và giao diện người dùng (UI) cho hệ thống quản lý và kinh doanh mỹ phẩm trực tuyến.
  • Phạm vi không gian và thời gian: Đồ án được thực hiện tại Trường Đại học Tôn Đức Thắng, Thành phố Hồ Chí Minh, hoàn thành vào năm 2020.
  • Phạm vi chức năng: Tập trung vào phân tích nghiệp vụ, khảo sát người dùng và xây dựng bộ nguyên mẫu giao diện (UI Prototype) trên công cụ Figma cho 4 nhóm đối tượng người dùng; chưa đi sâu vào triển khai lập trình mã nguồn hoàn chỉnh ở tầng cơ sở dữ liệu và hệ thống backend.

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

Đồ án vận dụng các nguyên lý thiết kế tương tác người - máy, quy trình thiết kế giao diện chuẩn trong công nghệ thông tin và phương pháp luận nghiên cứu người dùng, bao gồm:

Khung lý thuyết và mô hình ứng dụng

  • Mô hình phân tích SWOT: Đánh giá tổng quan năng lực cạnh tranh, nhận diện điểm mạnh (Strength), điểm yếu (Weakness), cơ hội (Opportunity) và thách thức (Threat) của mô hình kinh doanh mỹ phẩm trực tuyến so với các đối thủ trên thị trường.
  • Mô hình xây dựng chân dung người dùng (Personas): Phân loại đối tượng mục tiêu thành các hồ sơ đại diện theo độ tuổi (18, 25, 30, 35 và 40 tuổi) nhằm nắm bắt động cơ mua sắm, thói quen công nghệ và nhu cầu chăm sóc da riêng biệt.
  • Quy trình thiết kế UI/UX theo các cấp độ: Tiến hành từ nghiên cứu yêu cầu, xây dựng sơ đồ tổng quan hệ thống, vẽ khung cấu trúc thông tin (Wireframe) đến xây dựng bản mẫu tương tác chi tiết (Interactive Prototype).
  • Kiểm thử chấp nhận người dùng (User Acceptance Testing - UAT): Phương pháp luận kiểm tra mức độ đáp ứng của giao diện đối với yêu cầu nghiệp vụ và sự thuận tiện của người sử dụng.

Phương pháp nghiên cứu thực tế

  • Phương pháp khảo sát định lượng: Thiết kế bảng câu hỏi khảo sát trực tuyến qua công cụ Google Forms (đường dẫn: https://forms.gle/ARjYBQWZUC8MnmQ57), thu thập dữ liệu từ người dùng tiềm năng xoay quanh các yếu tố: độ tuổi, giới tính, học vấn, nghề nghiệp, thu nhập, rào cản mua sắm online, tiêu chí chọn sản phẩm và kênh tiếp nhận hỗ trợ.
  • Phương pháp phân tích - tổng hợp: So sánh đối chiếu các tính năng tương tác của sàn thương mại điện tử quy mô lớn tại Việt Nam (Shopee với lưu lượng truy cập hơn 50 triệu lượt/tháng, Tiki) và các website thời trang, mỹ phẩm quốc tế.
  • Phương pháp mô hình hóa nghiệp vụ: Lập bảng biểu chi tiết hóa vai trò, trách nhiệm và danh sách thuộc tính chức năng của từng tác nhân trong hệ thống.

Thiết kế và triển khai

Hệ thống giao diện website ICE.vn được nhóm tác giả thiết kế trên nền tảng Figma, tập trung giải quyết trải nghiệm mua sắm tiện lợi, hiện đại và bảo mật cho người dùng.

Phân quyền vai trò và trách nhiệm hệ thống

Hệ thống xác định 4 tác nhân chính tương tác với các quyền hạn cụ thể:

Đối tượng Trách nhiệm chính
Khách hàng Đảm bảo độ tuổi quy định (từ 18 tuổi hoặc có giám sát); đăng ký/quản lý tài khoản cá nhân; tìm kiếm và chọn mua hàng; thanh toán qua COD, thẻ tín dụng hoặc tại showroom; theo dõi đơn hàng; viết đánh giá sản phẩm sau mua; tương tác hỗ trợ qua hotline/chatbox/email.
Nhân viên Quản lý và cập nhật thông tin sản phẩm, hình ảnh, giá cả, chương trình khuyến mãi; bảo mật tài khoản được cấp; xử lý và cập nhật trạng thái đơn hàng; tư vấn và hỗ trợ giải đáp thắc mắc của khách hàng theo quy chuẩn; theo dõi thống kê số liệu bán hàng.
Quản trị viên Quản lý và cập nhật bài viết tin tức, blog làm đẹp; kiểm duyệt và lọc bình luận không phù hợp; quản lý tài khoản người dùng và xử lý sự cố; bảo mật hệ thống; cấu hình, thêm mới tính năng và sửa lỗi website dựa trên phản hồi của người dùng.
Quản lý Giám sát toàn bộ dữ liệu nhân viên và khách hàng; kiểm duyệt tính chính xác của thông tin sản phẩm và chính sách giá; theo dõi, phân tích báo cáo thống kê doanh thu và hành vi khách hàng để hoạch định chiến lược kinh doanh, marketing.

Cấu trúc màn hình và luồng giao diện mẫu (Figma Prototype)

Đồ án đã mô hình hóa chi tiết 19 màn hình nguyên mẫu (Prototype) trải dài toàn bộ quy trình mua hàng và quản trị:

  • Module xác thực và tài khoản cá nhân: Màn hình đăng nhập, đăng ký tài khoản mới, hỗ trợ đăng nhập nhanh qua liên kết Facebook và trang quản lý/chỉnh sửa thông tin cá nhân.
  • Module duyệt và tìm kiếm sản phẩm: Trang chủ hiển thị thanh điều hướng, banner trình chiếu (Slideshow), danh sách sản phẩm bán chạy và ưu đãi; trang danh mục sản phẩm phân cấp theo thương hiệu và công dụng; thanh công cụ tìm kiếm gợi ý từ khóa dựa trên thói quen người dùng.
  • Module chi tiết sản phẩm và tương tác: Hiển thị thông số sản phẩm, giá bán, thành phần, hệ thống bình luận - đánh giá từ người mua trước và tính năng gửi câu hỏi tư vấn trực tiếp qua email.
  • Module tính năng trang điểm ảo ("Try on"): Ứng dụng công nghệ xử lý ảnh và nhận dạng khuôn mặt, cho phép khách hàng tải ảnh từ thư viện hoặc sử dụng camera để thử trực tiếp các gam màu son môi, kẻ mắt, kem nền lên khuôn mặt trước khi quyết định mua sắm.
  • Module giỏ hàng và thanh toán: Xem lại danh mục sản phẩm đã chọn, điều chỉnh số lượng, xuất hóa đơn tạm tính và hỗ trợ ba phương thức thanh toán (thanh toán tại showroom, giao hàng thu tiền COD, thanh toán online qua thẻ tín dụng).
  • Module hậu mãi và quản lý đơn hàng: Giao diện theo dõi hành trình vận chuyển đơn hàng qua từng giai đoạn (chờ xác nhận, chờ vận chuyển, chờ giao hàng), xem lại lịch sử hóa đơn chi tiết và biểu mẫu chấm điểm, viết nhận xét đánh giá chất lượng sản phẩm sau khi nhận hàng.

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

Chương 1 – Giới thiệu chung

Chương này giới thiệu tổng quan về ý tưởng phát triển website thương mại điện tử ICE.vn. Tác giả định vị ICE là chuỗi bán lẻ mỹ phẩm phân phối chính hãng cho 15 thương hiệu quốc tế (Paula's Choice, Vichy, Bioderma, La Roche-Posay, Murad,...). Mục tiêu của website là tạo ra một kênh bán lẻ đạt chuẩn SEO, hỗ trợ bảo mật thông tin giao dịch bằng giao thức mã hóa SSL, tích hợp công cụ đánh giá sản phẩm sau mua để xây dựng niềm tin với khách hàng, đồng thời triển khai tính năng thử trang điểm ảo "Try on" nhằm nâng cao trải nghiệm mua sắm từ xa mà không cần trực tiếp đến showroom.

Chương 2 – Phân tích

Chương 2 trình bày toàn bộ quá trình khảo sát và phân tích yêu cầu nghiệp vụ:

  • Phân tích hiện trạng và tác nhân: Xác định 4 nhóm đối tượng chính (Khách hàng, Nhân viên, Quản trị viên, Quản lý) và chi tiết hóa bảng thuộc tính chức năng hệ thống.
  • Ma trận phân tích SWOT: Làm rõ điểm mạnh của các sàn thương mại điện tử lớn (Shopee với tính năng thử son qua VR, giao diện thân thiện; Tiki với uy tín hàng chính hãng) và chỉ ra các thách thức thị trường như tình trạng hàng giả trôi nổi, thời gian kiểm định hàng hóa kéo dài và chi phí duy trì hệ thống cao đối với các đơn vị quy mô vừa và nhỏ.
  • Bảng thuật ngữ hệ thống: Chuẩn hóa các khái niệm sử dụng trong đồ án như COD, Hotline, Chatbox, Showroom, Try on, Slideshow, Popup, FAQ.
  • Kết quả khảo sát người dùng: Phân tích dữ liệu từ bảng câu hỏi Google Forms qua 20 biểu đồ khảo sát (từ Hình 1 đến Hình 20) về độ tuổi, giới tính, thu nhập, rào cản mua hàng trực tuyến (lo ngại hàng giả, lộ thông tin, thủ tục phức tạp), kênh tiếp cận thông tin (review Youtube, quảng cáo) và thiết bị truy cập.
  • Mô hình Personas và Storyboard: Xây dựng 5 hồ sơ khách hàng đại diện cho các lứa tuổi 18, 25, 30, 35 và 40 tuổi nhằm phục vụ việc thiết kế luồng tương tác phù hợp.

Chương 3 – Thiết kế giao diện

Chương 3 tập trung thể hiện các kết quả thiết kế trực quan trên công cụ Figma:

  • Trình bày sơ đồ tổng quan luồng vận hành hệ thống (Hình 26).
  • Xây dựng hệ thống khung xương giao diện (Wireframe) cho Trang chủ (Hình 27), Danh mục sản phẩm (Hình 28) và Trang chi tiết sản phẩm (Hình 29).
  • Thiết kế chi tiết 19 màn hình Prototype tương tác (từ Hình 30 đến Hình 48) bao quát các quy trình nghiệp vụ: Đăng nhập/Đăng ký (bao gồm đăng nhập bằng Facebook), Thông tin cá nhân, Trang chủ, Danh mục sản phẩm, Tìm kiếm, Chi tiết sản phẩm & Hỏi đáp qua mail, Giỏ hàng, Hóa đơn thanh toán, Theo dõi hành trình đơn hàng, Đánh giá sản phẩm và các bước thao tác tính năng trang điểm ảo Try on (tải ảnh từ thư viện, thử nghiệm các màu sắc son môi/mỹ phẩm).

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

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

    • Hoàn thành báo cáo phân tích yêu cầu nghiệp vụ chi tiết cho một website thương mại điện tử chuyên ngành mỹ phẩm, bao gồm bảng phân quyền 4 cấp độ người dùng.
    • Thu thập và phân tích dữ liệu khảo sát thực tế qua 20 chỉ số hành vi, phục vụ trực tiếp cho việc xây dựng 5 bộ hồ sơ Personas (độ tuổi 18, 25, 30, 35, 40).
    • Hoàn thiện bộ thiết kế giao diện hoàn chỉnh trên công cụ Figma với 3 bản vẽ Wireframe và 19 màn hình Prototype tương tác đầy đủ các luồng chức năng mua sắm, thanh toán và hậu mãi.
    • Thiết kế luồng trải nghiệm cho tính năng trang điểm ảo "Try on" hỗ trợ người dùng thử màu sắc sản phẩm trực tuyến qua hình ảnh cá nhân.
  • Đóng góp của đồ án:

    • Cung cấp tài liệu quy trình thiết kế UI/UX bài bản cho hệ thống bán lẻ mỹ phẩm, kết hợp chặt chẽ giữa nghiên cứu thị trường thực tế và xây dựng bản mẫu tương tác.
    • Đề xuất giải pháp giao diện tối giản, tập trung vào việc giảm thiểu rào cản mua sắm online qua hệ thống minh bạch hóa thông tin (đánh giá sau mua, tư vấn đa kênh, thử nghiệm sản phẩm ảo).

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

  • Hạn chế:
    • Đồ án thuộc khuôn khổ môn học Thiết kế giao diện người dùng nên phạm vi sản phẩm dừng lại ở mức xây dựng bản mẫu giao diện tương tác (Figma Prototype), chưa tiến hành lập trình thực tế mã nguồn (Frontend/Backend) và chưa tích hợp hệ quản trị cơ sở dữ liệu.
    • Tính năng "Try on" mới chỉ được mô hình hóa ở cấp độ kịch bản tương tác giao diện người dùng, chưa tích hợp thuật toán xử lý ảnh và thị giác máy tính trong môi trường phần mềm vận hành thực tế.
  • Hướng nghiên cứu và phát triển:
    • Triển khai xây dựng hệ thống phần mềm hoàn chỉnh dựa trên bộ thiết kế Figma, kết nối cổng thanh toán điện tử và hệ thống cơ sở dữ liệu quản lý kho vận.
    • Lập trình tích hợp mô hình trí tuệ nhân tạo/thị giác máy tính để nhận diện khuôn mặt và mô phỏng màu sắc mỹ phẩm thời gian thực qua camera thiết bị.
    • Thực hiện các đợt kiểm thử chấp nhận người dùng (UAT) trên diện rộng để đánh giá và tối ưu hóa trải nghiệm giao diện người dùng dựa trên phản hồi thực tế.

Giá trị tham khảo

Đồ án là tài liệu tham khảo hữu ích cho:

  • Sinh viên ngành Công nghệ thông tin, Hệ thống thông tin, Kỹ thuật phần mềm: Nắm bắt phương pháp khảo sát người dùng, phân tích đối tượng liên quan, xây dựng Personas và triển khai thiết kế Wireframe, Prototype cho đồ án môn học Thiết kế giao diện người dùng.
  • Người nghiên cứu và thiết kế UI/UX: Tham khảo cấu trúc bố cục, luồng nghiệp vụ thương mại điện tử bán lẻ và cách tiếp cận thiết kế tính năng trải nghiệm thực tế ảo (Try-on) cho ngành hàng mỹ phẩm.

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

1. Tính năng "Try on" (trang điểm ảo) trong đề tài được thiết kế nhằm mục đích gì và hoạt động ra sao?
Tính năng "Try on" được thiết kế nhằm giúp khách hàng mua sắm trực tuyến có thể thử nghiệm trực tiếp các sản phẩm như son môi, kẻ mắt, kem nền ngay tại nhà. Giao diện cho phép người dùng sử dụng máy ảnh hoặc tải ảnh chân dung có sẵn từ thư viện để hệ thống nhận dạng khuôn mặt và mô phỏng hiển thị các màu sắc sản phẩm khác nhau.

2. Hệ thống quản lý bán hàng ICE.vn phân chia bao nhiêu nhóm đối tượng người dùng và gồm những nhóm nào?
Hệ thống phân chia thành 4 nhóm đối tượng chính, gồm có: Khách hàng, Nhân viên, Quản trị viên và Quản lý. Mỗi nhóm đối tượng được quy định danh mục vai trò, trách nhiệm và quyền hạn xử lý riêng biệt trên hệ thống.

3. Nhóm tác giả đã sử dụng công cụ nào để thiết kế giao diện và có bao nhiêu màn hình prototype được xây dựng?
Nhóm tác giả sử dụng công cụ thiết kế Figma để xây dựng toàn bộ giao diện, bao gồm 3 bản vẽ khung xương (Wireframe) và 19 màn hình bản mẫu tương tác (Prototype) từ giai đoạn đăng nhập, tìm kiếm, giỏ hàng đến thanh toán, thử trang điểm ảo và đánh giá sau mua.

4. Khách hàng trên hệ thống ICE.vn được hỗ trợ những phương thức thanh toán nào?
Theo đặc tả thiết kế, hệ thống hỗ trợ 3 phương thức thanh toán: thanh toán trực tiếp tại showroom, thanh toán khi nhận hàng (COD) và thanh toán trực tuyến qua thẻ tín dụng.

5. Thước đo chính được sử dụng để đánh giá hiệu quả của trang web bán hàng mỹ phẩm trong đề tài là gì?
Theo nội dung phân tích của đồ án, thước đo đánh giá chính cho hiệu quả hoạt động của trang web bán hàng mỹ phẩm là doanh thu của sản phẩm bán được trên hệ thống.


Kết luận

Đồ án "Hệ thống quản lý bán hàng mỹ phẩm trực tuyến" của nhóm sinh viên Trường Đại học Tôn Đức Thắng đã hoàn thành toàn diện quy trình phân tích nghiệp vụ và thiết kế giao diện người dùng cho nền tảng thương mại điện tử ICE.vn. Thông qua việc kết hợp giữa phân tích thị trường (SWOT), khảo sát định lượng người dùng và xây dựng 5 bộ hồ sơ Personas theo độ tuổi, nhóm tác giả đã thiết kế thành công bộ nguyên mẫu 19 màn hình tương tác trên công cụ Figma. Đề tài thể hiện tính ứng dụng cao trong việc giải quyết bài toán trải nghiệm mua sắm mỹ phẩm trực tuyến, nổi bật là tính năng trang điểm ảo "Try on", đóng vai trò là tài liệu tham khảo thiết thực cho các nghiên cứu và dự án phát triển phần mềm thương mại điện tử chuyên ngành.