tiểu luận phân tích và thiết kế web báo cáo tiến độ 3 web design

Thì khi đến với DuLi mọi thứ gói gọn chỉ trong một“click”Sự hiệu quảMột nền tảng cho thuê đồ chuyên dụng tích hợp nhiều tính năng sẽ nâng caohiệu quả sử dụng, trải nghiệm cho quý khách h

Trường Đại học Kinh tế- Đại học Đà NẵngKhoa Thương mại điện tử

Nguyễn Thị Mỹ Trinh Phạm Thị Kim Yến

Phùng Thế Phúc

Đà Nẵng, 16/04/2023

1 Lý do lựa chọn đề tài 32 Mục tiêu của dự án 4

III MoSCoW ANALYSIS 6

I Introduction to the organization (deliverable 1)

1 Lý do lựa chọn đề tài

- Du lịch Việt Nam được Nhà nước Việt Nam xem là một ngành kinh tế mũinhọn vì cho rằng đất nước Việt Nam có tiềm năng du lịch đa dạng và phongphú Năm 2019, ngành Du lịch Việt Nam lập kỳ tích lần đầu tiên đón 18 triệulượt khách quốc tế, tăng 16,2% so với năm 2018 Năm 2019, du lịch Việt Namnhận giải thưởng Điểm đến di sản hàng đầu thế giới do World Travel Awardstrao tặng, Điểm đến Golf tốt nhất thế giới do World Golf Awards trao tặng - Sau đợt dịch Covid-19 thì đến năm 2022 du lịch Việt Nam ghi nhận sự tăng

trưởng mạnh của khách nội địa khi đạt 101,3 triệu lượt, tăng 168,3% so với kếhoạch, vượt mức trước dịch.

- Theo số liệu thống kê từ Tổng cục Du lịch, trước Covid-19, lượng khách nộiđịa tăng đều qua các năm và đạt đỉnh vào 2019 với 85 triệu lượt Năm 2022,sau khi gỡ bỏ mọi hạn chế đi lại, lượng khách nội địa cả năm đã đạt 101,3 triệulượt, tăng 168,3% so với mục tiêu 60 triệu và vượt con số của 2019 Riêng batháng hè, lượng khách đạt hơn 35 triệu Doanh thu đạt 495.000 tỷ đồng, vượt23% kế hoạch Nhiều chuyên gia khẳng định, đây là năm hồi sinh của du lịchnội địa.

- Năm 2023, ngành du lịch Việt Nam đặt mục tiêu đón 110 triệu lượt khách,trong đó khoảng 102 triệu khách nội địa và 8 triệu lượt khách quốc tế Tổng thutừ du lịch 650.000 tỷ đồng.

3

- Điều này cho thấy du lịch tại Việt Nam đã dần phục hồi và phát triển trở sauđợt dịch Đời sống ngày càng phát triển, con người dần biết chăm lo hơn chobản thân Ngoài những giờ làm việc giới trẻ hiện nay có xu hướng đi du lịchnhiều, đặc biệt là các loại hình du lịch mới, gần gũi với thiên nhiên

+ Ngày nay, các loại hình du lịch là phong trào những năm gần đây như: điphượt, đi dã ngoại, cắm trại được khá nhiều người yêu thích, nhất là với giới trẻthích khám phá Họ thường có sở thích đem theo hành trang như: lều, trại, bếpnướng, bàn ghế, đèn, hay là quần áo, phụ kiện du lịch, Đây là các vật dụngchỉ dùng một lần, mua về để lâu một thời gian không sử dụng sẽ dễ hư hỏng,gây lãng phí

+ Đối với những người ít khi đi du lịch họ rất ít kinh nghiệm trong việc, mua đồ,cũng như là thuê đồ để dã ngoại, các shop cho thuê đồ trên thị trường cũng kháít người biết đến, do không được thường xuyên đi thuê

+ Các cuộc vui chơi bộc phát, thường không có nhiều thời gian cho việc chuẩn bịđể tìm nơi thuê và đi xa tốn kém Các nhà cho thuê cũng khó tiếp cận kháchhàng của mình.

Trên thị trường đã có nhiều app sinh ra là nơi trao đổi mua bán hàng trực tuyến,nhưng app dành cho thuê đồ hoàn toàn không quá nhiều

