BÁO CÁO DELIVERABLE 1 – LẬP KẾ HOẠCH WEB

TRƯỜNG ĐẠI HỌC KINH TẾ - ĐẠI HỌC ĐÀ NẴNGKHOA THƯƠNG MẠI ĐIỆN TỬ

––––––––––

BÁO CÁO

DELIVERABLE 1 – LẬP KẾ HOẠCH WEB

Giáo viên hướng dẫn: Trương Hồng Tuấn Nhóm F Lớp: 47K22.2

Trần Văn Hà

Dương Khánh LinhCao Thị Thùy TrangĐinh Quốc Việt

II Xác định mục đích và đối tượng mục tiêu của trang web: 4

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

2 Nhu cầu, mong muốn, kỳ vọng của khách hàng mục tiêu: 4

3 Mục đích của trang web: 5

III Xác định nội dung chung của website: 6

1 Homepage: 6

2 Trang con: 6

IV Cấu trúc website: 7

V Hệ thống điều hướng của trang web: 7

VI Thiết kế giao diện của trang web: 11

VII Kiểm tra, xuất bản và duy trì trang web: 16

1 Kiểm tra trang web: 16

2 Xuất bản và duy trì trang web: 17

VIII Xem lại trang web hiện tại: 17

pg 2

I Giới thiệu về tổ chức: SICKO

Từ nền tảng vững chắc của Hard Mode, một thương hiệu tiên phong trong phân khúc thời trang đường phố giá rẻ, đã ghi dấu ấn mạnh mẽ với giới trẻ Việt Nam nhờ chất lượng sản phẩm vượt trội và trải nghiệm mua sắm tuyệt vời Trên nền tảng thành công đó, SICKO ra đời như một bước tiến mới, mang đến cho khách hàng những trải nghiệm thời trang cao cấp hơn.

SICKO chú trọng đầu tư vào chất liệu cao cấp, đường may tỉ mỉ và thiết kế sáng tạo, tạo nên những sản phẩm thời trang không chỉ đẹp mắt mà còn bền bỉ theo thời gian

SICKO không chỉ là một thương hiệu thời trang, mà còn là một phong cách sống SICKO khuyến khích giới trẻ tự tin thể hiện bản thân và theo đuổi đam mê SICKO đồng hành cùng bạn trên mọi hành trình, giúp bạn luôn tự tin và tỏa sáng.

Tạo ra những bộ sưu tập thời trang độc đáo, phản ánh cá tính và phong cách của giới trẻ địa phương, đồng thời cam kết với việc sử dụng nguyên liệu và quy trình sản xuất bền vững để bảo vệ môi trường.

 Tạo ra các chiến lược tiếp thị sáng tạo và hiệu quả để tăng cường sự nhận diện thương hiệu và tăng doanh số bán hàng.

 Xây dựng một trải nghiệm mua sắm độc đáo thông qua cửa hàng vật lý và trực tuyến, tập trung vào dịch vụ và trải nghiệm cá nhân hóa cho khách hàng.

 Xây dựng mối quan hệ chặt chẽ với cộng đồng trẻ qua các sự kiện, hoạt động xã hội và chiến dịch quảng cáo địa phương.

Trở thành nguồn cảm hứng và biểu tượng cho các bạn trẻ yêu thời trang Sicko không chỉ cung cấp sản phẩm thời trang chất lượng cao mà còn mang lại trải nghiệm mua sắm độc đáo và tinh tế.

 Nam nữ nằm trong khoảng từ 17 - 35 trên phạm vi toàn quốc  Khách hàng mục tiêu có thu nhập trung bình - khá.

 Tâm lý: Yêu thích thời trang đường phố, năng động và cá tính  Hành vi:

o Quan tâm đến chất lượng sản phẩm và trải nghiệm mua sắm o Có khả năng chi trả cho các sản phẩm thời trang chất lượng

o Sẵn sàng thử nghiệm những xu hướng thời trang mới.

a Nhu cầu:

pg 4

 Khách hàng có nhu cầu tìm kiếm và khám phá các sản phẩm thời trang phản ánh phong cách và sở thích của họ, bao gồm cả việc sử dụng bộ lọc và tìm kiếm theo danh mục, màu sắc, kích cỡ, và giá cả.

 Họ muốn có thông tin chi tiết về sản phẩm, bao gồm hình ảnh chất lượng cao, mô tả sản phẩm đầy đủ và thông số kỹ thuật.

 Khách hàng cần một trang web mua sắm trực tuyến dễ sử dụng, mượt mà và tiện lợi, từ việc duyệt sản phẩm đến thanh toán và giao hàng  Khách hàng có thể nhận được thông tin về các chương trình khuyến

