Báo cáo Tương tác người-máy: Thiết kế giao diện website bán đồ uống

Báo cáo bài tập lớn môn Tương Tác Người Máy: Thiết kế giao diện website bán đồ uống. Tìm hiểu quy trình, phân tích và giải pháp thiết kế UX/UI hiệu quả.

• Tác giả: Vũ Trần Anh Kiệt
• Người hướng dẫn: Trần Thị Đồng
• Trường học: Trường Đại học Phương Đông
• Chuyên ngành: Tương Tác Người-Máy
• Đề tài: Thiết Kế Giao Diện Website Bán Đồ Uống
• Loại tài liệu: báo cáo bài tập lớn

Mục lục chi tiết

• 1. CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
• 1.1. Giới thiệu vấn đề
• 1.2. Mục đích và đối tượng nghiên cứu
• 1.3. Phân công các thành viên tham gia
• 1.4. Phạm vi nghiên cứu
• 1.5. Phương pháp nghiên cứu
• 2. CHƯƠNG 2: PHÂN NGƯỜI SỬ DỤNG VÀ ỨNG DỤNG
• 2.1. Đối tượng liên quan
• 2.2. Mục đích hệ thống
• 2.3. Vai trò và trách nhiệm của người dùng
• 2.4. SWOT
• 2.5. Tiêu chí đánh giá
• 3. CHƯƠNG 3: KHẢO SÁT NGƯỜI DÙNG
• 3.1. Đối tượng khảo sát
• 3.2. Chi tiết khảo sát
• 4. CHƯƠNG 4: DANH SÁCH CÁC CHỨC NĂNG HỆ THỐNG
• 5. CHƯƠNG 5: MÔ TẢ TRANG WEB
• 5.1. Sitemap
• 5.2. Workflow
• 5.3. Wireframe
• 5.4. Storyboard
• 5.5. Prototype

Tóm tắt

I. Hướng dẫn làm báo cáo bài tập lớn tương tác người máy

Báo cáo bài tập lớn môn học tương tác người-máy (Human-Computer Interaction - HCI) là một tài liệu học thuật quan trọng, tổng hợp toàn bộ quá trình nghiên cứu và phát triển một sản phẩm công nghệ. Đối với đề tài thiết kế giao diện website bán đồ uống, mục tiêu không chỉ dừng lại ở việc tạo ra một trang web có thể hoạt động, mà còn phải tối ưu hóa trải nghiệm người dùng (UX) và xây dựng một giao diện người dùng (UI) trực quan, hấp dẫn. Báo cáo này trình bày chi tiết các bước thực hiện, từ giai đoạn lên ý tưởng, phân tích yêu cầu, cho đến việc thiết kế và tạo mẫu sản phẩm. Trọng tâm của dự án là áp dụng các nguyên tắc thiết kế giao diện và phương pháp thiết kế lấy người dùng làm trung tâm để giải quyết các vấn đề thực tiễn trong lĩnh vực F&B. Thông qua việc phân tích và tổng hợp tài liệu, kết hợp với các phương pháp nghiên cứu định tính và định lượng, đồ án môn học HCI này cung cấp một cái nhìn toàn diện về quy trình xây dựng một website e-commerce chuyên biệt cho ngành hàng đồ uống. Các kết quả nghiên cứu và sản phẩm thiết kế được trình bày trong báo cáo là cơ sở để đánh giá hiệu quả của giải pháp, đồng thời mở ra những hướng phát triển tiềm năng trong tương lai. Việc hoàn thành một báo cáo cuối kỳ chất lượng không chỉ thể hiện kiến thức chuyên môn về HCI mà còn cho thấy kỹ năng làm việc nhóm, phân tích vấn đề và tư duy thiết kế của sinh viên.

1.1. Mục tiêu và phạm vi của đồ án môn học HCI

