tiểu luận phân tích và thiết kế web đề tài phân tích và thiết kế website nongpro

Đến với NongPro người tiêu dùng tiếp cận đượcnguồn thực phẩm sạch và các mặt hàng tiêu dùng hữu cơ được nhập khẩu đạttiêu chuẩn quốc tế.Với sứ mệnh là cam kết cung cấp những sản phẩm sạc

Trang 1

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC KINH TẾ - ĐẠI HỌC ĐÀ NẴNG

BÁO CÁO CUỐI KỲ

HỌC PHẦN PHÂN TÍCH VÀ THIẾT KẾ WEB

ĐỀ TÀI:

PHÂN TÍCH VÀ THIẾT KẾ WEBSITE NONGPRO

GVHD: Trương Hồng TuấnNhóm: Nhóm O

Lớp học phần: ELC3018_47K31.2

Sinh viên thực hiện:1 Trần Thanh Đô2 Cao Thị Thu Cẩm3 Nguyễn Thị Thùy Giang4 Lê Thị Lan Anh

5 Nguyễn Trần Như Phương

Đà Nẵng, tháng 12 năm 2023

Trang 2

Nhóm O | Phân tích và thiết kế website_47K31.2MỤC LỤC

1.GIỚI THIỆU DOANH NGHIỆP 3

1.1 Giới thiệu chung 3

1.2 Đánh giá về trang web hiện tại và đề xuất cải thiện 4

1.2.1 Bố cục 4

1.2.2 Màu sắc 7

1.2.3 Hình ảnh 8

2.TRIỂN KHAI KẾ HOẠCH CHO WEBSITE 10

2.1 Xác định mục đích và mục tiêu của trang web 10

2.1.1 Mục đích 10

2.1.2 Mục tiêu 10

2.2 Khách hàng mục tiêu 11

2.3 Chân dung khách hàng mục tiêu 14

2.4 Xác định nội dung của Website 14

2.6 Chỉ định hệ thống điều hướng trang web 19

2.7 Phân tích triển khai 22

2.7.1.Giao diện người dùng 22

2.7.2.Page layout 23

2.7.3.Thiết kế chi tiết 24

2.7.4.Thiết kế đáp ứng 28

2.6.2.Triển khai tính năng thương mại điện tử 29

2.6.3.Kiểm tra, xuất bản, bảo trì 34

2.6.4.Kiểm tra ngữ nghĩa 37

3.PROMOTION PLAN 39

3.1 SEM Plan 39

3.1.1 SEO 39

2

Trang 3

Nhóm O | Phân tích và thiết kế website_47K31.2

3.1.2 PPC 42

3.2 Social Media 47

3.2.2.Email Marketing 48

3.3 One year circle 51

4.TÀI LIỆU THAM KHẢO 58

5.ĐÁNH GIÁ MỨC ĐỘ ĐÓNG GÓP CỦA THÀNH VIÊN 60

3

Trang 4

Nhóm O | Phân tích và thiết kế website_47K31.21.GIỚI THIỆU DOANH NGHIỆP

1.1 Giới thiệu chung

NongPro được thành lập vào cuối năm 2016 ở địa chỉ 819 Ngô Quyền, Đà

khái niệm “Thực phẩm sạch” trở nên không còn xa lạ với người dân ViệtNam, mà trở thành văn hóa tiêu dùng của người Việt: Trồng sạch, Bán sạch, Ănsạch.

đồng thời mong muốn góp phần phát triển nền nông nghiệp xanh của quêhương ngày một tiên tiến hơn Đến với NongPro người tiêu dùng tiếp cận đượcnguồn thực phẩm sạch và các mặt hàng tiêu dùng hữu cơ được nhập khẩu đạttiêu chuẩn quốc tế.

Với sứ mệnh là cam kết cung cấp những sản phẩm sạch với chất lượng cao nhấtvà đảm bảo an toàn cho thị trường người tiêu dùng Đà Nẵng và cả nước bằngmột cái tâm trong sáng và trách nhiệm với cộng đồng Và hơn nữa là mongmuốn trở thành đơn vị cung cấp thực phẩm sạch uy tín và thân thiện với ngườitiêu dùng Việt Nam và gần hơn là người dân Đà Nẵng.