mãi, giảm giá và sự kiện đặc biệt từ trang web.

b Mong muốn:

Khách hàng mục tiêu của thương hiệu thời trang trẻ mong muốn trang web của doanh nghiệp cung cấp trải nghiệm mua sắm trực tuyến tiện lợi và dễ dàng Họ muốn thấy một giao diện hiện đại, hấp dẫn và dễ sử dụng Trang web cần cung cấp thông tin chi tiết về sản phẩm, hình ảnh chất lượng cao, và các tính năng như tìm kiếm và lọc sản phẩm để giúp họ dễ dàng tìm kiếm và mua sắm Đồng thời, khách hàng mong đợi có các tùy chọn thanh toán và giao hàng linh hoạt và thuận tiện.

c Kỳ vọng:

SICKO kỳ vọng rằng doanh nghiệp sẽ cung cấp những sản phẩm độc đáo, chất lượng và giá trị tốt Họ mong đợi sự đa dạng và linh hoạt trong sản phẩm, kết hợp với trải nghiệm mua sắm thuận tiện và dễ dàng Khách hàng cũng mong muốn được tương tác và nhận được hỗ trợ chuyên nghiệp từ doanh nghiệp, cũng như thấy thương hiệu tham gia vào các hoạt động trách nhiệm xã hội và môi trường.

Mục đích của SICKO không chỉ là tạo ra một nền tảng mua sắm và biểu đạt phong cách cá nhân mà còn là một cơ hội kinh doanh thú vị, tiếp cận được nhiều khách hàng mục tiêu từ đó gia tăng doanh số Trang web giúp tiếp cận đến một lượng lớn khách hàng tiềm năng, không chỉ trong khu vực địa lý mà

còn trên toàn thế giới Nó cung cấp một cách tiếp cận thuận tiện và linh hoạt cho cả người bán và khách hàng, giúp tối ưu hóa quy trình mua sắm và giao dịch.

Một trang web chuyên nghiệp và phản ánh chất lượng có thể giúp xây dựng uy tín và sự tin cậy cho thương hiệu của người bán Thông qua các chiến lược tiếp thị trực tuyến, doanh nghiệp có thể thu hút và thu thập thông tin của khách hàng tiềm năng mới.

 Ai: SICKO - một thương hiệu thời trang đường phố.

 Cái gì: Cung cấp quần áo và phụ kiện thời trang đường phố độc đáo, chất lượng cao.

 Tại sao: sản phẩm chất lượng và giá rẻ.

 Ở đâu: Bao gồm thông tin liên hệ và địa chỉ cửa hàng.

 Chức năng tìm kiếm: Cho phép người dùng dễ dàng tìm thấy các sản phẩm cụ thể.

 Banner, hình ảnh : để nhận diện SICKO.

 Shop: gồm danh mục sản phẩm, hình ảnh sản phẩm chất lượng, thông tin mô tả sản phẩm, video sản phẩm, review.

 Blog: Nội dung chủ yếu là text, hướng dẫn , các phong cách thời trang

IV.Cấu trúc website:

Kết hợp Hierarchical Navigation và Global Navigation, người dùng có thể dễ dàng tìm thấy thông tin họ cần.Việc sử dụng Hierarchical Navigation giúp tăng trải nghiệm người dùng, khiến trang web trở nên dễ sử dụng và trực quan hơn, cải thiện khả năng tìm kiếm của trang web, người dùng sẽ dễ dàng tìm thấy

Hierarchical Navigation cung cấp điều hướng chi tiết đến các loại sản phẩm cụ thể Khi người dùng chọn một loại sản phẩm cụ thể, trang web sẽ hiển thị danh sách các sản phẩm thuộc loại đó.

Giúp người dùng dễ dàng tìm thấy thông tin họ cần bằng cách tổ chức nội dung theo cách phù hợp với nhu cầu:

 Sử dụng các thẻ phân loại: Thẻ phân loại giúp người dùng phân loại nội dung theo các chủ đề hoặc loại nội dung.

 Sử dụng chức năng tìm kiếm: Chức năng tìm kiếm giúp người dùng nhanh chóng tìm thấy thông tin họ cần.

 Sử dụng các liên kết liên quan: Các liên kết liên quan giúp người dùng chuyển đổi giữa các trang web có liên quan.