Mục tiêu chính của dự án là xây dựng thành công một hệ thống giao diện web bán trà sữa thân thiện và hiệu quả. Phạm vi nghiên cứu tập trung sâu vào trải nghiệm người dùng và cơ chế hoạt động của một website bán hàng, từ đó đề xuất các cải tiến nhằm mang lại sự hài lòng cao nhất cho khách hàng. Dự án không đi sâu vào việc phát triển backend hay cơ sở dữ liệu phức tạp, mà chú trọng vào quy trình thiết kế UX/UI, bao gồm việc nghiên cứu người dùng, xây dựng kiến trúc thông tin, và tạo ra các sản phẩm thiết kế cụ thể như wireframe và prototype.

1.2. Tầm quan trọng của tương tác người máy trong F B

Trong bối cảnh ngành dịch vụ ăn uống (F&B) ngày càng cạnh tranh, tương tác người-máy đóng vai trò then chốt trong việc thu hút và giữ chân khách hàng. Một giao diện đặt hàng online được thiết kế tốt không chỉ giúp người dùng tiết kiệm thời gian, chi phí mà còn tạo ra cảm giác hứng thú và thoải mái khi trải nghiệm dịch vụ. Việc ứng dụng các nguyên lý HCI giúp doanh nghiệp thấu hiểu hành vi khách hàng, từ đó tối ưu hóa quy trình đặt hàng, thanh toán và nhận phản hồi, góp phần nâng cao lợi thế cạnh tranh trên thị trường số.

1.3. Phương pháp nghiên cứu được áp dụng trong dự án

Để thực hiện dự án, các phương pháp nghiên cứu chính đã được sử dụng bao gồm: phương pháp phân tích và tổng hợp tài liệu để xây dựng cơ sở lý thuyết về thiết kế giao diện người dùng; phương pháp khảo sát trực tuyến (Google Form) để thu thập dữ liệu về nhu cầu và thói quen của người dùng mục tiêu; và phương pháp làm việc nhóm để thảo luận, trao đổi và thống nhất các giải pháp thiết kế. Cách tiếp cận này đảm bảo rằng sản phẩm cuối cùng dựa trên dữ liệu thực tế và đáp ứng đúng nhu cầu của người sử dụng.

II. Phân tích thách thức trong thiết kế trải nghiệm người dùng

Việc thiết kế trải nghiệm người dùng cho một website e-commerce trong lĩnh vực F&B đặt ra nhiều thách thức đặc thù. Thách thức lớn nhất đến từ việc phải đáp ứng kỳ vọng ngày càng cao của khách hàng về sự tiện lợi, nhanh chóng và cá nhân hóa. Người dùng không chỉ muốn đặt hàng dễ dàng mà còn mong đợi một trải nghiệm mua sắm thú vị. Một trong những khó khăn ban đầu là việc xác định chính xác chân dung khách hàng mục tiêu và các vấn đề họ gặp phải khi sử dụng các nền tảng hiện có. Báo cáo đã chỉ ra rằng các đối thủ cạnh tranh, dù có thương hiệu mạnh, vẫn tồn tại những điểm yếu như trang web quản lý chưa tốt, tương tác trực tuyến còn hạn chế. Đây vừa là thách thức, vừa là cơ hội để tạo ra một sản phẩm vượt trội. Bên cạnh đó, áp lực cạnh tranh từ các thương hiệu lâu đời như TocoToco, Phúc Long đòi hỏi giải pháp thiết kế UX/UI phải thực sự đột phá để thu hút người dùng. Việc cân bằng giữa tính thẩm mỹ của giao diện người dùng và tính khả dụng của hệ thống cũng là một bài toán khó. Một giao diện đẹp nhưng khó sử dụng sẽ nhanh chóng bị người dùng từ bỏ. Vì vậy, quy trình phân tích yêu cầu và đánh giá khả dụng (usability testing) cần được thực hiện một cách cẩn trọng để đảm bảo mọi quyết định thiết kế đều hướng đến mục tiêu cuối cùng: sự hài lòng của người dùng.

2.1. Xác định các đối tượng người dùng liên quan

