Báo cáo môn thiết kế web đề tài trang web bán bánh ngọt

Giới tính Nữ chiếm 60% Nữ chiếm 70% Nữ chiếm 90% Mục đích Sinh nhật, đi chơi với bạn bè Đám cưới, sự kiện công ty, sinh nhật, đi chơi với bạn bè Tặng người thân, làm bánh tại nhà,

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO MÔN THIẾT KẾ WEB

Đề tài: Trang web bán bánh ngọt

Giảng viên hướng dẫn: Nguyễn Thị Thanh Tâm

Thành viên: Trần Thị Diễm – B20DCPT038

Nguyễn Linh Chi – B20DCPT034 Bùi Thị Kim Ngân – B20DCPT138 Trần Khôi Nguyên – B20DCPT146

MỤC LỤC

I Xác định đối tượng 5

1 Xác định đối tượng 5

2 Phân loại đối tượng sử dụng 6

II Thu thập thông tin dữ liệu 7

1 Phương pháp phỏng vấn 7

1.1 Quá trình phỏng vấn 7

1.2 Kết quả tổng hợp sau cuộc phỏng vấn 11

2 Đặt câu hỏi 13

2.1 Chuẩn bị 13

2.2 Kết quả khảo sát 16

3 Tập trung nhóm và các khóa học thực hành 18

3.1 Tiến hành 18

3.2 Kết quả khảo sát 19

4 Tiếp cận tự nhiên 19

5 Nghiên cứu tài liệu 23

III Kết quả của phân tích dữ liệu 26

1 Vấn đề hệ thống hiện tại 26

2 Đưa ra yêu cầu của hệ thống mới 26

IV Use case diagram 27

1 Sơ đồ Use case diagram 27

2 Yêu cầu chức năng và phi chức năng của hệ thống 28

2.1 Đăng ký 28

2.2 Đăng nhập 29

2.3 Đăng xuất 29

2.4 Tìm kiếm sản phẩm 30

2.5 Xem thông tin sản phẩm 30

2.6 Sửa thông tin cá nhân 30

2.7 Thêm vào giỏ hàng 31

2.8 Thanh toán 31

2.9 Kiểm tra đơn hàng 32

2.10 Nhận và giao hàng 33

V Thiết kế giao diện 33

1 Xác định kích thước màn hình hiển thị + trình duyệt 33

2 Xác định nội dung 34

3 Hệ thống lưới 35

3.1 Lưới desktop 35

3.2 Lưới tablet 40

3.3 Lưới mobile phone 43

4 Wireframe 47

6 Màu sắc 49

7 Hình ảnh + video 50

8 Bố cục trang 55

VI Thiết kế prototype 60

1 Kiến trúc thông tin của website 60

2 Các loại điều hướng 60

3 Đánh giá khả năng hoạt động 65

3.1 Ưu điểm 65

3.2 Nhược điểm 65

4 Mô tả hoạt động của sản phẩm 66

VII Code 66

1 Tìm hiểu các ngôn ngữ lập trình sử dụng 66

1.1 HTML 66

1.2 CSS 68

2 Thư viện hỗ trợ 68

4 Quy trình thực hiện 70

5 Source code 70

6 Giao diện hiển thị 70

6.1 Giao diện trang chủ 70

Giao diện giới thiệu 72

4 | T H I Ế T K Ế W E B C Ơ B Ả N

6.3 Giao diện sản phẩm 74

6.4 Giao diện tin tức 74

6.5 Giao diện đăng ký 75

6.6 Giao diện đăng nhập 76

7 Những thuận lợi và khó khăn khi thực hiện code 76

VIII Kết luận 77

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

2 Hạn chế 77

3 Hướng phát triển của đề tài 77

PHỤ LỤC 78

I Xác định đối tượng

1 Xác định đối tượng

o Người tương tác trực tiếp với sản phẩm:

- Khách hàng: nhóm đối tượng hàng đầu truy cập trang web để đặt hàng

- Những người yêu thích bánh: nhóm đối tượng truy cập vì yêu thích bánh hoặc xem công thức làm bánh

Giới tính Nữ (chiếm 60%) Nữ (chiếm 70%) Nữ (chiếm 90%)

Mục đích Sinh nhật, đi chơi

với bạn bè

Đám cưới, sự kiện công ty, sinh nhật,

đi chơi với bạn bè

Tặng người thân, làm bánh tại nhà, sinh nhật

Nghề nghiệp Học sinh, sinh

Tự chủ về tài chính

Ổn định về tài chính

Mức độ bận rộn Tự do, không quá

bận rộn

Bận rộn Có khá nhiều thời

gian dành cho gia đình

Nhu cầu ăn bánh Thích ăn bánh

ngọt Thích (hạn chế ăn do giữ dáng) Hạn chế hơn

Bảng phân tích các nhóm khách hàng

o Người tương tác gián tiếp với sản phẩm:

- Những doanh nghiệp, công ty có lĩnh vực kinh doanh liên quan đến bánh như những doanh nghiệp cung cấp các nguyên liệu làm bánh:

+ Nguyên liệu bột: Nhà cung ứng Công ty cổ phần Bình Đông

+ Nguyên liệu đường: Nhà máy Phú Yên

+ Bao bì: Bao bì giấy: Visingpack; Bao bì nhựa: Tân Tiến

+ Máy móc, trang thiết bị làm bánh: Viễn Đông

o Người dùng cạnh tranh:

- Các cửa hàng bán bánh khác: Nhóm người nãy sẽ quan tâm đến website

của bạn Họ sẽ quan sát xem trang web của bạn đang nhắm đến đối tượng nào, thiết kế giao diện ra sao rồi để phân tích, điều chỉnh website của họ Một số thương hiệu nổi tiếng có sự cạnh tranh mạnh mẽ:

+ ABC Bakery: thương hiệu này đi lên từ bánh mì và các loại bánh ngọt,

bánh bao rồi mở rộng ra các dòng bánh ngọt kiểu Tây Không chỉ là một