Hệ thống liên kết văn bản trên trang web: Các liên kết văn bản được bố

trí ở vị trí dễ thấy trên trang web, hỗ trợ người dùng điều hướng và tìm kiếm thông tin, sản phẩm một cách thuận tiện Định dạng liên kết phù hợp với mục đích của trang web, đồng thời thay đổi màu sắc khi được kích hoạt.

 Trang chủ: Dẫn về trang chủ.

 Sản phẩm: Dẫn đến trang con hiển thị các sản phẩm  Blog: Dẫn đến trang con tin tức

 Liên hệ: Dẫn đến trang con "Liên hệ".

Hệ thống liên kết hình ảnh trên trang web:

 Hình ảnh logo: Thể hiện thương hiệu và tạo dấu ấn cho doanh nghiệp.

 Hình ảnh sản phẩm: Giới thiệu sản phẩm một cách trực quan, sinh động, thu hút sự chú ý của khách hàng Khi nhấn vào sẽ dẫn đến trang thông tin chi tiết và đặt hàng sản phẩm.

 Hình ảnh banner xoay vòng: Quảng bá các sản phẩm, dịch vụ hoặc chương trình khuyến mãi của doanh nghiệp Khi nhấn vào sẽ dẫn đến trang sản phẩm hoặc dịch vụ liên quan.

pg 8

 Hình ảnh icon liên hệ: Cung cấp thông tin liên lạc của doanh nghiệp, hỗ trợ khách hàng dễ dàng kết nối Khi nhấn vào sẽ mở hộp thoại Messenger, liên kết đến số điện thoại hoặc địa chỉ của doanh nghiệp.

Liên kết ẩn: Menu hamburger của Sản phẩm Khi click vào menu

hamburger, danh mục sản phẩm chính sẽ hiện ra Danh mục sản phẩm chính:

 Bao gồm các danh mục sản phẩm chính như “Áo”, “Áo khoác”, “Quần”, “Cặp sách”, “Phụ kiện”.

 Khi click vào một danh mục sản phẩm chính, danh sách các danh mục sản phẩm con tương ứng sẽ hiện ra.

Danh mục sản phẩm con:

 Bao gồm các danh mục sản phẩm chi tiết hơn trong danh mục sản phẩm chính.

 Ví dụ: Danh mục sản phẩm con "Áo" có thể bao gồm "Áo Polo", "Áo thun Unisex", "Áo sơ mi",

 Khi click vào một danh mục sản phẩm con, danh sách các sản phẩm thuộc danh mục con đó sẽ hiển thị.

Các nút đồ họa liên kết:

 Thanh tìm kiếm sẽ có nút liên kết với thao tác thực hiện việc lọc thông tin theo từ khóa.

 Tại “Tài khoản” sẽ có nút liên kết đến trang con Đăng nhập/đăng ký tài khoản.

 Tại “Giỏ hàng” sẽ có nút liên kết đến trang con phần giỏ hàng (nơi khách hàng đã lưu các sản phẩm)

 Tại “Thông báo” sẽ có nút liên kết đến trang con hiển thị các thông báo.

Trang con (Subsidiary pages): Xuất hiện dưới thanh điều hướng (Navigation Bar) và thụt vào lề trái.

 Trang chủ: Liên kết văn bản dẫn đến trang chủ.

 Danh mục: Liên kết văn bản dẫn đến trang con hiện tại.

Trang đích (Landing/entry pages): Xuất hiện dưới thanh điều hướng (Navigation Bar) và thụt vào lề trái.

 Tên danh mục: Liên kết văn bản dẫn đến trang con  Tên sản phẩm: Văn bản hiển thị tên sản phẩm.

Primary Navigation (Thanh công cụ chính): Bao gồm các liên kết chính

đến các trang quan trọng của trang web, bao gồm:  Trang chủ: Dẫn về trang chủ của website  Sản phẩm: Dẫn đến trang danh mục sản phẩm  Blog: Dẫn đến trang blog của website.

 Liên hệ: Dẫn đến trang liên hệ của website.

Subsidiary Navigation (Thanh điều hướng phụ): Xuất hiện trên các trang

con của mục Sản phẩm Bao gồm các liên kết đến các danh mục sản phẩm con:

pg 10

 Áo: Dẫn đến trang danh mục sản phẩm "Áo"  Quần: Dẫn đến trang danh mục sản phẩm "Quần".

 Phụ kiện: Dẫn đến trang danh mục sản phẩm "Phụ kiện".