Hệ thống có ba nhóm đối tượng liên quan chính. Nhóm thứ nhất và quan trọng nhất là người sử dụng cuối, chủ yếu là khách hàng trẻ tuổi (học sinh, sinh viên) có nhu cầu lựa chọn và đặt trà sữa online. Nhóm thứ hai là nhân viên bảo trì hệ thống, chịu trách nhiệm sửa lỗi và khắc phục các vấn đề kỹ thuật. Nhóm thứ ba là nhân viên hỗ trợ khách hàng, có vai trò tư vấn và giải quyết các vấn đề liên quan đến sản phẩm, đơn hàng. Việc hiểu rõ vai trò và nhu cầu của từng nhóm là nền tảng cho việc thiết kế lấy người dùng làm trung tâm.

2.2. Phân tích SWOT các đối thủ trong ngành trà sữa

Phân tích SWOT được thực hiện trên các website của TocoToco, Highland Coffee và Phúc Long. Điểm mạnh chung của họ là thương hiệu lớn và thực đơn đa dạng. Tuy nhiên, điểm yếu là trải nghiệm người dùng trên web đôi khi chưa tối ưu, tương tác còn hạn chế. Cơ hội cho dự án là nhu cầu đặt hàng online đang tăng mạnh sau đại dịch. Thách thức lớn nhất là áp lực cạnh tranh từ chính những đối thủ này và các nền tảng mới nổi khác. Phân tích này giúp xác định các yếu tố cần cải thiện và tạo ra lợi thế cạnh tranh cho giao diện web bán trà sữa được thiết kế.

2.3. Các tiêu chí đánh giá một giao diện người dùng hiệu quả

Một giao diện người dùng hiệu quả được đánh giá dựa trên nhiều tiêu chí. Theo tài liệu nghiên cứu, các tiêu chí chính bao gồm: tần suất truy cập của khách hàng cao, số lượng đơn đặt hàng lớn, thứ hạng SEO tốt. Về mặt kỹ thuật, trang web phải vận hành ổn định, bảo mật cao, tốc độ tải trang nhanh, và hiển thị tốt trên mọi thiết bị (responsive). Những tiêu chí này là kim chỉ nam cho toàn bộ quá trình thiết kế và là cơ sở để thực hiện đánh giá khả dụng sau này.

III. Bí quyết xây dựng persona và hành trình người dùng chi tiết

Để tạo ra một sản phẩm thực sự chạm đến người dùng, việc thấu hiểu họ là bước đi tiên quyết. Quá trình này bắt đầu bằng việc khảo sát và thu thập dữ liệu, sau đó được cụ thể hóa thông qua việc xây dựng persona và hành trình người dùng (user journey map). Đây là hai công cụ cốt lõi trong phương pháp thiết kế lấy người dùng làm trung tâm, giúp đội ngũ phát triển đặt mình vào vị trí của khách hàng, từ đó đưa ra các quyết định thiết kế chính xác. Persona là các chân dung người dùng hư cấu nhưng được xây dựng dựa trên dữ liệu khảo sát thực tế, đại diện cho các nhóm khách hàng mục tiêu khác nhau. Mỗi persona sẽ có thông tin về nhân khẩu học, mục tiêu, nhu cầu và những khó khăn họ gặp phải. Dựa trên persona, hành trình người dùng được vẽ ra để mô tả chi tiết các bước mà một người dùng thực hiện để đạt được mục tiêu của họ trên website, ví dụ như từ lúc tìm kiếm món đồ uống yêu thích cho đến khi hoàn tất thanh toán. Việc lập bản đồ hành trình này không chỉ giúp xác định các điểm chạm (touchpoints) quan trọng mà còn phát hiện ra các "điểm đau" (pain points) trong trải nghiệm người dùng hiện tại, tạo cơ sở vững chắc cho việc cải tiến và tối ưu hóa giao diện người dùng.

3.1. Quy trình khảo sát và thu thập yêu cầu từ người dùng

Quy trình khảo sát được thực hiện thông qua Google Form, nhắm đến đối tượng từ 14 tuổi trở lên, bao gồm học sinh, sinh viên và nhân viên văn phòng. Bảng câu hỏi được chia làm ba phần: thông tin cơ bản, thói quen lựa chọn sản phẩm, và thái độ đối với một thương hiệu cụ thể. Kết quả khảo sát là nguồn dữ liệu đầu vào quan trọng cho việc phân tích yêu cầu, giúp hiểu rõ nhu cầu, sở thích và mong đợi của người dùng đối với một ứng dụng thiết kế app đặt đồ uống hoặc website.