Vậy nên nhóm đã quyết định đề xuất xây dựng một app trung gian là nơi diễnra trao đổi cho thuê đồ du lịch Đặc biệt, khi các thành viên dự án nhóm đều lànhững con người sinh sống và học tập ở Đà Nẵng, được có cơ hội trải nghiệmvới vô số cảnh đẹp, núi, biển ở nơi đây Nhận ra những bất cập khó khăn trongquá trình đi du lịch như: không biết thuê lều trại ở đâu, mặc áo quần để checkinsao cho phù hợp…

=> Việc xây dựng một ứng dụng trung gian - là nơi diễn ra trao đổi cho thuê đồdu lịch để biến chuyến du lịch của bạn trở nên được trọn vẹn và thuận tiện hơn

2 Mục tiêu của dự án

- DuLi là nền tảng online giúp kết nối chủ tiệm và khách thuê trong việc thuê vậtdụng du lịch, mong muốn hướng đến một lối sống tối giản, tiết kiệm và tiêudùng bền vững Thay vì trước đây bạn phải thuê đồ bằng cách hỏi bạn bè ngườithân hoặc tìm kiếm một cách thủ công thì nay

Too long to read onyour phone? Save

to read later onyour computer

Save to a Studylist

- DuLi ra đời là một trang web thương mại điện tử trực tuyến có thể hiện ra chongười dùng vô số lựa chọn chỉ trong một thao tác vô cùng đơn giản và tiết kiệmthời gian.

- Đồng thời cũng có thể tìm và thuê được những món đồ chỉ dùng trong thời gianngắn cho những nhu cầu đặc biệt với chất lượng như mới, cùng giá thuê vôcùng hấp dẫn.

- Các giá trị mà dự án mang lại:Sự mới mẻ

Duli ra đời trở thành giải pháp hoàn toàn mới mẻ về việc xây dựng một nềntảng về cung cấp đồ du lịch Thay vì trước đây khi tìm kiếm đồ để thuê bạnphải bỏ ra hàng giờ để hỏi bạn bè hay tìm kiếm các thông tin rời rạc trên cácnền tảng mạng xã hội Thì khi đến với DuLi mọi thứ gói gọn chỉ trong một“click”

Sự hiệu quả

Một nền tảng cho thuê đồ chuyên dụng tích hợp nhiều tính năng sẽ nâng caohiệu quả sử dụng, trải nghiệm cho quý khách hàng.

Chuyên biệt hóa theo nhu cầu khách hàng

DuLi phân loại riêng các danh mục đồ cho thuê cũng như đề xuất dụng cụ thuêtừng địa điểm du lịch cụ thể Với tính năng chuyên biệt là cho thuê đồ du lịchgiúp DuLi đáp ứng được nhu cầu khách hàng có sở thích đam mê du lịch, khámphá, thích phiêu lưu mạo hiểm

Giá cả

Mang lại cho quý khách hàng một trải nghiệm trọn vẹn khi đi du lịch với việctiết kiệm tối đa chi phí đi du lịch Thay vì khách hàng phải mua mới thì khi tìmđến DuLi có thể thuê lại với mức giá thấp hơn mà lại nhận được giá trị trảinghiệm tương đương.

II Review Current Web (including web audit from deliverable 2)

III Identify the website’s purpose and target audience (get from deliverable 2)

IV Determine the website’s general content (deliverable 1)

V Select the website’s structure (from deliverable 2)

VI Specify the website’s navigation system (navigation flows and CJM from deliverable 2)

5

VII Design the look and feel of the website

VIII Detail Design (Wireframe and UI design from deliverable 3)

IX Ecommerce features deployment

X Test, publish, and maintain the website (deliverable 1)

XI Semantics check (deliverable 2)

XII Implementation Analysis (deliverable 2)

XIII Promotion plan

XIV In-text citation

XV References

- Sẽ có một màn hình đăng nhập thôngqua người dùng sẽ đăng nhập vào hệthống

- Sẽ có thanh tìm kiếm trên thanh menuđể người dùng thông qua đó tìm kiếmsản phẩm

- Sẽ có giao diện sản phẩm, mô tả chitiết thông tin.

BR.04 - Người dùng sẽ được định vị vị trí khi