Contextual Navigation (Thanh điều hướng ngữ cảnh): Xuất hiện trên các

trang con của các danh mục sản phẩm con Bao gồm các liên kết đến các loại sản phẩm cụ thể trong từng danh mục:

Adaptive Navigation (Điều hướng thích ứng):Thay đổi và hiển thị các liên

kết phù hợp với từng ngữ cảnh của trang web.

Trên trang sản phẩm "Áo thun", thanh điều hướng sẽ hiển thị các liên kết đến các loại áo thun khác nhau, như áo thun nam, áo thun nữ, áo thun cổ tròn, áo thun cổ V.

Trên trang blog, thanh điều hướng sẽ hiển thị các liên kết đến các bài viết blog mới nhất hoặc các bài viết blog liên quan đến chủ đề đang đọc.

Hình ảnh đóng vai trò vô cùng quan trọng trong việc tạo ấn tượng và thu hút người dùng khi truy cập website Chúng có khả năng tác động trực tiếp đến thị giác của người xem, dẫn đến quyết định đánh giá chất lượng thiết kế web và thương hiệu.

Sử dụng hình ảnh hiệu quả:

 Truyền tải thông điệp nhanh chóng: Hình ảnh có thể truyền tải thông điệp một cách trực quan và dễ hiểu hơn so với văn bản, giúp người xem nắm bắt nội dung website một cách nhanh chóng.

 Nâng cao trải nghiệm người dùng: Hình ảnh đẹp mắt và phù hợp sẽ giúp tăng tính thẩm mỹ cho website, thu hút sự chú ý của người xem và tạo trải nghiệm tốt hơn cho họ.

 Tăng hiệu quả kinh doanh: Sử dụng hình ảnh hiệu quả có thể giúp doanh nghiệp thu hút khách hàng tiềm năng, tăng tỷ lệ chuyển đổi và thúc đẩy doanh số bán hàng.

Yếu tố thiết kế hình ảnh:

 Phù hợp với phong cách thương hiệu: Hình ảnh cần đồng nhất với phong cách thiết kế chung của website và thương hiệu, thể hiện được bản sắc và giá trị của doanh nghiệp.

 Chất lượng cao: Hình ảnh cần có độ phân giải cao, rõ ràng và sắc nét để tạo ấn tượng tốt với người xem.

 Liên quan đến nội dung: Hình ảnh cần có liên quan mật thiết đến nội dung website để giúp người xem dễ dàng hiểu được thông điệp mà doanh nghiệp muốn truyền tải.

pg 12

2.Phông chữ và kiểu chữ:

Font chữ Kode Mono là một font chữ sans-serif hiện đại, năng động, phù hợp với giới trẻ là đối tượng website nhắm tới Nhóm lựa chọn Kode Mono làm font chữ chính cho website của bạn bởi những lý do sau:

Dễ đọc và rõ ràng:

Font chữ Kode Mono:

Kode Mono có nét chữ vuông vắn nhưng vẫn đảm bảo sự rõ ràng và dễ đọc cho người dùng Nhờ vậy, nội dung website sẽ được truyền tải một cách hiệu quả, giúp người dùng dễ dàng tiếp thu thông tin.

Hiện đại và năng động:

Kode Mono mang phong cách hiện đại, năng đọng, phù hợp với xu hướng hiện nay Font chữ này góp phần tạo nên giao diện website chuyên nghiệp và thu hút, giúp nâng cao hình ảnh.

Linh hoạt và đa dạng:

Kode Mono có nhiều kiểu chữ (Regular, Italic, Bold, etc.) và độ dày khác nhau, cho phép sử dụng linh hoạt trong từng trường hợp Ví dụ:

 Font chữ Kode Mono Regular: Dùng cho nội dung chính, mô tả sản phẩm, dịch vụ.

 Font chữ Kode Mono Bold: Dùng cho tiêu đề, danh mục sản phẩm, thông tin quan trọng.

Tương thích tốt:

Kode Mono là font chữ web được Google Fonts hỗ trợ, đảm bảo tương thích tốt với nhiều trình duyệt và thiết bị Nhờ vậy, website sẽ hiển thị đẹp mắt và đồng nhất trên mọi nền tảng.

Lựa chọn bảng màu:

Màu sắc chủ đạo: Nhóm lựa chọn màu trắng làm gam màu chủ đạo cho website Bảng màu được phối hợp dựa trên các nguyên tắc phối màu cơ bản trong thiết kế.