+ Givral: kế thừa trọn vẹn nét tinh tế, tao nhã của nền ẩm thực Pháp, luôn ghi dấu ấn với các dòng bánh tươi, không sử dụng các chất bảo quản hay phụ gia, đảm bảo an toàn sức khỏe cho người sử dụng Chuyên sản xuất các dòng bánh cao cấp từ bánh kem, bánh cưới, bánh trung thu, bánh mì

và các loại bánh nướng với đa dạng về loại bánh

+ Banhngot.vn – Thương hiệu bánh ngọt Việt Nam: nổi tiếng hàng đầu về bánh kem Đặc biệt là dịch vụ giao bánh tận nhà tặng người thân

Như vậy khách hàng trọng tâm hướng đến là độ tuổi từ 15 đến 40, với những tính cách, sở thích, trình độ, giới tính (chủ yếu là nữ giới) khác nhau

2 Phân loại đối tượng sử dụng

 Quan trọng: dùng thường xuyên và trực tiếp

o Khách hàng đã đặt hàng trên web và quay trở lại web:

- Đây là nhóm khách hàng thân thiết với doanh nghiệp và là một trong những mục tiêu chính các doanh nghiệp hướng đến Họ yêu thích sản phẩm hoặc thương hiệu của bạn đến mức họ sẽ luôn mua hàng của bạn, ngay cả khi có ưu đãi rẻ hơn ở nơi khác Bên cạnh đó, họ cũng sẵn lòng giới thiệu sản phẩm của doanh nghiệp tới những người xung quanh

o Khách hàng thường xuyên truy cập trang web

- Việc thường xuyên truy cập trang web cho thấy nhóm khách hàng này đang quan tâm đến sản phẩn của web Vì vậy việc họ đặt hàng chắc chắn

sẽ diễn ra

 Bình thường: dùng ít hơn hoặc biết đến sản phẩm thông qua bạn bè

o Khách hàng đã thêm hàng vào giỏ

- Khách hàng này có thể gọi là tập khách hàng phân vân Có đến 90% khách hàng cảm thấy khó quyết định vì giá cả Có lẽ… họ đang chờ một Super Sale từ bạn?

o Nhóm khách hàng yêu thích những đợt giảm giá:

- Chỉ truy cập và mua hàng ở trang web vào những đợt giảm giá

 Yếu: người dùng bị ảnh hưởng bởi quảng cáo hoặc giá thành

o Khách hàng có ý định rời web, không sử dụng website:

- Xác định xem ai không xứng đáng dành thời gian và sự quan tâm Ví dụ như loại bỏ đối thủ cạnh tranh đang chơi xấu/ thăm dò, nếu sản phẩm của bạn giới hạn độ tuổi, những người không nằm trong khoảng yêu cầu cần loại bỏ

o Nhóm khách hàng không hài lòng:

- Nhóm khách hàng này là những người không hài lòng về sản phẩm/dịch

vụ của doanh nghiệp Họ quay trở lại để yêu cầu khắc phục vấn đề hoặc phàn nàn Điều này có thể tác động tiêu cực nếu doanh nghiệp không có kinh nghiệm trong việc xử lý khiếu nại, nhưng ngược lại, đây là cơ hội để doanh nghiệp tạo dựng niềm tin và uy tín trong lòng người tiêu dùng nếu

xử lý khéo léo trường hợp này

 Nói chung, đối tượng sử dụng website là những người bị thu hút và

sử dụng website của bạn để tìm hiểu thông tin hay thực hiện giao dịch

Đây cũng là mục tiêu mà website của bạn cần nỗ lực tiếp thị và hướng tới để biến họ thành khách hàng của mình.

II Thu thập thông tin dữ liệu

1 Phương pháp phỏng vấn

1.1 Quá trình phỏng vấn

1.1.1 Giai đoạn chuẩn bị

Để có được một cuộc phỏng vấn diễn ra thành công việc tìm hiểu trước nội dung đặt ra trong cuộc phỏng vấn và tìm hiểu người trả lời là rất quan trọng Hoạt động này giúp cho chúng ta dễ nhập cuộc, chủ động, tự tin khi phỏng vấn, tạo sự tin cậy với người đối thoại, xử lý những tình huống bất ngờ có thể xảy ra trong quá trình phỏng vấn

Việc tìm hiểu về đối tượng phỏng vấn được thực hiện thông qua:

- Xác định đối tượng đã – đang và / hoặc sẽ sử dung trang web làm bánh (đã được xác định trong phần I)

- Nghiên cứu tư liệu trên sách báo, internet, tìm hiểu đối tượng thông qua bạn bè, hàng xóm…

1.1.1.1 Lựa chọn người trả lời phỏng vấn

Dựa vào nội dung và mục đích muốn tìm hiểu về nhu cầu, mục đích, mong muốn của người dùng về trang web làm bánh, từ đó chúng tôi lưa chọn những người tiêu biểu cho cuộc phỏng vấn của mình: người nội trợ, sinh viên, người đi làm

1.1.1.2 Sắp đặt cuộc phỏng vấn

Sử dụng 2 hình thức:

- Báo trước:

+ Gọi điện, gửi mail đề nghị phỏng vấn (trò chuyện, trao đổi)

+ Giới thiệu với tư cách là người phỏng vấn

+ Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát về nhu cầu, mong muốn của người dùng về trang web làm bánh

+ Thỏa thuận địa điểm, thời gian phỏng vấn (đến nhà, ra quán, đến trường…)

- Không báo trước (áp dụng với những đối tượng bắt gặp):

+ Giới thiệu với tư cách là người phỏng vấn

+ Xin ý kiến của người dùng với lời mời phỏng vấn

+ Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát về nhu cầu, mong muốn của người dùng về trang web làm bánh

1.1.1.2.1 Chuẩn bị đề cương câu hỏi

Căn cứ vào những thông tin đã tìm hiểu được, tôi dự kiến một số câu hỏi

sẽ đặt ra trong cuộc phỏng vấn:

- Bạn có thể chia sẻ một số thông tin cá nhân của bạn cho chúng tôi không?

- Đã bao lâu bạn không ăn bánh ngọt rồi?

- Bạn thích ăn bánh ngọt theo phong cách nào?

- Bạn có đang trong chế độ giảm cân không?