3.2. Kỹ thuật xây dựng persona đại diện cho khách hàng mục tiêu

Từ dữ liệu khảo sát, các persona được xây dựng để đại diện cho nhóm người dùng chính: học sinh/sinh viên. Một persona điển hình có thể là "An, 20 tuổi, sinh viên", người thường xuyên đặt trà sữa online, ưu tiên sự tiện lợi, giao diện bắt mắt và có nhiều mã giảm giá. Việc xây dựng persona giúp toàn bộ đội ngũ có một hình dung chung và nhất quán về người dùng cuối, đảm bảo mọi tính năng và yếu tố thiết kế đều phục vụ cho nhu cầu của họ.

3.3. Lập bản đồ hành trình người dùng user journey map

Bản đồ hành trình người dùng (user journey map) mô tả các giai đoạn tương tác của persona "An" với website: từ nhận biết (thấy quảng cáo), cân nhắc (vào xem menu, so sánh giá), mua hàng (chọn món, nhập địa chỉ, thanh toán), đến sau mua hàng (đánh giá, tích điểm). Tại mỗi giai đoạn, bản đồ chỉ ra hành động, suy nghĩ, cảm xúc và các "điểm đau" của An. Ví dụ, một "điểm đau" có thể là quá trình thanh toán phức tạp. Việc này giúp xác định các cơ hội cải thiện trải nghiệm người dùng một cách cụ thể.

IV. Cách thiết kế kiến trúc thông tin wireframe và prototype

Sau khi đã thấu hiểu người dùng, giai đoạn tiếp theo là biến những yêu cầu và ý tưởng thành một cấu trúc cụ thể thông qua việc xây dựng kiến trúc thông tin (information architecture), wireframe, và prototype. Đây là xương sống của toàn bộ quá trình thiết kế UX/UI. Kiến trúc thông tin (IA) là việc tổ chức, cấu trúc và dán nhãn nội dung một cách hiệu quả để người dùng có thể dễ dàng tìm thấy thông tin và hoàn thành tác vụ. Kết quả của IA thường được thể hiện qua sitemap (sơ đồ trang web). Tiếp theo, wireframe được tạo ra. Đây là bản phác thảo cấu trúc ở mức độ chi tiết thấp (low-fidelity), tập trung vào việc bố trí các thành phần chức năng trên giao diện, luồng tương tác và phân cấp thông tin mà không quan tâm đến màu sắc hay hình ảnh. Wireframe giúp nhanh chóng kiểm tra các ý tưởng về bố cục và chức năng. Cuối cùng, từ wireframe và các thiết kế chi tiết hơn (mockup), một prototype tương tác được xây dựng. Prototype là một mô hình mô phỏng sản phẩm cuối cùng, cho phép người dùng nhấp và tương tác như đang sử dụng một trang web thật. Việc tạo prototype bằng các công cụ như Figma giúp đội ngũ và các bên liên quan có cái nhìn trực quan nhất về sản phẩm, đồng thời là công cụ hữu hiệu cho việc đánh giá khả dụng trước khi đi vào lập trình.

4.1. Xây dựng kiến trúc thông tin IA và sitemap hệ thống

Kiến trúc thông tin được thiết kế để đảm bảo người dùng có thể điều hướng trang web một cách logic. Dựa trên các chức năng hệ thống đã xác định, một sitemap được xây dựng, bao gồm các trang chính như Trang chủ, Menu, Giỏ hàng, Tài khoản cá nhân (Quản lý đơn hàng, Điểm thưởng), Đăng nhập/Đăng ký. Cấu trúc này giúp phân cấp thông tin rõ ràng, tạo nền tảng cho một trải nghiệm người dùng mượt mà và không gây nhầm lẫn.

4.2. Thiết kế wireframe cho các chức năng website quan trọng