cho phép ứng dụng truy cập vị trí Thấp Trung bìnhBR.05 - Khách hàng có thể lưu trữ thông tin

sản phẩm để tiện cho việc thanh toán

Trung bình Trung bình

6

và đặt lại các đơn hàng trong tươnglai.

BR.06 - Hệ thống sẽ hiển thị trạng thái đơn

hàng để người dùng dễ theo dõi Thấp Trung bìnhBR.07 - Người dùng sẽ đánh giá sản phẩm sau

- Hệ thống sẽ hiển thị khung chat đểngười dùng liên hệ trực tiếp vớingười bán

Trung bình Trung bình

XVII.MoSCoW ANALYSIS

1 Đăng nhập và đăngký

Cho phép người dùng đăng nhập và đăngký tài khoản để quản lý thông tin cá nhân,đặt hàng, theo dõi, đơn hàng, vv

Must Have

2 Xem danh sách sảnphẩm

Hiển thị danh sách các sản phẩm có sẵntrên website, bao gồm hình ảnh, giá cả,đánh giá, người bán, vv

Must Have

4 Thêm sản phẩm vàogiỏ hàng

Cho phép người dùng thêm sản phẩm vàogiỏ hàng

Must Have

5 Thanh toán và đặthàng

Cung cấp tính năng thanh toán trực tuyếnvà đặt hàng, bao gồm lựa chọn phươngthức thanh toán, nhập thông tin giao hàng,

Must Have

7

vv.6 Tùy chỉnh thông tin

Should Have

8 Xem lịch sử đơn hàng Hiển thị lịch sử các đơn hàng đã đặt trướcđó, bao gồm thông tin về sản phẩm, giácả, trạng thái đơn hàng, vv.

Should Have

9 Lọc sản phẩm, sắpxếp theo giá, đánhgiá, thương hiệu

Cho phép người dùng lọc và sắp xếp sảnphẩm dựa trên các tiêu chí như giá cả,đánh giá, thương hiệu, vv.

Should Have

10 Tích hợp mạng xã hội Cho phép người dùng chia sẻ sản phẩm,đánh giá, hoặc gửi link sản phẩm đếnmạng xã hội

Could Have

13 Tích hợp mã giảmgiá, khuyến mãi

Cung cấp tính năng nhập mã giảm giá,khuyến mãi trong quá trình thanh toán đểgiảm giá sản phẩm

Could Have

14 Tích hợp hệ thốngphản hồi, gợi ý sảnphẩm

Cung cấp tính năng gợi ý sản phẩm dựatrên hành vi mua hàng trước đó của ngườidùng, vị trí khách hàng hiện tại

Won't Have

8

15 Tích hợp tính năngquản lý kho, đơnhàng

Cung cấp tính năng quản lý kho hàng, đơnhàng, theo dõi số lượng tồn kho, vv.

Won't Have

16 Tích hợp tính năngtrả giá

Cung cấp tính năng trả giá của khách hàngvới người bán

Won't Have

9

XVIII.Wireframe và Mockup1 Wireframe

1.1 Trang chủ

10

1.2 Trang danh mục sản phẩm

11

1.3 Trang sản phẩm

12

1.4 Trang sản phẩm chi tiết

13

1.5 Trang hỗ trợ khách hàng

14

1.6 Trang blog

15

1.7 Trang trở thành chủ tiệm

16

1.8 Trang giỏ hàng

17

1.9 Trang thanh toán

1.10 Trang đăng nhập

18

1.11 Trang đăng ký

1.12 Trang tài khoản của tôi

19

2 Mockup

2.1 Trang danh mục sản phẩm

2.2 Trang sản phẩm

20

2.3 Trang chủ

21

2.4 Trang sản phẩm chi tiết

22

2.5 Trang hỗ trợ khách hàng

2.6 Trang blog

23

2.7 Trang trở thành chủ tiệm

24

2.8 Trang giỏ hàng

25

2.9 Trang thanh toán

26

2.10 Trang đăng nhập

27

2.11 Trang đăng ký

28

2.12.Trang tài khoản của tôi

29

XIX.Prototype web design into selected platform1 Design System

- Logo được thiết kế theo 2 màu chủ đạo là xanh dương và trắng và có 3 mẫulogo để thích ứng với các nền ảnh khác nhau:

+ Logo màu xanh và tên thương hiệu màu trắng: Dùng để sử dụng trên cácảnh có nền tối.

+ Logo màu xanh và tên thương hiệu màu đen: Dùng để sử dụng trên cácảnh có màu nền sáng

+ Logo màu trắng và tên thương hiệu màu trắng: Dùng để sử dụng trên cácảnh có màu nền tương phản như: xanh, cam, tím, vàng,

→ Đặc biệt trên Logo Duli có sự phối hợp hiệu ứng Gradient chuyển màu từ màuxanh đậm đến nhạt dần, giúp logo trở nên độc đáo và bắt mắt hơn.

Bảng màu chủ đạo của Duli Website

- Duli Travel sử dụng 3 màu chủ đạo xuyên suốt trong quá trình thiết kế đó làxanh dương, vàng và xám Bên cạnh đó còn kết hợp với màu đen để làm nộidung trong quá trình sử dụng.

- Màu xanh là màu của niềm tin và trách nhiệm, không những thế còn tạo ra cảmgiác thanh bình, gần gũi

- Đúng với lĩnh vực mà Duli hướng đến đó là du lịch, màu xanh dương cũng cóthể đồng nghĩa với sự tận hưởng và thư giãn Vì vậy Duli Travel mong muốngợi nhắc đến những trải nghiệm, những khoảng thời gian thư giãn và nghỉ ngơicủa khách hàng mỗi khi sử dụng dịch vụ hay trải nghiệm website của Duli.

2 Trang chủ

3.1 Header● Thành phần:- Các mục chính+ Logo+ Trang chủ+ Danh mục sản phẩm+ Chăm sóc khách hàng+ Blog

+ Trở thành chủ tiệm- Các tính năng khác như:+ Giỏ hàng

32

+ Tài khoản● Mô tả:

- Header ở trang chủ được thiết kế có phần text màu trắng nổi bật trên khung nềntối → Người dùng dễ nhìn thấy từng mục trên Header.

- Thanh Header của Duli được thiết kế điều hướng đến các thành phần quantrọng trong website như: Danh mục sản phẩm, chăm sóc khách hàng, Blog, Trởthành chủ tiệm, để khách hàng dễ dàng thao tác đến các trang khác ngay phíatrên màn hình mà không cần phải đi tìm url dẫn đến từng trang

- Giỏ hàng sẽ được hiển thị trên thanh và thể hiện được số mặt hàng đang có ởtrong giỏ

3.3 Slide banner

33

● Thành phần

- Gồm 3 ảnh kích thước full màn hình- 2 nút điều hướng ảnh trước, sau- 3 nút phía dưới hiển thị vị trí ảnh

- Bên cạnh chương trình khuyến mãi hấp dẫn, Duli còn ưu tiên thiết kế với hìnhảnh đẹp mắt để thu hút khách hàng chú ý đến thông tin quảng cáo.

- Button “Xem ngay” dưới mỗi ảnh quảng cáo để kích thích người dùng nhấpvào khi đang quan tâm tới sản phẩm đó một cách nhanh chóng

→ Làm tăng lượt chuyển đổi khách hàng3.5 Banner tiện ích

- Banner tiện ích giúp tăng giá trị của dịch vụ trong mắt khách hàng, được Dulisử dụng như một cách để thu hút và duy trì khách hàng trên trang web.

35

- Với thiết kế chia thành 4 cột với 4 tiện ích mà khách hàng có thể nhận được khisử dụng dịch vụ của Duli:

+ Chính sách đảm bảo quyền lợi người thuê+ 100% hàng chính hãng

+ Được kiểm tra trước khi nhận hàng+ Hỗ trợ tư vấn nhiệt tình 24/7

- Nó cũng như một lời cam kết về dịch vụ của Duli đến với khách hàng, đặtbanner này ở trang chủ sẽ giúp khách hàng tin tưởng hơn về thương hiệu.3.6 Danh mục sản phẩm

- Tất cả dịch vụ của Duli được chia thành 4 danh mục chính gồm:

+ Cắm trại - Leo núi: Các sản phẩm hỗ trợ hoạt động này như lều trại, túi ngủ,bàn ghế,

+ Thiết bị - Công nghệ: Máy quay Gopro, thiết bị thắp sáng, + Phương tiện: Xe máy, xe đạp

