Download Phân tích & thiết kế web and more Essays (university) Economics in PDF only on Docsity!
ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC KINH TẾ
KHOA THƯƠNG MẠI ĐIỆN TỬ
PHÂN TÍCH VÀ THIẾT KẾ WEB: WEB PLANNING
Giảng viên hướng dẫn: TS. Trương Hồng Tuấn
Lớp: 47K22.
Nhóm thực hiện: J
Thành viên: Nguyễn Minh Thảo Hiền (Leader)
Nguyễn Thúy Diễm
Trương Minh Được
Nguyễn Thành Long
Trương Nhật Quang
PHẦN TRĂM ĐÓNG GÓP
Tổng % bài báo cáo = 100% Họ và tên Phần trăm đóng góp Nguyễn Thúy Diễm 20% Trương Minh Được 20% Nguyễn Minh Thảo Hiền 20% Nguyễn Thành Long 20% Trương Nhật Quang 20%
A. GIỚI THIỆU DOANH NGHIỆP
1. Tên doanh nghiệp: Noir Studios 2. Địa chỉ: 266 Phan Châu Trinh, Nam Dương, Hải Châu, Đà Nẵng. 3. Ngành hàng: Quần áo. 4. Các kênh kinh doanh hiện có: Facebook, Instagram, Shopee và Tiktok. 5. Tổng quan về doanh nghiệp:
- Noir Studios là một thương hiệu thời trang địa phương (local brand) ra đời vào năm 2016 tại Đà Nẵng. Ngay từ đầu, người sáng lập đã định hướng Noir Studios theo phong cách tối giản (minimalism) và toàn bộ trang phục sẽ do chính Noir thiết kế.
- Với quan điểm “Less is more”, đội ngũ của Noir luôn cố gắng tạo ra những loại quần áo đơn giản nhưng vẫn chỉnh chu và dễ dàng phối với nhiều kiểu trang phục. Theo thời gian, Noir thường xuyên mang đến nhiều bộ sưu tập ấn tượng, và nhiều loại vải mang lại sự thoải mái cho khách hàng như linen, cotton,... cũng được doanh nghiệp ứng dụng để phát triển sản phẩm. Nhờ sự nỗ lực đó nên đến thời điểm hiện tại, Noir Studios vẫn luôn là sự ưu tiên hàng đầu của một bộ phận giới trẻ khi nhắc đến thời trang tối giản.
- Nói đến phong trào thời trang, Noir rất ít khi tạo ra cách sản phẩm theo xu hướng vì theo quan điểm của doanh nghiệp những sản phẩm đó không mang tính bền vững. Noir Studios hướng đến những sản phẩm thời trang không bị lỗi thời và có thời gian sử dụng lâu nhất cho khách hàng. 6. Sứ mệnh, tầm nhìn và slogan:
- Sứ mệnh: Tạo ra trang phục tối giản và đa dụng để mang lại sự thoải mái, lịch sự và niềm vui trong tất cả câu chuyện của khách hàng.
- Tầm nhìn: Trở thành thương hiệu thời trang tối giản hàng đầu Việt Nam, mang đến cho khách hàng phong cách sống tinh tế và bền vững.
- Slogan: "Less design, more stories" B. LẬP KẾ HOẠCH XÂY DỰNG WEBSITE STEP 1: Xác định mục đích và đối tượng mục tiêu của trang web 1.1. Xác định mục đích và đối tượng mục tiêu của trang web
- Goals: ● Primary: Tăng độ nhận diện ● Secondary: Tăng doanh thu và lợi nhuận trên doanh nghiệp
Cung cấp chính sách và thông tin cần thiết đến khách hàng SEO Số liệu SEO tác động như thế nào đến traffic của website?
- Theo thống kê từ SparkToro, kết quả tìm kiếm tự nhiên của Google đang đem đến cho 59,2% tổng lưu lượng truy cập các web trên thế giới.
- Theo thống kê của Search Engine Land thì tỷ lệ khách hàng truy cập vào trang web từ việc chủ động tìm kiếm chiếm lên đến 51%. Ngoài ra, với cùng một từ khóa tỷ lệ click qua quảng cáo chỉ chiếm 6% trong khi tỷ lệ click qua kết quả tìm kiếm tự nhiên lên đến 64%.
- Theo HubSpot 75% người tìm kiếm không bao giờ lướt qua trang đầu tiên của kết quả tìm kiếm
- Tìm kiếm thúc đẩy lưu lượng truy cập vào các website nhiều hơn 300% so với phương tiện truyền thông xã hội. (IronPaper)
- Objective: ● Lượng Traffic của trang Web đạt 10000 trong thời gian 3 tháng. ● Doanh thu tăng 5% so với quý I/ ● Đạt top 1 SEO trong thời gian 3 tháng về chủ đề liên quan đến “Áo kẻ sọc” ● Đăng tối thiểu 1 bài SEO/ ngày trong suốt 3 tháng đầu. note: Phong cách tối giản 1.2. Audience
- Nhân khẩu học: ● Tuổi: 20 - 40 tuổi ● Nghề nghiệp: Sinh viên, người đi làm ● Giới tính: Nam/Nữ ● Thu nhập: 3 triệu/ tháng
- Tâm lý học: ● Lối sống: giản dị, lạc quan, thoải mái, gọn gàng, tiết kiệm. ● Sở thích: các sản phẩm thân thiện với môi trường, thích đọc sách, các hoạt động giải trí ngoài trời. ● Giá trị: đề cao sự tối giản, thoải mái và lịch sự trong cách ăn mặc tuy nhiên vẫn đáp ứng về tính thời thượng trong sản phẩm. Chú trọng nhiều vào chất lượng sản phẩm và trải nghiệm khi sử dụng sản phẩm. Ngoài ra, sản phẩm phải có tính đa dụng, dễ dàng trong việc phối đồ. ● Thái độ: Có cách ứng xử lịch sự, trưởng thành và tinh tế trong lối sống hằng ngày
- Có đầy đủ thông tin doanh nghiệp và các chính sách mà ở các nền tảng khác không cung cấp.
- Có điều hướng qua các trang khác của doanh nghiệp như: shopee, tiktok, facebook, instagram,...
- Có chuyên mục giải đáp thắc mắc và tư vấn.
- Expectations:
- Thiết kế ấn tượng, chuyên nghiệp.
- Tốc độ tải trang nhanh.
- Hình ảnh đẹp, thể hiện được sự đa dụng của sản phẩm: phối với các phong cách khác nhau.
- Được hỗ trợ 24/24, phản hồi nhanh chóng các thắc mắc và vấn đề.
- Không cung cấp quá nhiều thông tin cá nhân.
- Phương thức thanh toán đa dạng và bao gồm: ví điện tử, ATM, tiền mặt, ngân hàng và COD.
- Bộ lọc phù hợp, dễ tương tác để lựa chọn ra sản phẩm mong muốn. 1.4. Website purpose statement
- Để gia tăng độ nhận diện thương hiệu của Noir, trang web của Noir cần phải:
- Giao diện người dùng (UI) tạo được dấu ấn riêng của thương hiệu, thể hiện qua: concept, font chữ, bảng màu thương hiệu,...
- Có trang “About us” nhằm cung cấp câu chuyện và định hướng của NOIR.
- Sử dụng các nền tảng truyền thông để quảng cáo và tăng độ tương tác qua Website.
- Hình ảnh sản phẩm thể hiện rõ đặc trưng và concept mà NOIR hướng đến.
- Nhằm xây dựng một Website chuyên nghiệp, dễ sử dụng thì trang web sẽ đáp ứng các tiêu chí sau:
- Phát triển Website phù hợp với mọi thiết bị và bố cục rõ ràng.
- Đảm bảo Semantic web đúng chuẩn, dung lượng hình ảnh phù hợp để tối ưu hoá tốc độ tải trang.
- UI phù hợp, dễ tìm kiếm và không “thách đố” khách hàng. STEP 2: Xác định nội dung chung của trang web 2.1. Nội dung chính của website
- Noir Studios là một thương hiệu thời trang với khuynh hướng nhắm đến lối sống tối giản (minimalism). Do đó, nội dung chính của website sẽ xuyên suốt hướng đến phong cách tối giản. Website sẽ hiển thị thông tin chi tiết về từng sản phẩm: hình ảnh, mô tả, giá cả, chất liệu, hướng dẫn bảo quản cùng với các gợi ý phối đồ. Trang chủ sẽ hiển thị danh mục sản phẩm các sự kiện đáng chú ý để khách hàng dễ dàng theo dõi và mua sắm. Bên cạnh đó, trang blog sẽ có vai trò chia sẻ
những câu chuyện truyền cảm hứng về những người theo đuổi phong cách tối giản - màu sắc, cá tính mà thương hiệu đem lại. 2.2. Nội dung chi tiết từng trang
- Trang chủ: Giới thiệu về thương hiệu, sản phẩm nổi bật và thông tin liên hệ ● Danh mục sản phẩm: Hiển thị tên danh mục, hình ảnh, mô tả sản phẩm, giá bán và sắp xếp sản phẩm theo thứ tự: mới nhất, bán chạy nhất hoặc sản phẩm đang khuyến mãi. ● Thanh điều hướng: Giúp người dùng di chuyển linh hoạt trên website và tìm kiếm thông tin dễ dàng. ● Banner quảng cáo cho các chương trình khuyến mãi. ● Về công ty: Thông tin tuyển dụng Mã số thuế Liên hệ nhượng quyền Câu chuyện ra đời ● Thông tin liên hệ: Địa Chỉ: Cho khách hàng biết Noir là doanh nghiệp kinh doanh hợp pháp và có địa chỉ cụ thể. Làm tăng độ tin cậy và uy tín cho thương hiệu. Khách hàng cũng có thể tới trực tiếp cửa hàng để mua sắm. Hotline: kênh liên hệ trong trường hợp khẩn cấp Email: là kênh giao tiếp hiệu quả để khách hàng có thể liên hệ, gửi thư điện tử. Biểu mẫu liên hệ: Cung cấp biểu mẫu để khách hàng có thể gửi yêu cầu hỗ trợ hoặc đánh giá sản phẩm của Noir Studios. Các kênh Social Media khác: Cung cấp liên kết về các kênh social media khác của Noir Studios như: Facebook, Instagram hoặc kênh bán hàng Shopee. ● Hỗ trợ FAQS: bộ các câu hỏi thường gặp, giải đáp cho khách hàng các thắc mắc cơ bản về Noir và các sản phẩm của Noir Studios. Bảo mật thông tin Chính sách chung
- Trang con ● Trang sản phẩm: Nơi hiển thị thông tin về danh sách sản phẩm theo từng danh mục, chi tiết sản phẩm của Noir Studios: Hình ảnh chi tiết sản phẩm. Mô tả sản phẩm: chất liệu, kiểu dáng, kích thước, màu sắc. Giá bán & giá khuyến mãi (nếu có).
Hình 3. Sitemap STEP 4: Chỉ định hệ thống điều hướng của trang web
- Hệ thống điều hướng trang web của Noir là thanh điều hướng (Navigation Bar). Thanh điều hướng là một thành phần của giao diện người dùng chứa các liên kết đến các phần khác nhau của trang. Thường nằm ở phần đầu của trang web giúp khách truy cập điều hướng trang theo ý muốn.
- Các loại đường liên kết
- Text link: Lựa chọn màu xanh để làm nổi bật cho văn phần văn bản có gắn link và khi di chuột nhấn text link thì văn bản sẽ chuyển sang màu đỏ tím in đậm.
- Hidden link: Trên giao diện điện thoại sẽ có phần Hamburger Menu nằm ở góc phía bên phải trên cùng của màn hình. Trong Hamburger Menu có các mục thuộc phần header là cửa hàng, tài khoản, giỏ hàng, về chúng tôi, blog. Hamburger Menu giúp bố cục màn hình trở nên đơn giản, ngăn nắp và dễ nhìn.
- Image link:
- Sử dụng image link vào logo của Noir, khi người dùng nhấp chuột vào logo, họ sẽ được đưa đến trang chủ của website.
- Sử dụng image link vào hình ảnh sản phẩm trên trang web, khi người dùng click vào hình ảnh sản phẩm, họ sẽ được đưa đến trang thông tin chi tiết của sản phẩm đã click.
- Related link groups: Bar: bao gồm các nút tìm kiếm, tài khoản, giỏ hàng, back to top. Drop-down menu: Áp dụng cho “danh mục sản phẩm”, khi di chuột vào sẽ thả xuống các lựa chọn “Áo”, “Quần”, “Set quần áo” và “túi và phụ kiện”
- BreadCrumb Trail: được sử dụng để hiển thị đường dẫn hoặc con đường mà người dùng đã đi để đến trang web hiện tại. Giúp người dùng hiểu vị trí của họ trong cấu trúc trang web và dễ dàng quay lại các trang trước trong trang web. Trang chủ >> Áo >> Áo khoác kaki nam nữ wellness Trang chủ >> Quần >> Quần kaki ống suông wellness STEP 5: Thiết kế giao diện của trang web (look & feel) 5.1 Về phần giao diện (Look )
- Font and typeface: “ Less design, more stories”- Noir hướng đến phong cách tối giản nhưng vẫn mang đậm sự tinh tế và hiện đại. Rational là phông chữ sans- serif, được thiết kế chắc chắn và dứt khoát, phù hợp với tệp khách hàng trẻ trung và năng động của Noir. Khoảng cách giữa các chữ cái rõ ràng cho phép mỗi chữ cái được nổi bật riêng lẻ, điều này giúp cho văn bản dễ đọc hơn cả trên màn hình máy tính và thiết bị di động. Hình 5.1.1 Font Family: Rational
- Color scheme: Trang web của Noir được thiết theo bảng màu trung tính với 3 màu chủ đạo là Đen - Xám - Nâu. Màu trung tính mang đến sự hiện đại, sang trọng và không bao giờ lỗi thời. Với sự linh hoạt, kết hợp được với nhiều màu sắc, khi đặt hình ảnh sản phẩm trên trang Web, tổng thể sẽ hài hoà hơn. Bên cạnh đó, sự êm dịu và nhẹ nhàng của màu trung tính sẽ giúp cho khách hàng cảm giác dễ chịu khi sử dụng trang Web thời gian dài.
tổng thể về sản phẩm và nội dung cho người dùng. Với nhiều dòng sản phẩm, điều hướng thả xuống giúp Noir trình bày sản phẩm rõ ràng, khoa học, điều hướng trang web trở nên dễ dàng. Đối với điện thoại: Hamburger Navigation xuất hiện trong giao điện di động của Noir. Menu Hamburger có 3 đường ngang song song, thường xuất hiện bên góc trái hoặc phải của trang Web. Khi người dùng nhấn vào, menu chính sẽ xuất hiện trên toàn bộ màn hình, hiển thị cho họ tất cả tuỳ chọn điều hướng trang web. Điều này rất thích hợp đối với các thiết bị di động có màn hình nhỏ.
- Content position: Hình 5.1.4 Vị trí nội dung trên máy tính
Hình 5.1.5 Vị trí nội dung trên điện thoại 5.2 Về phần cảm nhận (Feel)
- Sử dụng khoảng trắng trong thiết kế trang: Khoảng trắng làm cho nội dung dễ đọc hơn đồng thời cho phép người dùng tập trung vào các yếu tố xung quanh văn bản. Ngoài ra khoảng trắng đem đến cho người dùng cảm giác cởi mở, thoải mái và hiện đại, điều mà Noir luôn muốn mang đến cho khách hàng khi sử dụng sản phẩm.
- Tăng tốc độ tải trang: Google đã báo cáo vào năm 2017 rằng khi thời gian tải trang lên tới 10 giây, tỷ lệ thoát trên thiết bị di động sẽ tăng 123%. Sử dụng file hình ảnh WebP với chất lượng hình ảnh cao, độ nét tốt, tốc độ tải nhanh và tính năng bảo mật tốt. Ngoài ra, cũng phải giảm thiểu các yêu cầu HTTPS, chỉ sử dụng các plugin cần thiết,....
- Tích hợp các hiệu ứng giúp tăng trải nghiệm khách hàng:
d. Kiểm thử hiệu suất (Performance testing - Optional)
- Kiểm trang tốc độ phản hồi của trang web đối với yêu cầu từ người dùng.
- Kiểm tra quá trình vận hành của website đối với từng lưu lượng khách vào web. 6.2. Xuất bản
- Doanh nghiệp NOIR là một đơn vị không chuyên về tạo lập và xây dựng website. Vì vậy, thay vì lưu trữ website trên máy chủ chuyên dụng thì việc lựa chọn một bên cung cấp dịch vụ hosting trung gian để phát triển một website hoàn chỉnh là một điều phù hợp, giúp không tốn kém quá nhiều chi phí nhân sự kỹ thuật và giúp website ít mắc lỗi hơn.
- Hiện nay, trên thị trường có rất nhiều gói Hosting (dịch vụ lưu trữ web) khác nhau. Để lựa chọn gói Hosting phù hợp, sẽ cần cân nhắc các yếu tố sau:
- Yếu tố kinh tế.
- Dung lượng Website sau khi hoàn thành
- Nhu cầu về phương án backup.
- Tính bảo mật dữ liệu.
- Đối với website có mục blog, cần phải tính toán dung lượng một bài đăng và tổng số bài dự kiến.
- Dung lượng trung bình của một file đính kèm như hình ảnh hoặc video đăng lên website.
- Email: số lượng email tối đa, dung lượng tối đa cho một email. 6.3. Duy trì Để trang web được duy trì hiệu quả nhằm đảm bảo trải nghiệm người dùng, website của Noir nên thường xuyên được kiểm tra và cập nhật các yếu tố sau: ● Quản lý nội dung: ○ Cập nhật các nội dung thay đổi liên tục (blog, chương trình, mặt hàng,…) ○ Các chiến dịch, khuyến mại hiện có của Noir phải được đăng tải kịp thời. ● Quản lý thiết kế: ○ Thay đổi concept theo từng mùa hay xu hướng thị trường. ● Quản lý chức năng: ○ Kiểm tra các quyền admin và đối tượng được cấp quyền định kỳ. ○ Theo dõi các chức năng trên website như thanh toán, nhắn tin, sử dụng vouchers,... để có thể sửa lỗi kịp thời. 6.4. Dự trù chi phí một năm
- Chi phí domain và hosting: Dựa trên quy mô doanh nghiệp và mục đích của website, gói hosting Business của Hostinger sẽ là sự lựa chọn tốt nhất cho Noir Studios. Ngoài ra, doanh nghiệp sẽ được hưởng mức giá 99.900 và được miễn phí tên miền năm đầu tiên khi mua 12 tháng.
Hình 6 .1. 1 Bảng giá theo tháng của Hostinger Hình 6 .1. 2 Hoá đơn tổng cộng của Hostinger