Các wireframe được vẽ cho tất cả các màn hình chính của hệ thống, từ luồng đăng ký/đăng nhập, xem menu, đặt hàng, thanh toán, cho đến quản lý tài khoản và quản lý đơn hàng cho admin. Các bản vẽ này tập trung vào cấu trúc và vị trí của các yếu-tố-tương-tác (call-to-action buttons, form fields, navigation bars) thay vì thẩm mỹ. Điều này giúp cả nhóm tập trung thảo luận về chức năng và luồng công việc (workflow) trước khi đầu tư thời gian vào thiết kế trực quan.

4.3. Chuyển đổi từ mockup sang prototype tương tác trên Figma

Từ các wireframe, các thiết kế có độ trung thực cao hơn (mockup) được tạo ra với màu sắc, typography, và hình ảnh cụ thể. Sau đó, chúng được liên kết lại với nhau trong Figma để tạo thành một prototype tương tác. Người dùng có thể nhấp vào nút "Đăng nhập", đi đến trang chủ, chọn một sản phẩm từ menu và thêm vào giỏ hàng. Mẫu thử này là công cụ vô giá để trình bày ý tưởng thiết kế và thực hiện các buổi đánh giá khả dụng (usability testing) ban đầu.

V. Kết quả triển khai và áp dụng nguyên tắc thiết kế giao diện

Kết quả cuối cùng của đồ án môn học HCI là một bộ prototype hoàn chỉnh, mô phỏng chi tiết giao diện web bán trà sữa với tên thương hiệu giả định là Bumba. Sản phẩm này là sự kết tinh của toàn bộ quá trình nghiên cứu và thiết kế, áp dụng một cách nhất quán các nguyên tắc thiết kế giao diện cơ bản như tính nhất quán, phản hồi hệ thống, khả năng kiểm soát của người dùng và giảm tải nhận thức. Giao diện được thiết kế theo phong cách đơn giản, sang trọng, sử dụng màu sắc tươi sáng để thu hút đối tượng khách hàng trẻ. Các luồng chức năng chính như đặt hàng, thanh toán, quản lý tài khoản được tối ưu hóa để giảm thiểu số bước cần thực hiện, giúp người dùng hoàn thành mục tiêu một cách nhanh chóng. Ví dụ, luồng đăng nhập hỗ trợ cả tài khoản mạng xã hội (Google, Facebook) để tối đa hóa sự tiện lợi. Các prototype được xây dựng trên Figma không chỉ thể hiện giao diện tĩnh mà còn mô phỏng các tương tác, hiệu ứng chuyển động, mang lại cảm giác chân thực như đang sử dụng một sản phẩm thực tế. Việc sử dụng storyboard cũng đóng vai trò quan trọng trong việc minh họa các bối cảnh sử dụng cụ thể, giúp người xem hiểu rõ hơn về giá trị mà trải nghiệm người dùng được thiết kế mang lại trong các tình huống thực tế.

5.1. Demo giao diện web bán trà sữa với thiết kế hoàn chỉnh

Bản demo prototype trên Figma trình bày đầy đủ các màn hình, từ trang chủ hấp dẫn với các banner quảng cáo, trang menu được phân loại rõ ràng, cho đến trang chi tiết sản phẩm cho phép tùy chỉnh (size, topping, lượng đường). Giao diện quản lý cho phép chủ cửa hàng thực hiện các tác vụ như quản lý sản phẩm và đơn hàng. Thiết kế đảm bảo tính nhất quán về màu sắc, font chữ và phong cách icon trên toàn bộ hệ thống, tuân thủ theo các nguyên tắc thiết kế giao diện hiện đại.

5.2. Phân tích các luồng chức năng chính trên prototype

Các luồng chức năng quan trọng được mô phỏng chi tiết. Luồng đặt hàng được đơn giản hóa qua các bước: chọn món -> giỏ hàng -> xác nhận thông tin -> thanh toán. Luồng quản lý tài khoản cho phép người dùng xem lại lịch sử đơn hàng, kiểm tra điểm thưởng và đổi quà. Luồng quản lý đơn hàng cho admin cung cấp giao diện trực quan để cập nhật trạng thái đơn. Việc mô phỏng các luồng này trong prototype giúp kiểm tra tính logic và hiệu quả của thiết kế UX/UI.