Với triết lý vì sức khỏe cộng đồng, vì một nền nông nghiệp sạch Việt Nam Vàcam kết người tiêu dùng sẽ có được nguồn thực phẩm sạch, nguồn gốc rõ ràng,đảm bảo an toàn và hàm lượng dinh dưỡng cao nhất, phục vụ tận tình, chu đáo.Luôn ủng hộ, ưu tiên nhất đối với sản phẩm sạch cải thiện và bảo vệ môitrường Luôn nỗ lực đóng góp vào sự phát triển chung cùng cộng đồng Các

đối tác hợp tác cùng có lợi, minh bạch, lành mạnh.

Một số kênh thông tin liên lạc:

https://www.facebook.com/NongProDN SĐT: 02363 86 66 76

Trang 5

Về phần bố cục web được bố trí chưa hợp lí:

Cách bố trí trang bị phân tán, không tập trung chính vào sản phẩm Điềunày dễ gây rối mắt người xem và họ có thể rời trang web ngay lập tức.Thông tin liên hệ để đầu trang web làm mất tầm nhìn của người xem vềhình ảnh đại diện của trang web.

Thiết kế thanh điều hiến chưa phù hợp Cụ thể như:

Nhiều phần trên thanh điều hướng chưa phù hợp làm ảnh hưởng tới quátrình tìm kiếm thông tin của người dùng nên lược bỏ bớt để khách hàngdễ dàng tìm kiếm thông tin mà họ cần hơn.

Mục Hỏi Đáp trên thanh điều hướng không có thông tin: Phần thông tincủa khách hàng không được cập nhật trong mục Hỏi Đáp của website Dođó, khi khách hàng cần thông tin thêm về sản phẩm hay có bất cứ thắc

5

Trang 6

mắc gì khác gì thì gây bất tiện rất lớn đối với người mua.

6

Trang 7

Đề xuất thay đổi:

Chuyển phẩn liên hệ trong hình ảnh chính xuống dưới footer, thay đổihình ảnh phù hợp hơn

Phần logo được đặt 1 góc bên trái trang web, người dùng có thể dễ dàngnhìn thấy logo và thanh công cụ mọi nơi trong trang web giúp ngườidùng dễ dàng điều hướng trang web hơn

Thanh điều hướng chỉ bỏ các mục quan trọng như: trang chủ, giới thiệu,sản phẩm, chính sách, tin tức

7

Trang 8

Phần danh mục sản phẩm được đưa vào trang sản phẩm giúp người dùngdễ dàng tìm kiếm các sản phẩm họ cần hơn

8

Trang 9

Thay đổi lại màu xanh phù hợp với mục đích trang web là trang web báncác sản phẩm rau sạch, rau hữu cơ, gây thiện cảm với người nhìn hơn

1.2.3 Hình ảnh

Về phần hình ảnh khá kém chất lượng:Hình ảnh khá mờ và không rõ nét

Độ phân giải ảnh không cao và kích thước ảnh nhỏ Có phóng to lênđược nhưng bị nhòe và vỡ nét

9

Trang 10

=> Gây ảnh hưởng đến trải nghiệm người dùng khi truy cập trang web, ảnhhưởng trực tiếp đến hình ảnh thương hiệu và hiệu quả quảng cáo của sảnphẩm trên trang web.

Thay đổi hình ảnh rõ nét hơn, thêm một vài hình ảnh khác mô tả rõ hơn vềsản phẩm

10

Trang 11

Nhóm O | Phân tích và thiết kế website_47K31.22.TRIỂN KHAI KẾ HOẠCH CHO WEBSITE

2.1 Xác định mục đích và mục tiêu của trang web2.1.1 Mục đích

Đưa Nongpro là một không gian cho khách hàng tiến hành các giao dịch mua bán,trao đổi, tìm kiếm thông tin sản phẩm – dịch vụ theo cách trực tuyến

Với khả năng đăng tải ít nhất 2 bài viết chuẩn SEO trong 1 ngày, giảiquyết vấn đề khách hàng đang quan tâm cho website, tôi muốn tăng lưulượng khách hàng truy cập website lên 500 người/tuần