- Bạn thích ăn bánh ngọt nhiều đường hay ít đường?

- Bạn có hay mua bánh để tặng bạn bè, người thân không?

- Nếu bánh ngọt là đồ ăn bạn thích và nó được làm từ nguyên liệu tự nhiên thì bạn có muốn thử nó không?

- Bạn có mong muốn gì về sản phẩm?

- Bạn đã từng mua bánh online chưa?

- Bạn thường ghé thăm các trang web làm bánh bao nhiêu lần/tháng?

- Bạn thường mua bánh ngọt vào những dịp nào?

- Mục đích bạn ghé thăm các trang web về bánh để làm gì?

Tuy nhiên trong quá trình phỏng vấn có thể linh hoạt thay đổi những câu hỏi

1.1.1.2.2 Một số công việc chuẩn bị khác

- Chuẩn bị tâm lý, tâm thế khi tiến hành phỏng vấn

- Ăn mặc phù hợp

- Chuẩn bị phương tiện phỏng vấn

- Đúng hẹn (áp dụng cho cuộc phỏng vấn báo trước)

- Chuẩn bị phương tiện, vật dụng phỏng vấn: sổ tay, máy ghi âm

1.1.1.3 Giai đoạn tiến hành phỏng vấn

1.1.1.3.1 Giai đoạn nhập cuộc

- Giới thiệu bản thân

- Nhắc lại mục đích của cuộc phỏng vấn

- Bắt đầu bằng câu chuyện nhẹ nhàng

- Mở đầu cuộc phỏng vấn bằng những câu hỏi đơn giản => biết đến thông tin, sở thích của người dùng:

Câu 1: Bạn có thể chia sẻ một số thông tin cá nhân của bạn cho chúng tôi không?

Một số câu trả lời tiêu biểu mà tôi đã note

 Tôi là Nguyễn Thị Lan, năm nay 35 tuổi là một phụ nữ nội trợ

 Tôi là Bùi Thị Quỳnh là sinh viên ngành Công nghệ đa phương tiện trường Học viện Công nghệ Bưu chính Viễn thông

 Tôi là Trần Thị Bích Như năm nay 26 tuổi hiện đang là Kế toán cho một công ty về nội thất

Câu 2: Bạn có thích mua hàng online?

Một số câu trả lời tiêu biểu mà tôi đã note

 Tôi ít khi mua hàng online vì là một người nội trợ cho gia đình nên tôi

có nhiều thời gian đi mua sắm hơn

 Tôi có vì là một sinh viên tôi thường thức dậy muộn nên khá

ngại cho việc đi mua sắm bên ngoài

 Tôi có vì tôi khá bận rộn cho công việc nên không có thời gian

Câu 3: Bạn có thích làm bánh không?

Một số câu trả lời tiêu biểu mà tôi đã note

 Tôi rất thích làm bánh, tôi thường lên các trang mạng để nghiên cứu và học hỏi công thức làm bánh

 Tôi không thích làm bánh cho lắm vì nó khá cầu kì và tỉ mỉ

 Tôi thích làm bánh, tôi thường làm bánh vào những thời gian rảnh rỗi

1.1.1.3.2 Giai đoạn triển khai hệ thống câu hỏi chủ chốt

- Áp dụng câu hỏi từ dễ đến khó

- Sử dụng một số câu hỏi xen kẽ linh hoạt

- Để khai thác được những điểm quan trọng, nổi bật, tôi áp dụng

một số câu hỏi:

Câu 1: Đã bao lâu bạn không ăn bánh ngọt rồi?

Một số câu trả lời tiêu biểu:

 Tôi ăn cách đây 3 ngày, đó là ngày kỷ niệm ngày cưới của

vợ chồng chúng tôi

 Tôi ăn cách đây 1 tuần, đó là sinh nhật bạn tôi

 Tôi ăn cách đây nửa tháng lúc đi chơi với bạn bè

Câu 2: Bạn thích ăn bánh ngọt theo phong cách nào?

Một số câu trả lời tiêu biểu:

 Tôi thích ăn bánh theo kiểu truyền thống

 Tôi thích ăn bánh theo kiểu hiện đại

 Tôi thích ăn những chiếc bánh theo phong cách của Pháp

Câu 3: Bạn có đang trong chế độ giảm cân không?

Một số câu trả lời tiêu biểu:

 Tôi không

 Tôi có

Câu 4: Bạn thích ăn bánh ngọt nhiều đường hay ít đường?

Một số câu trả lời tiêu biểu:

 Tôi thích ăn ít đường

Câu 5: Bạn có hay mua bánh để tặng bạn bè, người thân không?

Một số câu trả lời tiêu biểu:

 Có

 Có

 Có

Câu 6: Nếu bánh ngọt là đồ ăn bạn thích và nó được làm từ nguyên liệu

tự nhiên thì bạn có muốn thử nó không?

Một số câu trả lời tiêu biểu:

Câu 7: Bạn có mong muốn gì về sản phẩm?

Một số câu trả lời tiêu biểu:

 Sản phẩm tốt cho sức khỏe

 Khẩu vị phù hợp, dễ ăn, không ngán

 Mẫu mã đẹp, bắt mắt, đặc trưng

 Giá cả thấp hơn

 Thời gian truy cập nhanh

 Thao tác dễ dàng, giao diện bắt mắt

Để biết về tần suất, thói quen người dùng khi truy cập vào trang web bán bánh cần phỏng vấn một số câu hỏi:

Câu 8: Bạn đã từng mua bánh online chưa?

Một số câu trả lời tiêu biểu: 100% người được phỏng vấn trả lời đã từng mua bánh trên các gian hàng online

Câu 9: Bạn thường ghé thăm các trang web làm bánh bao nhiêu

lần/tháng?

Một số câu trả lời tiêu biểu:

 Trên 2 lần/tháng

 2 lần/tháng

 1 lần/tháng

 Thời gian rảnh rỗi

Để biết được mục đích của người dùng khi ghé thăm các trang web bán bánh chúng tôi sẽ sử dụng câu hỏi như:

Câu 10: Bạn thường mua bánh ngọt vào những dịp nào?