5.3. Vai trò của storyboard trong việc minh họa bối cảnh sử dụng

Báo cáo sử dụng storyboard để kể những câu chuyện ngắn về cách người dùng tương tác với website trong các ngữ cảnh khác nhau. Ví dụ: một storyboard mô tả một nhân viên văn phòng sử dụng điểm thưởng để đổi quà, một storyboard khác cho thấy một nhóm bạn bè giới thiệu website cho nhau. Những câu chuyện trực quan này giúp làm nổi bật giá trị của các tính năng và củng cố tầm quan trọng của việc thiết kế lấy người dùng làm trung tâm.

Trích đoạn nội dung tài liệu

Chương 1. Giới thệu đề tài Tổng hợp cơ sở thực hiện đề tài. Kiệt Đối tượng liên quan Minh Mục đích hệ thống Minh Chương 2. Phân tích ứng dụng Vai trò người dùng Minh SWOT (phân tích theo S, W, O, T) Minh Thực hiện form khảo sát Dương Chương 3.

Khảo sát người dùng Chương 4: Bảng danh sách các Tổng hợp danh sách các chức năng Dương chức năng của trang web. Xây dựng Sitemap Đức Xây dựng Wireframe Đức Chương 5. Mô tả trang web Xây dựng Workflow Đức Xây dựng Storyboard Đức Xây dựng Prototype Đức 1.4 Phạm vi nghiên cứu Đề tài tập trung nghiên cứu về trả nghiệm người dùng cũng như nghiên cứu các thức hoạt động của một trang web bán trà sữa để cải thiện và nâng cấp sao cho trải nghiệm người dùng là hoàn hảo nhất.5 Phương pháp nghiên cứu Tiểu luận sử dụng các phương pháp nghiên cứu khác nhau: Phương pháp phân tích và tổng hợp, phương pháp làm việc nhóm để thảo luận, trao đổi những vấn đề liên qu CHƯƠNG 2: PHÂN NGƯỜI SỬ DỤNG VÀ ỨNG DỤNG 2.1 Đối tượng liên quan - Người sử dụng có nhu cầu lựa chọn, sử dụng thức uống là trà sữa. Họ là nhóm khách hàng trẻ tuổi, thanh thiếu niên, học sinh sinh viên.

Đây là đối tượng khách hàng sử dụng chủ yếu. - Nhân viên bảo trì hệ thống. - Nhân viên hỗ trợ, chăm sóc khách hàng.2 Mục đích hệ thống - Người sử dụng: Tìm kiếm, lựa chọn loại trà sữa phù hợp với sở thích, khẩu vị của bản thân, cũng như tham khảo giá cả thông qua thông tin sản phẩm được đăng tải trên trang web. - Nhân viên bảo trì: Thực hiện bảo trì, gỡ lỗi, sửa chữa, khắc phục những vấn đề còn tồn tại ở trang web theo định kỳ.

- Nhân viên hỗ trợ, chăm sóc khách hàng: Hỗ trợ tư vấn thông tin cho khách hàng cũng như giải quyết những vấn đề liên quan đến sản phẩm, đơn hàng.3 Vai trò và trách nhiệm của người dùng - Vai trò: Có thể giới thiệu trang web cho người khác, bạn bè, người thân… có chung sở thích, khẩu vị về các loại trà sữa. - Trách nhiệm: Khách hàng phải uy tín, chịu trách nhiệm về đơn hàng đã đặt. Không bom hàng.4 SWOT Đánh giá dựa trên các web thức uống trà sữa có sẵn như: - TocoToco: https://tocotocotea.com/ - Higland Coffee: https://www.vn/ - Trà sữa Phúc Long: https://phuclong. Strengths - Điểm mạnh - Trang web bao gồm thông tin các sản phẩm có sức hút cao bởi sự độc đáo và đa dạng trong thực đơn, không chỉ bao gồm các loại đồ uống mà còn mở rộng thêm một số loại đồ ăn nhẹ, giàu dinh dưỡng.