Đưa ra các chương trình khuyến mãi thu hút khách hàng khi mua hàngtrên trang web tăng thêm 1000 người tiếp cận website và tỷ lệ chuyểnđổi khách hàng hơn 70%, tăng tương tác tích cực với khách hàng để thuhút họ.

Relevant (Tính liên quan):

Tạo mối quan hệ tốt với khách hàng giúp tiếp cận được nhiều kháchhàng tiềm năng, tăng cơ hội có thêm khách hàng mới

11

Trang 12

Nâng cao hiệu quả marketing, tương tác khách hàng một cách chuyênnghiệp, tạo dựng được niềm tin và thương hiệu đối với khách hàng

Đưa ra các sản phẩm giả cả phù hợp với thị hiếu người tiêu dùng, nhằmmở rộng thêm thị trường tiếp cận.

Time (Thời hạn đạt được mục tiêu): Thời gian bắt đầu thực hiện 1/10/2023 vàthực hiện trong vòng 3 tháng

2.2 Khách hàng mục tiêu

Dựa trên các tiêu thức:Đặc điểm nhân khẩu học:Độ tuổi:

Theo Nghiên cứu của Nielsen Việt Nam, 60% người mua sắm trực tuyến từ nữvà 40% mua sắm online từ nam Độ tuổi mua sắm online từ 25-29 tuổi chiếm55% Đa số người mua online đều là người độc thân, 55% đối tượng kháchhàng là nhân viên văn phòng sử dụng dịch vụ mua sắm online.

Chính vì thế nongpro lựa chọn khách hàng mục tiêu của mình là những kháchhàng nữ có độ tuổi từ 20-35, những người quan tâm đến sức khỏe, lối sống lànhmạnh

Thu nhập: Những khách hàng có mức thu nhập trung bình trở lên, (trên 5 triệuđồng)

Nghề nghiệp: Phần lớn là sinh viên hoặc nhân viên văn phòng, những người có ítthời gian để đi mua sắm

12

Trang 13

(Theo Nielsen, Chân dung khách hàng mua sắm tại Việt Nam)

Khu vực địa lí: Theo dữ liệu từ website world population review 2023, dân số ĐàNẵng đã bước qua mốc 1,2 triệu người Trung bình mỗi năm ở thành phố đángsống này dân số tăng thêm gần 25.000 người - tương đương một phường có dânsố thuộc loại động nhất, nhì của thành phố Mật độ dân số và quy mô của thànhphố Đà Nẵng đang ngày càng tăng, do đó nhu cầu sử dụng cũng không ngừngnâng cao, gia tăng tỷ lệ mua của khách hàng Vì đây là thành phố du lịch nổitiếng, phát triển theo hướng hiện đại hóa, đông dân nên nhu cầu mua hàng trựctuyến cũng ngày tăng cao.

Do đó, Nongpro lựa chọn khu vực tập trung phát triển sản phẩm là Đà Nẵng vìđây là một thành phố đông dân và đây cũng là cơ sở chính của Nongpro

13

Trang 14

(Theo dữ liệu từ website world population review 2023)Đặc điểm về tâm lý:

Khách hàng sẵn sàng trả tiền để được sử dụng thực phẩm hữu cơ, tươi sạch Họmuốn bảo vệ sức khỏe và môi trường.

Đối tượng khách hàng mục tiêu của NongPro thuộc nhóm tính cách cẩn thận, chuđáo, nhạy cảm, thích sử dụng các sản phẩm hữu cơ, tươi, sạch

Thích sử dụng những sản phẩm rõ nguồn gốc, xuất xứ

Khách hàng là những người muốn tiết kiệm thời gian, họ không thích trực tiếp điđến của hàng để lựa chọn mà sẽ lựa chọn một cửa hàng uy tín, chất lượng đểđặt hàng.

Đặc điểm về hành vi:

Đầu năm 2023, Việt Nam có 77,93 triệu người dùng Internet, chiếm 79,1% tổngdân số Ngoài ra, số lượng người dùng mạng xã hội cũng đạt con số 70 triệu,tương đương với 71% tổng dân số