Một số câu trả lời tiêu biểu:

 Ngày kỉ niệm ngày cưới, ngày sinh nhật người thân

 Ngày sinh nhật

 Đi chơi cùng bạn bè, tặng người thân

Câu 11: Mục đích bạn ghé thăm các trang web về bánh để làm gì?

Một số câu trả lời tiêu biểu:

 Mua bánh

 Xem cách làm bánh

 Ngắm bánh, thư giãn

1.1.1.2.1 Giai đoạn kết thúc cuộc phỏng vấn

- Kiểm tra xem còn có bỏ sót thông tin, chi tiết nào muốn biết

- Kiểm tra những điều đã ghi chép đã hiểu rõ hay chưa

- Hỏi người trả lời xem họ có mong muốn gì nữa không

- Cảm ơn và bày tỏ mong muốn được gặp lại người được phỏng vấn

1.2 Kết quả tổng hợp sau cuộc phỏng vấn

1.2.1 Về mong muốn của người dùng về trang web

Khi truy cập vào một trang web người dùng muốn truy cập nhanh, giao diện bắt mắt, thao tác dễ dàng, có nguyên liệu bánh và cách làm

Về tần suất, thói quen người dùng khi truy cập vào trang web bán bánh:

Có tới 14 người ghé thăm trên 2 lần/ tháng, 8 người ghé thăm 2 lần/ tháng,

10 người ghé thăm 1 lần/ tháng và 5 người ghé thăm vào những thời gian rảnh rỗi

Mục đích của người dùng khi ghé thăm các trang web bán bánh:

Có tới 20 người ghé thăm với mục đích mua bánh, 9 người ghé thăm với mục đích xem bánh, giải trí, 12 người ghé thăm với mục đích xem cách làm (phụ nữ, người học làm bánh), 5 người ghé thăm với mục đích khác:

Từ khảo sát trên chúng tôi nhận thấy nhu cầu của thị trường là rất cao, có

thể tìm kiếm được lợi nhuận trong ngành này; Nắm bắt rõ được nhu cầu của

thị trường và khách hàng tiềm năng, nhóm bắt đầu xây dựng kế hoạch xây

dựng cửa hàng bánh với dịch vụ cộng thêm là có thêm khu vực cho khách tự

học làm bánh với sự hương dẫn chi tiết

2 Đặt câu hỏi

2.1 Chuẩn bị

- Nội dung câu hỏi khảo sát: Để có được những nội dung này cần xác định

mục đích thu thập thông tin đó là nhằm thu được những mong muốn của người

dùng về website (Tức là những yêu cầu mà website cần phải có) Những yêu

• Anh/ chị có thích các loại bánh ngọt không? => Phân loại đối tượng người

dùng Nếu người tham gia trả lời câu hỏi không thích thì có thể ngưng cuộc khảo sát

• Anh/ chị thường mua bánh vào những dịp gì? => Cung cấp các thông tin về

khuyến mại hay các chương trình đặc biệt vào các dịp lễ

+ Người dùng có khả năng sử dụng website một cách dễ dàng hay không kể cả khi đó là lần đầu họ sử dụng website? => Yêu cầu liên quan đến kỹ năng, khả năng của người dùng

=> Để có dữ liệu này ta cần đặt ra những câu hỏi:

• Anh/ chị thường mua bánh ở đâu? => Thống kê số lượng người dùng thường

xuyên sử dụng website để đặt hàng nhằm tiến hành thiết kế website cho phù hợp với kinh nghiệm của đại đa số người sử dụng

• Anh/ chị có thường xuyên mua sắm trên các trang TMĐT không (Shopee Food, Baemin, Go Food…)?

=> Khảo sát kinh nghiệm của người dùng về việc sử dụng một website để mua hàng online

• Anh/ chị có từng truy cập vào website của một cửa hàng bánh ngọt trước

đây không? => Thiết kế các chức năng theo mục tiêu dễ dàng sử dụng

• Anh/ chị có thường xuyên truy cập vào website tương tự hay không?

=> Thống kê được tần suất truy cập website phổ biến nhất của đa số đối tượng người dùng nhằm thiết kế các chức năng theo mục tiêu dễ dàng sử dụng

• Những vấn đề anh/ chị thường gặp phải khi mua hàng online? => Hạn

chế tối đa việc người dùng mắc các lỗi tương tự và đưa ra các giải pháp cho người dùng khi sử dụng hệ thống

+ Người dùng sử dụng website trong các ngữ cảnh khác nhau sẽ ảnh

hưởng như thế nào tới việc thiết kế website? => Yêu cầu liên quan đến

môi trường vật lý, xã hội, tổ chức, kỹ thuật trong ngữ cảnh sử dụng của người dùng

=> Để có dữ liệu này ta cần đặt ra những câu hỏi như:

• Anh/ chị thường truy cập vào website bằng thiết bị nào? => Thiết kế

responsive phù hợp trên từng thiết bị

• Anh/ chị mong muốn địa chỉ của cửa hàng được hiển thị như thế nào?

=> Cung cấp thêm thông tin cho người dùng muốn tới trực tiếp tại cửa hàng

một cách dễ dàng và nhanh chóng (như thêm vị trí bằng map thay vì sử dụng

văn bản thông thường)

+ Người dùng thường quan tâm đến gì trên một website bán bánh? => Yêu cầu về suy nghĩ và tâm lý của người dùng

=> Để có dữ liệu này ta cần đặt ra những câu hỏi:

• Anh/ chị có quan tâm tới nguồn gốc của những loại nguyên liệu mà cửa

hàng sử dụng để làm bánh không? => Cung cấp nguồn gốc các nguyên liệu

của các loại bánh

• Anh/ chị có quan tâm tới công thức làm bánh không? => Cung cấp bài viết

hoặc thông tin liên quan về cách làm bánh

• Anh/ chị thường ưu tiên gì khi quyết định mua bánh trên website? => Sắp

xếp và phân loại thông tin về các loại bánh trên website theo mong muốn của

đa số người dùng (Giá cả, chất lượng, khuyến mãi, thương hiệu)

- Hình thức khảo sát và phương pháp tiến hành:

• Thông qua email, google forms và một số các trang mạng xã hội (Facebook, Instagram)