+ Du lịch dưới nước: SUP, phụ kiện bơi, thuyền bơm hơi, ván trượt, 3.7 Banner sản phẩm mới/ sản phẩm bán chạy

36

● Thành phần

- Hình ảnh sản phẩm- Tên sản phẩm - Giá sản phẩm- Đánh giá sản phẩm- Nút “xem sản phẩm”

● Mô tả

Banner ngay trên trang chủ mục đích đề xuất cho khách hàng những loại sảnphẩm mới hoặc những sản phẩm bán chạy để gợi ý thêm sự lựa chọn cho kháchhàng

3.8 Banner trở thành chủ tiệm

37

● Thành phần

- 1 ảnh

- Heading “Trở thành chủ tiệm”- Thông tin

- Button “Trở thành chủ tiệm ngay”

● Mô tả

- Duli là một nền tảng kết nối giữa người mua và người bán nên không thể thiếusót thông tin cho những người muốn mở rộng kinh doanh trên nền tảng Duli.- Content trong banner được sử dụng ở hình thức đặt ra các câu hỏi và câu CTA

ở cuối kèm button nhằm thúc đẩy hành động của người dùng nếu họ là mộttrong những câu trả lời ở trên.

- Khi click vào Button người dùng sẽ được điều hướng đến trang con thể hiệnđầy đủ thông tin, quy định, phúc lợi khi trở thành chủ tiệm trên nền tảng Duli.3.9 Banner blog

Banner dùng để điều hướng người dùng đến các trang con blog của website, nơi chứanhững bài viết hữu ích cho những người quan tâm đến du lịch như cẩm nang, trảinghiệm du lịch, chia sẻ mẹo, tips khi du lịch hay review dụng cụ sản phẩm.

3.10 Footer

38

- Footer có chức năng cung cấp thông tin liên hệ, liên kết đến các trang quantrọng, thông tin về công ty, liên kết đến các trang xã hội, và chứa các chínhsách và điều khoản sử dụng của trang web.

- Footer sẽ thể hiện logo và slogan của Duli

- Ngoài ra còn có các danh mục hậu cần cửa web thương mại, các chính sách vàđiều khoản được hiển thị để hiển thị các thông tin khi khách hàng có nhu cầutìm hiểu Các logo của kênh social được gắn link để khi khách hàng click vàicon sẽ dẫn đến link của kênh social cửa hàng.

● Google map: Cung cấp cho khách hàng vị trí hiện tại của mình và những cửahàng trong khu vực gần với người dùng, người dùng có thể sử dụng bản đồ ởchế độ full màn hình bằng cách nhấn vào nút “View larger map”

● Footer: Hiển thị các nội dung quan trọng của doanh nghiệp đến với kháchhàng: các chính sách đối với khách hàng, dịch vụ chăm sóc khách hàng, blog,người dùng có thể liên hệ với doanh nghiệp thông qua các kênh mạng xã hộinhư Facebook, Instagram,youtube, email

39

● Bộ lọc sản phẩm:

- Đưa ra các lựa chọn hiển thị sản phẩm cho khách hàng

- Khách hàng có thể lựa chọn xem tất cả sản phẩm của cửa hàng, hoặc cóthể chọn hiển thị các sản phẩm theo loại sản phẩm cũng như đặc tính củasản phẩm

- Bên cạnh đó người dùng còn có thể lựa chọn hiển thị các sản phẩm theomàu sắc sở thích, giá cá phù hợp với túi tiền của người dùng

- Khách hàng có thể tìm kiếm các sản phẩm mà mình muốn, chọn hiển thịcác sản phẩm nổi bật, các sản phẩm gần đây nhất, hiển thị theo giá tiền(từ thấp đến cao, từ cao đến thấp)…

40

● Hiển thị các sản phẩm có liên quan:

- Đề xuất cho khách hàng các sản phẩm có liên quan với sản phẩm kháchhàng đang tìm kiếm, các sản phẩm khác của shop hoặc các sản phẩm cócùng chức năng của các shop khác

● Giới thiệu thêm về Website DULI

- Hướng khách hàng đến trang blog của trang web để khách hàng có thểđọc được các bài viết thú vị , hấp dẫn bằng cách nhấn vào nút “Tìm hiểuthêm”

41