- Giúp người dùng tiện lợi về mặt thời gian, chi phí khi chọn mua sản phẩm phù hợp thông qua trang web. - Trang web đơn giản nhưng sang trọng, dễ sử dụng thu hút người dùng. Weaknesses - Điểm yếu - Vì là thương hiệu mới nên chưa có sức hút lâu dài. - Trang web đôi khi được quản lý không tốt, tương tác trực tuyến với khách hàng vẫn còn hạn chế.

Opportunities - Cơ hội - Trải qua đại dịch covid với nhiều biến động, nhu cầu đặt đồ ăn thức ăn online của người tiêu dùng ngày càng tăng cao. - Phát triển thương hiệu của chính mình. - Tạo lòng tin với tệp khách hàng tiềm năng, qua đó có thể hợp tác với các cửa hàng, thương hiệu lớn qua việc nhập hàng giá gốc từ các doanh nghiệp và bán giá rẻ hơn so với thị trường. Threats - Thách thức.

- Trang web đang trong giai đoạn phát triển, mang theo áp lực cạnh tranh với các đối thủ lâu đời như Ding Tea, Feeling Tea,. - Có nhiều đối thủ khác cũng đang phát triển về loại hình đặt mua thức uống online này. - Do sức ép cạnh tranh nên việc mở rộng thị phần sử dụng trang web cũng như sức cạnh tranh của cửa hàng sẽ khó khăn hơn.5 Tiêu chí đánh giá Đánh giá dựa trên các tiêu chí: - Số lượng đơn đặt hàng trên trang web lớn. - Tần suất truy cập của khách hàng cao.

- Xếp hạng SEO của trang web cao. - Trang web vận hành ổn định và tính bảo mật cao, tốc độ load nhanh. - Website hiển thị dễ dàng trên tất cả thiết bị, tất cả trình duyệt web, liên kết với các công cụ như Google Analytics, phân tích SEO & Marketing dễ dàng, nhanh chóng hơn. CHƯƠNG 3: KHẢO SÁT NGƯỜI DÙNG 3.1 Đối tượng khảo sát - Độ tuổi: từ 14 tuổi trờ lên.

- Nghề nghiệp: học sinh/sinh viên, nhân viên văn phòng, lao động phổ thông,… - Mức độ công nghệ: biết sử dụng máy tính, điện thoại di động,… 3.2 Chi tiết khảo sát - Phương thức khảo sát: Google form. - Gồm 3 phần: + Phần 1: Thông tin cơ bản – Hiểu rõ về nhu cầu sử dụng sản phẩm làm đẹp theo độ tuổi, giới tính, nghề nghiệp. + Phần 2: Khảo sát chi tiết về thói quen lựa chọn cửa hàng và sản phẩm của các đối tượng người dùng trên. + Phần 3: Khảo sát thái độ người dùng đối với cửa hàng Bumba.

CHƯƠNG 4: DANH SÁCH CÁC CHỨC NĂNG HỆ THỐNG Mức độ sử dụng STT Chức năng Miêu tả tổng quan User Resource 1 Đăng ký Đăng ký tài khoản nếu chưa có tài khoản. Medium High 2 Đăng nhập Đăng nhập bằng tài khoản để bảo mật thông tin. Medium High Gửi mật khẩu mới vào số điện thoại hoặc email 3 Quên mật khẩu High High khi người dùng quên mật khẩu đã tạo. Đăng nhập Liên kết ứng dụng với tài khoản facebook người 4 High High bằng facebook dùng.

Đăng nhập Liên kết ứng dụng với tài khoản google người 5 High High bằng google dùng. 6 Xem menu Khách hàng xem Menu của cửa hàng. High Medium Khách hàng thực hiện đặt trước đơn hàng khi 7 Đặt trước đơn hàng High High được cấp quyền đăng nhập vào hệ thống Khách hàng thêm, xóa, sửa nội dung thông tin cá Quản lý tài khoản 8 nhân về số điện thoại, phương thức thanh toán, High High cá nhân địa chỉ,. 9 Chọn món cho order Người dùng chọn món cho order.