• Khảo sát thử một nhóm 5-6 người nhằm chỉnh sửa để đưa ra được mẫu khảo sát cuối cùng

Câu hỏi Câu trả lời

3 Bạn có thích các loại bánh ngọt không?

Thích/Không thích( Thang đo 5

Phương thức thanh toán/ Tốc độ vận chuyển/ Hàng không nguyên vẹn/

Đổi trả hàng/ Khác…

2.2 Kết quả khảo sát

+ Giới tính nữ chiếm đa số (74,3%)

+ Độ tuổi phổ biến: Từ 15-40 tuổi

+ Số lượng người thích ăn bánh chiếm đa số (37,1 %) Tuy nhiên cũng có khá nhiều người giữ thái độ ở mức trung lập (20%)

+ Tỉ lệ người dùng mua bánh vào các dịp:

+ Tỉ lệ giữa các địa điểm mà người dùng mua bánh:

+ Số lượng người dùng đã từng tiếp xúc với một website tương tự chiếm đa

+ Người dùng quan tâm tới nguồn gốc của các loại nguyên liệu sử dụng để làm bánh chiếm đa số (85,7%)

+ Người dùng mong muốn địa chỉ của cửa hàng được hiển thị thông qua vị trí trên bản đồ chiếm đa số (74,3%)

+ Đa số người dùng đều gặp vấn đề về tốc độ vận chuyển (60%) và hàng không nguyên vẹn (48%)

+ Một số mong muốn khác của người dùng đối với website:

• Có thể giao hàng toàn quốc

• Không bị lỗi và đa dạng sự lựa chọn

• Rõ ràng và đảm bảo đầy đủ thông tin sản phẩm

• Sản phẩm trên website chất lượng và giá rẻ

- Vấn đề thảo luận đầu tiên: Mọi người mua bánh vào những thời điểm nào? + Tất cả đều trả lời thường mua bánh vào các dịp lễ, ngày đặc biệt như sinh nhật, ngày kỷ niệm

+ 2/3 người tham gia nữ và 1/3 người tham gia nam trả lời không nhân dịp nào

cả, sẽ mua vào những lúc muốn đồ ngọt

- Câu hỏi thảo luận thứ hai: Bạn muốn đến trực tiếp cửa hàng mua bánh hay đặt hàng qua trang web

+ 5/6 người (2 nữ, 3 nam) tham gia trả lời rằng thích mua hàng online hơn vì

+ 4/6 người (3 nữ, 1 nam) trả lời là quan tâm đến chất lượng của bánh

+ 2 người tham gia còn lại trả lời họ quan tâm đến thương hiệu và hình thức của bánh hơn vì họ mua bánh chủ yếu với hình thức làm quà tặng trong những dịp lễ quan trọng

- Câu hỏi thảo luận thứ 4: Một trang web bán bánh với giao diện đơn giản và một trang web có giao diện đẹp và có nhiều chức năng thì bạn sẽ chọn trang web nào?

+ 3/6 người (2 nữ, 1 nam) trả lời chọn trang web có giao diện đẹp vì giao diện đẹp cũng sẽ kích thích việc mua hàng

+ 3/6 người (1 nữ, 2 nam) trả lời rằng họ không quan tâm đến giao diện trang web khi truy cập trang web là họ chắc chắn sẽ đặt hàng Vì vậy chỉ một giao diện đơn giản, dễ nhìn, dễ sử dụng là được

- Câu hỏi thảo luận cuối cùng bạn có quan tâm đến công thức và cách làm bánh không

+ 2/6 người (nữ) trả lời là có Vì họ có sở thích nấu ăn và muốn làm bánh vào

- Khách hàng sẽ ưu tiên đặt hàng trên trang web

- Khách hàng quan tâm đến chất lượng của những chiếc bánh vì vậy trên trang web cần cung cấp thông tin về nguồn gốc, xuất sứ của nguyên liệu làm bánh

- Đối tượng khách hàng tiềm năng đa số là nữ, vì vậy cần chú trọng hơn về hình thức, giao diện của trang web nhưng cần đảm bảo đơn giản và dễ dùng

- Có một nhóm nhỏ khách hàng quan tâm đến công thức và cách làm bánh vì vậy thêm mục nguyên liệu và cách làm bánh vào trang web có thể là một điểm cộng đối với trang web

Xác định mục tiêu cần nghiên cứu, quan sát là một bước tối quan trọng trong quá trình tiếp cận khách hàng, mục tiêu quan sát có thể là hành vi của khách hàng khi sử dụng các trang web khác như thế nào, thái độ của họ ra sao,

họ có phàn nàn hay có lời khen gì cho trang web đó không, hay cái họ thường quan tâm nhất? Từ đó ta có thể rút ra những thứ mình cần phải có hoặc cần phải loại bỏ

Ta có thể xác định mục tiêu đơn giản nhất là qua các trang mạng xã hội, hoặc các diễn đàn thảo luận

+) Xác định đối tượng:

Sau khi đã xác định được mục tiêu, ta cần xác định được đối tượng cần phải quan sát Đối tượng quan sát có thể là một tập thể, một cá nhân hoặc cũng có thể chia ra là nam hay nữ, độ tuổi và nghề nghiệp ra sao, mức thu nhập như thế nào

Ví dụ như đối tượng là sinh viên và mức thu nhập thấp thì họ quan tâm đến những vấn đề gì? Đó có thể là giá cả của một chiếc bánh có hợp lý hay không, Cái nhìn đầu tiên khiến cho một chiếc bánh trông ngon miệng và tạo cảm giác hấp dẫn đó là độ thẩm mỹ của nó, màu sắc, trang trí, kết cấu, Có thể đối tượng sinh viên sẽ không quan tâm lắm đến nguyên liệu làm ra chiếc bánh đó bao gồm những thành phần gì, nhập từ đâu Tuy nhiên nếu đối tượng là những người có thu nhập cao và ổn định hơn thì có thể họ sẽ quan tâm đến phần xuất

xứ của nguyên liệu

+) Xác định thời điểm quan sát:

Để quá trình quan sát đạt được hiệu quả cao nhất thì ta cần phải chọn thời điểm đúng đắn và khôn ngoan, ta cần biết được phải nghiên cứu và quan sát trong khoảng thời gian cụ thể nào

+) Xác định hình thức quan sát:

Để quá trình quan sát đạt hiệu quả cao hơn ta cần chuẩn bị những hình thức

sẽ được sử dụng

Ví dụ như ghi chép, ghi âm, …

4.1.2 Kết quả quá trình quan sát:

Bảng thống kê những điều mà khách hàng quan tâm

Cứ 100 người truy cập vào website thì:

- 22% quan tâm đến giá cả

- 39% quan tâm đến chất lượng

- 21% quan tâm đến thẩm mĩ của chiếc bánh

- Còn lại 18% quan tâm đến nhãn hiệu của chiếc bánh

40% khách hàng truy cập web để mua bánh

Một số thông tin quan sát được từ các cộng đồng và diễn đàn:

- Trải nghiệm đặt bánh bị khó khăn

- Sai công thức làm bánh

- Bánh ngon, giao diện bắt mắt

- Mong muốn có video hướng dẫn đi kèm trong mục làm bánh

5 Nghiên cứu tài liệu

5.1 Những module phù hợp nhất cho thiết kế website bán bánh

Module Trang chủ

Đây là module quan trọng khi thiết kế một website cửa hàng bánh – kem

Khoảnh khắc đầu tiên luôn là khoảnh khắc quan trọng nhất Khách hàng sẽ nhớ mãi ấn tượng đầu tiên của họ về cửa hàng Chính vì thế việc xây dựng trang chủ website phải thật bắt mắt và nêu bật được những điều đặc biệt mà chỉ cửa hàng bánh mới có

Kèm với đó là hình ảnh những chiếc bánh đẹp nhất của cửa hàng Người yêu bánh không chỉ yêu hương vị mà họ còn là người yêu vẻ đẹp Điều đặc biệt không thể thiếu là khách hàng phải thấy rõ được thông tin cơ bản về cửa hàng như: tên tiệm bánh, địa chỉ, số điện thoại, mã số doanh nghiệp (nếu có), …

Module giới thiệu

Module này chính là nơi thể hiện khả năng của cửa hàng trước mặt khách hàng Nơi cho khách hàng thấy tiềm năng, tiềm lực của mình Cho họ thấy những công nghệ, bí quyết của

Đây là Module quan trọng nhất

của toàn bộ việc thiết kế website bán bánh Khách hàng vào website họ sẽ

quan tâm đến cửa hàng có những loại bánh gì Chính vì thế module này sẽ phải được chú tâm nhất

Danh mục các loại bánh

như: bánh sinh nhật,

bánh kem, bánh tiệc

cưới, bánh nướng, bánh

mì… phải thật chi tiết

Việc phân rõ module sản

phẩm sẽ giúp phân loại

Sản phẩm nổi bật

Việc sử dụng module sản phẩm nổi bật sẽ giúp khách hàng có sự gợi ý cũng như chọn lựa dễ dàng hơn Đặc biệt việc này có mức độ quan trọng cao với cửa hàng Sản phẩm nổi bật giúp tiệm bánh có đặc trưng riêng, lưu trữ những chiếc bánh hoàn hảo nhất, hợp thời nhất Như vào mùa trung thu hoặc mùa giáng sinh sẽ có những chiếc bánh nổi bật riêng Ngoài ra còn có thể dễ dàng định hình xu hướng cho người dùng, giúp họ có sự lựa chọn và kéo họ theo những chiếc bánh mà mình có

Khuyến mãi

Đây sẽ là module nằm cạnh module sản phẩm nổi bật Khách hàng sẽ rất quan tâm đến những sản phẩm đang được khuyến mãi Điều này sẽ giúp tăng đáng

kể doanh thu và đẩy mạnh những sản phẩm ít người mua Nên đây chắc chắn

sẽ là một module cần thiết cho website cửa hàng bánh

Tin tức – kinh nghiệm làm bánh, làm kem

Những người yêu bánh, họ luôn mong muốn có thể tự làm một chiếc bánh cho mình, hoặc cho người thân yêu Đây chắc chắn sẽ là module được nhiều người yêu bánh thích thú Đây

sẽ là nơi chia sẻ những kinh nghiệm làm bánh đơn giản cho khách hàng Điều này không những giúp tương tác với khách hàng mà còn làm tăng sự yêu thích của họ đối với cửa hàng bánh Bên kệnh đó kênh tin tức – kinh

hàng Cửa hàng sẽ vượt lên đối thủ một cách nhanh chóng với module này trong website

Tích hợp phương tiện truyền thông

Module này sẽ được tích hợp ở phía 4 giờ hoặc 8h của website (phần mũi tên hướng xuống) Giúp khách hàng có thể liên hệ với bạn trong khung chat tích

hợp Có thể là Facebook hoặc một trang liên lạc bất kỳ Lợi ích của module

này là giúp khách hàng liên hệ một cách dễ dàng, ngay khi họ cần Ngoài ra đây cũng là một kênh thông tin và phản hồi rất tốt cho cửa hàng

Ngoài ra, website còn tích hợp thêm một số tính năng như so sánh sản phẩm, lọc danh sách sản phẩm theo ý muốn Đây là những tính năng quan trọng đối với trải nghiệm của người dùng Điều này sẽ giúp níu chân khách hàng đến với cảu hàng lâu dài hơn

III Kết quả của phân tích dữ liệu

2 Đưa ra yêu cầu của hệ thống mới

+ Đối tượng khách hàng thường xuyên sử dụng website là các bạn nữ trong độ tuổi từ 15 đến 40 Đối tượng người dùng này đều có kinh nghiệm nhất định trong việc sử dụng website khi họ đều đã từng tiếp xúc với một trang web

bán hàng tương tự trong quá khứ Tuy nhiên họ không thường xuyên sử dụng

website để đặt mua bánh và cũng không dành quá nhiều thời gian cho việc

lướt web: chủ yếu là vào khoảng thời gian rảnh rỗi và họ thường sử dụng

điện thoại để truy cập hoặc tới trực tiếp cửa hàng để mua bánh => Responsive