Vì vậy, Khách hàng của Nongpro sẽ là những người thích sử dụng mạng xã hội,thường xuyên lướt web, thích mua sắm và tìm kiếm sản phẩm trên các nền tảngxã hội

14

Trang 15

Khách hàng là những người ưa thích sử dụng những sản phẩm hữu cơ (organic),họ quan tâm và thường xuyên tìm kiếm các sản phẩm này

Khách hàng là những người thường xuyên đặt hàng online trên mạng xã hộiTóm lại, khách hàng mục tiêu của Nongpro là những người có xu hướng quan tâmđến sức khỏe có mức thu cập khá, từ độ tuổi 25 – 50 tuồi sống tập trung ở Đà Nẵng.

2.3 Chân dung khách hàng mục tiêu

Xác định nội dung của Website2.4.1 Trang chủ

Trang chủ (Homepage): Trang chủ là trang đầu tiên khi người dùng truycập vào website của Nongpro Bao gồm các sản phẩm chính của trang web,

Trang chủ của Nongpro gồm có:

Phần header : Cố định, giúp người dùng dễ dàng điều hướng thông tin dù ở bấtkì vị trí nào trên trang web, bao gồm:

15

Trang 16

Nhóm O | Phân tích và thiết kế website_47K31.2Logo của thương hiệu giúp tăng độ nhận diện thương hiệu.

Hộp tìm kiếm giúp người dùng tìm kiếm thông tin mình mong muốn một cách

nhanh chóng.

Thanh menu điều hướng gồm: Trang chủ, giới thiệu ,sản phẩm, chính sách, tin

tức, tra cứu đơn.

Giỏ hàng Giúp người dùng quản lý các sản phẩm mà họ thêm vào

Đăng nhập/Đăng ký: Yêu cầu người dùng đăng nhập hoặc đăng ký thành viênPhần biểu tượng: Biểu tượng của web chính là : mũi tên di chuyển nhanh và

hộp tin nhắn Người dùng có thể trực tiếp click vào biểu tượng messenger để tròchuyện với trợ lý bán hàng nếu có bất kỳ thắc mắc hay câu hỏi nào muốn giảiđáp Ngoài ra mũi tên di chuyển nhanh giúp người dùng trỏ về đầu trang dễdàng, nhanh chóng mà không phải cuộn thanh lên xuống.

Phần Footer: danh mục web nằm ở chân trang Thông tin trong phần footer bao

gồm: Phần giới thiệu cơ bản về Nongpro, thông tin liên hệ và fanpage facebookcủa trang web

2.4.3 Trang con

Trang con được tạo ra để giúp người truy cập có nhiều thông tin chi tiết hơnvề các danh mục lớn ở phần trang chủ Các trang con của Nông Pro gồm có:

Trang giới thiệu: Cung cấp được thông tin cơ bản về doanh nghiệp, tạo sự

tin tưởng cho người dùng khi mua hàng.

Trang sản phẩm: Những sản phẩm được bán đều tập trung tại đây, với nhiều

danh mục loại hàng khác nhau, đa dạng về sản phẩm, số lượng cũng như về giá.

Trang chính sách: Cung cấp thông tin chi tiết về các chính hoàn trả sản phẩmTrang tin tức: Các bài viết nói về sản phẩm, công dụng và chức năng của

chúng sẽ được Nông Pro đặt vào trang con này, để giúp trải nghiệm mua hàngđược nâng cao, có thể chọn được những gì mà người mua đang cần với tư liệu,nguồn tham khảo chuẩn.

16

Trang 17

Nhóm O | Phân tích và thiết kế website_47K31.22.5 Cấu trúc trang

2.5.1 Sơ đồ trang web

2.5.2 Wirefram

17

Trang 18

18

Trang 19

19

Trang 20

2.6 Chỉ định hệ thống điều hướng trang web

Nongpro chọn hệ thống điều hướng Horizontal navigation menu( Menu điềuhướng theo chiều ngang) Nongpro quyết định sử dụng hệ thống điều hướngnày với những lý do sau:

Là menu phổ biến trong các thiết kế web hiện đại và thường đi kèm vớinhiều tùy chọn hiệu ứng và thiết kế đồ họa để làm cho trang web trở nênthú vị và chuyên nghiệp hơn.

Menu ngang thường được người dùng đánh giá cao vì tính trực quan và dễsử dụng Người dùng có thể dễ dàng xem tất cả các danh mục và lựa chọnmục cần truy cập một cách nhanh chóng.

Giúp trình bày danh mục và các mục con một cách rõ ràng khiến cho ngườidùng dễ dàng hiểu được cấu trúc của trang web

Việc sử dụng menu ngang có thể giúp tăng cường tương tác của ngườidùng, bởi vì họ có thể dễ dàng duyệt qua các danh mục và khám phá cácsản phẩm của Nongpro

20

Trang 21

21

Trang 22

Hamburger menu giúp tập trung sự chú ý của người dùng vào nội dungchính của trang web

Tích hợp thêm Drop down navigation menu – Menu điều hướng dạng thả

dàng nhận biết toàn bộ những loại sản phẩm mà Nongpro cung cấp

2.6.1.1 Customer Journey Map

22

Trang 23

2.7 Phân tích triển khai

2.7.1 Giao diện người dùng

Mục tiêu: Tạo ra một giao diện thân thiện, sạch sẽ và phản ánh giá trị của thựcphẩm hữu cơ - tự nhiên, lành mạnh, và bền vững.

Font chữ và kiểu chữ: Nongpro chọn Font Montersrrat làm font chính cho

trang web của mình Đây là một loại font chữ không chân chúng thường đượcsử dụng cho các web bán hàng mang phong cách sang trọng, hiện đại.

Bảng màu: Sử dụng màu xanh lá màu chủ đạo mang lại cảm giác tươi mới,

tích cực cho người dùng khi vào trang web Nó cũng thể hiện đúng các sảnphẩm trang web mang lại là các sản phẩm tươi, sạch, thiên nhiên

23

Trang 24

Hình ảnh thực phẩm chất lượng cao: Hình ảnh cần được đầu tư chỉnh chuhơn để có thể truyền tải thông điệp, tăng tính thẩm mỹ và thu hút sự chú ýcủa người dùng Mọi hình ảnh Nongpro sử dụng đều là các hình ảnh sắcnét, rõ ràng và có độ phân giải cao để hiển thị chi tiết tốt hơn nhằm tạo ramột trải nghiệm thị giác tốt cho người dùng

2.7.2 Page layout

Dành cho máy tính

24

Trang 25

Dành cho điện thoại:

2.7.3 Thiết kế chi tiết

Trang chủ

Trang sản phẩm

25

Trang 26

Giỏ hàng

Trang thanh toán

26

Trang 27

Trang tin tức

Live chat & Help desk

27

Trang 28

Newsletter Sign-up

28

Trang 29

Chính sách

2.7.4 Thiết kế đáp ứng

Dành cho máy tính:

29

Trang 30

Dành cho điện thoại

2.6.2 Triển khai tính năng thương mại điện tử

Tìm kiếm thông tin sản phẩm

30

Trang 31

Tìm kiếm các mô tả về sản phẩm

Thêm vào giỏ hàng

Xem giỏ hàng

Trang 32

Gợi ý các sản phẩm tương tự:

Tiến hành thanh toán

Trang 33

Xem tiếp các sản phẩm khác

Các plugin đã sử dụng:

33

Trang 34

34

Trang 35

2.6.3 Kiểm tra, xuất bản, bảo trì

Kiểm tra: Sau khi hoàn thành trang web, chúng ta cần kiểm tra các yếu tố sau

trước khi phát hành trang web đó ra ngoài:

Kiểm tra thiết kế: Kiểm tra chất lượng hình ảnh, font chữ, màu sắc,logo thương hiệu

Kiểm tra chức năng: Kiểm tra các tính năng giỏ hàng, thanh toán (nếucó), tính năng đăng nhập, đăng ký

Kiểm tra các liên kết: Các liên kết điều hướng trên Menu chính, liên kết35