High Medium 10 Thêm món vào order Người dùng thêm món cho order. High High Xóa món khỏi order Người dùng xóa món khỏi 11 Xóa món khỏi order High High order. 12 Thanh toán Thanh toán hóa đơn. High Low 13 Xem hóa đơn Nhân viên bán hàng xem hóa đơn.

Low Medium Cập nhật 14 Nhân viên bán hàng cập nhật trạng thái đơn. High Medium trạng thái đơn Người dùng sẽ được tích điểm dựa trên tổng số 15 Xem điểm thưởng High High tiền đã mua. 16 Đổi quà Người dùng sử dụng số điểm thưởng để đổi quà. High Medium Quản lý thêm, xóa, sửa thông tin sản phẩm trong 17 Quản lý sản phẩm High Low menu cửa hàng.

18 Quản lý đơn hàng Quản lý thêm, xóa, sửa thông tin đơn hàng. High Low CHƯƠNG 5: MÔ TẢ TRANG WEB 5.1 Sitemap Sitemap hệ thống trà sữa Bumba 5.2 Workflow Workflow hệ thống trà sữa Bumba 5.3 Wireframe - Những wireframe lớn hơn 1 màn hình thể hiện trang web có phần kéo lên xuống thay vì chỉ thể hiện ở một màn hình. - Đăng ký: - Đăng nhập: - Xác nhận số điện thoại: - Đăng nhập bằng facebook: - Đăng nhập bằng google: - Quên mật khẩu: - Trang chủ: - Xem menu: - Đặt hàng: - Thanh toán: - Đánh giá đơn hàng: - Quản lý tài khoản: - Quản lý cửa hàng: - Xem voucher: - Xem điểm thưởng /Đổi quà: - Thông báo đơn hàng giao thành công: - Quản lý sản phẩm: - Quản lý đơn hàng: + Quản lý danh sách đơn hàng: + Chỉnh sửa đơn hàng: + Chỉnh sửa chi tiết đơn hàng: - File wireframe.fig chứa wireframe động bằng cách open trong chương trình Figma và nhấn run.4 Storyboard - Người dùng sử dụng điểm thưởng để đổi các quà tặng tương ứng của cửa hàng: - Người dùng hỗ trợ website bằng cách giới thiệu thông tin website đến bạn bè, đồng nghiệp và người thân: - Cửa hàng muốn mở rộng thị phần nên thực hiện hợp tác với các doanh nghiệp, thương hiệu khác để quảng cáo: - Khi có vấn đề xảy ra hoặc khách hàng có nhu cầu hủy và hoàn tiền đối với đơn hàng, website có trách nhiệm thông báo không thể hủy đơn hàng vì khách hàng đã xác nhận đặt hàng và chấp nhận không thể hủy đơn hàng ở bước thanh toán: - Khách hàng tìm kiếm các voucher vào các dịp kỷ niệm thành lập quán, lễ, tết hoặc sinh nhật khách hàng,.5 Prototype File prototype.fig chạy trên ứng dụng Figma chứa các hình ảnh thiết kế của trang web với những hình ảnh sản phẩm tượng trưng, quảng cáo tượng trưng. - Prototype đăng nhập: - Prototype đăng nhập bằng facebook: - Prototype đăng nhập bằng google: - Prototype quên mật khẩu: - Prototype đăng ký: - Prototype xác thực bằng số điện thoại: - Prototype xác thực tài khoản: - Prototype quản lý cửa hàng: - Prototype quản lý sản phẩm: - Prototype quản lý tài khoản: - Prototype quản lý danh sách đơn hàng: - Prototype chi tiết đơn hàng: - Prototype chỉnh sửa chi tiết đơn hàng: - Prototype xem menu: - Prototype trang chủ: - Prototype đặt đơn hàng: - Prototype chọn phương thức thanh toán: - Prototype thông báo đơn hàng đã giao thành công: - Prototype đánh giá đơn hàng: - Prototype xem và đổi điểm thưởng: - Prototype Voucher