và ưu tiên tính dễ dùng cho những người dùng thiếu kinh nghiệm

+ Người dùng thường xuyên mua bánh vào bất cứ lúc nào họ muốn Vì vậy

khuyến mãi không phải là thứ thu hút họ mà họ quan tâm tới chất lượng của

các loại bánh mà họ mua trên website hơn Đa số người dùng đều quan tâm

tới chất lượng và nguồn gốc xuất xứ của các loại nguyên liệu được sử dụng

để làm bánh chứng tỏ họ rất quan tâm tới vấn đề an toàn vệ sinh thực phẩm

Ngoài ra, giá cả cũng là sự ưu tiên quan trọng thứ hai sau chất lượng mà đa

số người dùng đều quan tâm tới => Thiết kế web phải đảm bảo đầy đủ thông

tin rõ ràng giúp người dùng yên tâm khi mua sản phẩm

+ Ngoài ra, đa số người dùng đều quan tâm tới cách thức làm bánh => Thiết

kế thêm chi tiết về công thức làm bánh dành cho những người có niềm đam

mê với nấu nướng

+ Vì đối tượng chủ yếu là thế hệ trẻ tiếp xúc nhiều với các công nghệ như

Google Maps nên đa số người dùng đều tìm kiếm địa chỉ của cửa hàng thông

qua vị trí định vị trên bản đồ thay vì đọc địa chỉ bằng văn bản thuần túy =>

Có thể kết hợp giữa địa chỉ bằng vị trí và địa chỉ bằng văn bản để tiện lợi cho

những người dùng muốn tìm vị trí của cửa hàng

+ Người dùng cũng gặp nhiều vấn đề liên quan tới quá trình vận chuyển => Có

thể thêm chi tiết hướng dẫn những vấn đề mà người dùng thường hay gặp

phải

IV Use case diagram

1 Sơ đồ Use case diagram

Admin, Khách hàng, Bộ phận nhập hàng (nguyên liệu, thiết bị), Shipper,

Tác nhân hệ thống ngân hàng (Thanh toán trực tuyến):

Khách xem chọn mục đăng ký thành viên

- Form đăng ký thành viên hiển thị

- Khách xem đăng nhập thông tin cá nhân vào form đăng ký

- Nhấn nút đăng ký

- Hệ thống báo kết quả quá trình nhập thông tin cá nhân Nếu thông tin nhập không chính xác thì thực hiện luồn rẽ nhánh ngoại lệ Nếu nhập chính xác thì thực hiện

bước 6

- Hệ thống cập nhật thông tin của khách xem vào danh sách thành viên

- UC kết thúc

Ngoại lệ -Nếu thông tin nhập sai: email, số điện thoại, tên hệ

thống cần đưa ra thông báo “Email đã được sử dụng”

“Số điện thoại đã được dùng”… để người dùng nhập lại

-Tiếp tục bước 3 trong chuỗi sự kiện

- Thành viên chọn chức năng đăng nhập

- Form đăng nhập hiển thị

- Nhập tên, mật khẩu vào form đăng nhập

- Hệ thống kiểm tra tên, mật khẩu của thành viên

Ngoại lệ Trường hợp người dùng nhập sai thông tin, hệ

thống hiển thị lại hệ thống đăng nhập cùng với thông báo “Tài khoản của bạn không đúng”

- Chọn: đăng ký hay đăng nhập lại

- Hệ thống yêu cầu thành viên nhập lại tên và mật khẩu

- Nếu khách xem đồng ý thì quay về bước 2 của luồng sự kiện chính, nếu không đồng ý thì UC kết thúc

2.3 Đăng xuất

Tên User Case Đăng xuất

Chuỗi sự kiện

chính

- Người dùng chọn chức năng đăng xuất tài khoản

- Thông báo hiện lên “Bạn có chắc chắc muốn đăng xuất”

+ Nếu đồng ý, đăng xuất thành công, kết thúc + Nếu hủy, quay lại trang chủ

2.4 Tìm kiếm sản phẩm

Tên User Case Tìm kiếm sản phẩm

Tiền điều kiện Đã đăng nhập thành công

Đảm bảo thông tin Người dùng dễ dàng và nhanh chóng tìm được sản

phẩm yêu thích, hoặc lựa chọn được sản phẩm mong muốn

Chuỗi sự kiện

chính

- Người sử dụng kích vào mục tìm kiếm sản phẩm

- Hệ thống hiển thị form tìm kiếm: tìm kiếm theo tên, tìm kiếm theo nhà cung cấp, tìm theo mã sản phẩm, tìm theo giá …

- Người sử dụng nhập thông tin cần thiết vào form tìm kiếm

- Nhấn nút tìm kiếm

- Hệ thống báo kết quả tìm kiếm

- Kết thúc UC

Ngoại lệ - Nếu không hiển thị thông tin mà người dùng tìm

kiếm => hiển thị thông báo tìm kiếm lại

- Quay lại bước 3 trong chuỗi sự kiện chính

2.5 Xem thông tin sản phẩm

Tên User case Xem thông tin sản phẩm

Tác nhân Khách hàng, người quản lý

Tiền điều kiện Đăng nhập thành công, tìm kiếm được sản phẩm

Đảm bảo thông tin Form thông tin chi tiết về sản phẩm hiển thị

Chuỗi sự kiện

chính

- Người quản lý, khách hàng chọn sản phẩm cần xem

- Form xem thông tin sản phẩm xuất hiện, hệ thống hiển thị thông tin về sản

Tên User Case Sửa thông tin cá nhân

Tiền điều kiện Thành viên phải đăng nhập vào hệ thống

Đảm bảo thông tin Cho phép thay đổi thông tin cá nhân

Chuỗi sự kiên chính - Thành viên chọn chức năng sửa thông tin cá nhân

-Hệ thống hiển thị form sửa thông tin với các thông tin cũ của thành viên hiện tại

- Thành viên nhập các thông tin mới

- Nhấn nút lưu thông tin

- Nếu việc cập nhật thành công thì hệ thống sẽ lưu

và cập nhật thông tin

- UC kết thúc