pg 14

Lý do lựa chọn:

Màu trắng mang đến cảm giác tươi mới, năng động và trẻ trung, tạo sự cân bằng.

Phối màu trắng đơn sắc: Sử dụng một màu chủ đạo hoặc nhiều sắc độ khác nhau của cùng một màu giúp tạo sự hài hòa, thống nhất cho website.

Lợi ích:

 Tăng tính thẩm mỹ: Bảng màu đẹp mắt sẽ thu hút sự chú ý của khách hàng và tạo ấn tượng tốt về thương hiệu.

 Nâng cao trải nghiệm người dùng: Bảng màu dễ nhìn sẽ giúp khách hàng dễ dàng tìm kiếm thông tin và sản phẩm trên website.

 Thể hiện bản sắc thương hiệu: Bảng màu phù hợp sẽ giúp thể hiện phong cách và giá trị của thương hiệu Sicko.

Nội dung chính là phần quan trọng nhất của website, nơi thu hút sự chú ý của khách hàng và truyền tải thông điệp của doanh nghiệp Nhóm thiết kế

sẽ bố trí nội dung chính ở vị trí trung tâm của giao diện web, đảm bảo dễ nhìn và dễ tiếp cận cho người dùng bằng cách sắp xếp nội dung hợp lý:

 Sử dụng tiêu đề rõ ràng: Sử dụng tiêu đề rõ ràng và súc tích để người dùng dễ dàng hiểu được nội dung của từng phần.

 Sử dụng hình ảnh và video: Hình ảnh và video giúp thu hút sự chú ý và tăng tính hấp dẫn cho nội dung.

 Sử dụng phông chữ dễ đọc: Chọn phông chữ dễ đọc và phù hợp với phong cách của website.

 Sử dụng bố cục khoa học: Bố trí nội dung hợp lý, khoa học và dễ

Menu điều hướng:

Giúp người dùng dễ dàng điều hướng đến các trang khác trong website Bố trí dựa trên các mục chính: giới thiệu, sản phẩm, dịch vụ, đối tác, tin tức, liên hệ,

Slider/banner quảng cáo:

Hiển thị ngay dưới phần header, thu hút sự chú ý của người dùng Giúp quảng bá sản phẩm, dịch vụ và tăng tính hấp dẫn cho website Hình ảnh phải được lựa chọn kỹ lưỡng, thiết kế đẹp mắt.

pg 16

1.Kiểm tra trang web:

 Kiểm tra về bố cục và nội dung của trang web có đúng bản thiết kế về hình ảnh, màu sắc, font chữ, kiểu chữ,

 Kiểm tra các chức năng của trang web (như đăng nhập, đăng ký, tìm kiếm, liên hệ, giỏ hàng, thanh toán, ) có hoạt động bình thường.

 Kiểm tra giao diện website: Đảm bảo rằng giao diện người dùng hoạt động tốt trên các trình duyệt phổ biến như Chrome, Firefox, Cốc Cốc, và đảm bảo trang web hiển thị tốt trên các thiết bị di động và máy tính bảng (responsive).

 Đảm bảo rằng các liên kết trong trang web được sắp xếp một cách hợp lý và hoạt động bình thường.

 Kiểm tra tốc độ tải trang: Sử dụng công cụ như Gtmetrix, Google Analytics,… để đánh giá tốc độ tải trang web và tối ưu hóa nó.

 Kiểm tra các mã tracking của: Google Tag Manager, Google Analytics, Facebook Pixel, đã được tích hợp để theo dõi hiệu suất và hoạt động của trang web.

 Sao lưu và phục hồi: Thực hiện sao lưu toàn bộ trang web và cơ sở dữ liệu trước khi ra mắt Đảm bảo rằng có kế hoạch phục hồi nhanh chóng nếu có sự cố nào đó sau khi trang web được ra mắt.

 Xuất bản: sử dụng hệ thống quản lý nội dung (CMS) wordpress hoặc Odoo để tạo lập và xuất bản trang web.

 Nơi lưu trữ: Một số dịch vụ lưu trữ có phí phổ biến và uy tín có phí hiện nay như Bluehost, HostGator, Ultahost,…

 Cách duy trì và cập nhật trang web:

o Thường xuyên cập nhật thông tin, nội dung mới (có thể về sản phẩm, tin tức hay khuyến mãi) và bỏ các nội dung cũ.

o Kiểm tra thường xuyên các tính năng của trang web.