Ngoại lệ Thông tin nhập không hợp lệ

- Hệ thống báo việc nhập dữ liệu không hợp lệ

- Thành viên nhập lại thông tin

- Quay lại bước 4 của luồng sự kiện chính

2.7 Thêm vào giỏ hàng

Tên User Case Thêm vào giỏ hàng

Tiền điều kiện Chọn được sản phẩm

Đảm bảo thông tin Sản phẩm được đưa vào giỏ hàng

Chuỗi sự kiện chính - Chọn chức năng thêm vào giỏ hàng để đưa sản

phẩm đã chọn vào lưu trữ trong giỏ hàng Nếu chưa chọn sản phẩm mà nhấn nút thêm vào giỏ hàng thì thực hiện Ngoại lệ

- Hệ thống hiển thị thông tin sản phẩm đưa vào giỏ hàng

- UC kết thúc

Ngoại lệ Chưa chọn sản phẩm cần mua:

- Hệ thống thông báo sản phẩm chưa được chọn

Tiền điều kiện Khách hàng chọn được sản phẩm đưa vào giỏ hàng

Đảm bảo thông tin Đơn hàng được gửi

- Khách hàng nhập tiếp các thông tin : họ tên, số tài khoản, phương thức thanh toán, địa chỉ giao hàng, thời gian giao hàng, địa chỉ e mail để thanh toán đơn hàng

- Chọn gửi đơn hàng Nếu đơn hàng đã nhập đúng thì thực hiện bước 5, nếu sai thì thực hiện sáng luồng rẽ nhánh A1

- Hệ thông kiểm tra số tài khoản của khách hàng và phương thức thanh toán, nếu hợp lệ thì thực hiện bước 6, nếu sai thì thực hiện luồn rẽ nhánh A2

- Hệ thống thông báo giao dịch thành công

- UC kết thúc

Ngoại lệ Luồng rẽ nhánh A1: đơn hàng nhập sai

- Hệ thống thông báo việc tạo đơn hàng không thành công

- Hệ thống hiển thị lại form nhập thông tin và các trường nhập sai

- Khách hàng nhập lại thông tin, nếu muốn ngừng giao dịch thì thực hiện luồng sự kiện rẽ nhánh A3

- Quay lại bước 4 của luồng sự kiện chính Luồng rẽ nhánh A2: tài khoản không hợp lệ

- Hệ thống thông báo phương thức thanh toán và tài khoản của khách hàng không hợp lệ

- Khách hàng nhập lại thông tin nếu muốn tiếp tục mua hàng, nếu muốn ngừng giao dịch thì thực hiện luồng rẽ nhánh A3

- Quay lại bước 4 của luồng sự kiện chính Luồng rẽ nhánh A3: khách hàng hủy đơn hàng

- Khách hàng nhấn nút hủy bỏ đơn hàng

- Hệ thống hiển thị các sản phẩm để khách hàng thực hiện giao dịch mới

- UC kết thúc

2.9 Kiểm tra đơn hàng

Tên User Case Kiểm tra đơn hàng

Tiền điều kiện Đơn hàng được khách hàng mua

Đảm bảo thông tin Xác nhận thông tin sản phẩm

Chuỗi sự kiện

chính

- Nhân viên kinh doanh kiểm tra đơn hàng

- Hệ thống hiển thị thông tin đơn hàng

- Nhân viên xác nhận thông tin trên đơn hàng

- Kết thúc UC

2.10 Nhận và giao hàng

Tên User Case Nhận và giao hàng

Tiền điều kiện Đơn hàng được kiểm tra, đóng gói

Đảm bảo thông tin Người dùng xác nhận sản phẩm đã được giao

Chuỗi sự kiện chính - Nhân viên nhận được đơn hàng cần thực hiện

- Thay đổi trạng thái đơn hàng

- Gửi thông tin phản hồi, giao hàng thành công

- Lấy xác nhận của khách hàng

- Kết thúc UC

Ngoại lệ Nếu khách hàng không nhận hàng:

- Báo cáo cho admin cửa hàng

- Thay đổi trạng thái đơn hàng

- Trả lại đơn hàng, giao lại sau

- Quay lại bước 1 của chuỗi sự kiện chính

V Thiết kế giao diện

1 Xác định kích thước màn hình hiển thị + trình duyệt

- Desktop :

Chiều ngang mặc đinh cho Destop là 1440px kích cỡ này phù hợp với trên các

loại màn hình máy tính thông dụng

- Sử dụng các font chữ dễ đọc như Roboto

- Đường dẫn đến các trang khác cần đổi màu chữ

- Phân loại sản phẩm trên thanh ngang chính cần ngắn lại phù hợp với nguyên tắc 7+-2

- Hiển thị sản phẩm theo giá tăng dần hoặc giảm dần

- Dữ liệu phải được tối ưu hóa để xử lý các yêu cầu truy cập cùng một lúc

- Thông tin được cập nhật thường xuyên và mới nhất để tránh sai xót

- Thiết kế hệ thống thông tin đơn giản giúp người dùng không cần thao tác quá

3 bước

- Đăng ký tài khoản cá nhân người dùng đơn giản

- Thiết kế đảm bảo thống nhất màu sắc , bố cục , phông chữ , hình ảnh

- Dễ dàng tìm kiếm sản phẩm mà người dùng mong muốn ,dễ dàng xác định các thông tin, chi phí của sản phẩm

- Thông báo số lượng sản phẩm được cập nhật liên tục trên hệ thống

- Trạng thái đơn hàng , những cập nhật mới phải được thông báo nhanh chóng chính xác tới người dùng

- Các nút CTA được bố trí hợp lý kêu gọi hành động của người sử dụng

- Website có đa dạng sản phẩm cho người dùng lựa chọn

- Blog chia sẻ kiến thức và thông tin

- Giỏ hàng để người dùng có thể kiểm tra lại các sản phẩm mình mua

- Thêm hệ thống điều hướng footer để người dùng dễ dàng thao tác

3 Hệ thống lưới

Sử dụng lưới column grid, baseline grid

3.1 Lưới desktop

Chỉ ra các thông số : margin, gutter, column + hình ảnh