Tâm huyết trên từng món ăn: Vận May sử dụng nguyên liệu sạch, tươi ngon, hương liệu phong phú và sự kết hợp vị khác biệt để tạo nên hương vị độc đáo nhưng vẫngiữ được nét truyền thống củ
INTRODUCTION TO ORGANIZATION
Câu chuyện thương hiệu
Vận May là nơi ẩm thực Việt Nam sum vầy, dung hòa thức ăn đậm đà cùng thức uống mát lạnh Với hương vị tinh tế, nguyên liệu tươi ngon, tất tần tật mỹ vị Việt Nam đều được Vận May giữ gìn, gói trọn trong từng món ăn Mỗi món ăn đều chứa những hồi ức về thời xưa Bên cạnh đó, Vận May còn mang đến một không gian với mọi chi tiết từ trang trí tường đến nội thất, các chi tiết đó đều lặng lẽ kể về quá khứ Không chỉ là một cái tên, “Vận May” là thông điệp tích cực mà chúng mình muốn gửi gắm, nơi mọi người có thể tận hưởng những trải nghiệm ẩm thực tuyệt vời đồng thời cảm nhận được năng lượng may mắn, tích cực.
Giá trị cốt lõi
Sự hiếu khách và lòng biết ơn: Sự nồng nhiệt và hiếu khách là cốt lõi trong dịch vụ của Vận May Vận May đối xử với mỗi vị khách như những người thân tạo ra một bầu không khí ấm cúng, thân thiện.
Tâm huyết trên từng món ăn: Vận May sử dụng nguyên liệu sạch, tươi ngon, hương liệu phong phú và sự kết hợp vị khác biệt để tạo nên hương vị độc đáo nhưng vẫn giữ được nét truyền thống của ẩm thực Việt Nam Ngoài ra thì những món ăn của Vận May cũng sẽ được trang trí, trình bày đẹp mắt từ đó giúp nâng cao trải nghiệm của những thực khách tại đây.
Vận May được thiết kế theo phong cách cổ xưa, sử dụng tông màu vàng ấm áp tạo nên không gian thân thuộc, gần gũi Lấy cảm hứng từ bữa cơm gia đình truyền thống, nơi các thành viên sum họp, trò chuyện vui vẻ, Vận May mong muốn tái hiện nét văn hóa đẹp đẽ này, gợi nhắc đến những kỷ niệm ấm áp và gắn kết gia đình.
Sứ mệnh
Ẩm thực Việt Nam không chỉ là thức ăn mà còn là 1 phần của văn hoá và con người Mỗi vùng miền, mỗi góc phố ở Việt Nam đều là 1 tiểu văn hoá ẩm thực riêng biệt.Vận May được thành lập với sứ mệnh quảng bá những nét đặc trưng văn hoá đó đến với những du khách từ khắp nơi trên thế giới, từ đó giúp nền ẩm thực Việt Nam không ngừng vươn xa hơn.
IDENTIFY THE WEBSITE’S PURPOSE AND TARGET AUDIENCE
Identify the website’s purpose
Quảng bá Nhà Hàng Vận May là điểm đến hàng đầu cho thực khách khi tới Đà Nẵng.
Kết nối với khách hàng tiềm năng.
Cung cấp một nền tảng thuận tiện cho khách hàng khám phá thực đơn, hay thực hiện đặt bàn.
Cung cấp thông tin chi tiết về lịch sử, triết lý ẩm thực của nhà hàng, thành tích và chi tiết liên lạc.
Xây dựng niềm tin và sự tín nhiệm từ đó tạo nên sự uy tín cho nhà hàng.
Làm cầu nối văn hóa các vùng miền Việt Nam, lan tỏa nét đẹp ẩm thực Việt tới thực khách trong và ngoài nước.
Tăng lượng truy cập trang web: Tăng số lượng khách truy cập hàng tháng vào trang web thêm 20% trong vòng sáu tháng đầu tiên.
Nâng cao lòng trung thành của khách hàng: Triển khai chương trình khách hàng thân thiết thông qua website để giữ chân và có các chính sách ưu đãi cho các khách hàng thân thiết trên website, hướng tới mục tiêu tăng 10% lượng khách hàng quay lại trong vòng sáu tháng.
Tạo sự tương tác của khách hàng: Đạt tối thiểu 50 đánh giá của khách hàng đã truy cập vào trang web trong ba tháng.
Xây dựng sự hiện diện trên mạng xã hội là chìa khóa để tăng lượng người theo dõi và tương tác Nhà hàng sẽ tập trung vào việc tăng lượng người theo dõi trên các nền tảng Facebook và Instagram lên 30% trong năm tới Mạng xã hội cho phép nhà hàng kết nối với khách hàng tiềm năng, thúc đẩy thương hiệu và tạo dựng lòng trung thành Bằng cách xây dựng nội dung hấp dẫn và tham gia tích cực trên các nền tảng này, nhà hàng có thể tăng khả năng hiển thị, thu hút khách hàng mới và củng cố mối quan hệ với khách hàng hiện tại.
Bởi vì hiện tại Vận May vẫn chưa có website nên mục tiêu cơ bản đặt ra chính là tạo ra một nền tảng cung cấp các thông tin về Vận May gồm sản phẩm, dịch vụ, … và từ đó quảng bá Vận May trở thành điểm đến hàng đầu của thực khách khi đến Đà Nẵng Bên cạnh đó website cũng hướng các mục tiêu về thương mại điện tử như đặt món, đặt bàn trước.
Identify target audience
Nhóm tuổi Địa lý Sở thích Thu nhập
Khách du lịch nội địa đến du lịch Đà Nẵng
Thích ăn hải sản hay các món đặc sản của Đà Nẵng, miền Trung. Ưa thích không gian sang trọng, ấm cúng.
Du lịch theo gia đình hay nhóm bạn bè hoặc cặp đôi.
Từ 10.000.000 đồng/ tháng trở lên.
Nhóm tuổi Địa lý Sở thích Thu nhập
Khách du lịch đến từ các nước phương Đông như: Hàn Quốc, Thái Lan, Đài Loan, Ấn Độ,
Thích ăn món ăn Việt Nam, muốn trải nghiệm ẩm thực đủ cả 3 miền Việt Nam và hải sản. Ưa thích không gian sang trọng, ấm cúng, đậm chất Việt Nam.
Du lịch theo gia đình hay nhóm bạn bè, cặp đôi.
Niềm tin Giá trị Mong muốn Nỗi sợ Kiến thức chuyên môn
Tin rằng nhà hàng sẽ phục vụ những món ăn đặc sản của miền Trung và những món hải sản của vùng biển Đà
Nguyên liệu sạch sẽ, tươi mới
Dịch vụ tận tâm, chuyên nghiệp.
Mong muốn trải nghiệm tinh hoa ẩm thực của miền Trung và vùng biển Đà Nẵng.
Lo sợ về chất lượng của nguyên liệu.
Sợ các vấn đề về dịch vụ (đợi món ăn lâu, khó khăn trong việc gọi món, )
Hiểu biết về các đặc sản của khu vực miền Trung.
Có chuyên môn trong việc sử dụng các nền tảng trực tuyến, mạng xã hội để nghiên cứu và đánh giá.
Niềm tin Giá trị Mong muốn Nỗi sợ Kiến thức chuyên môn
Tin rằng nhà hàng sẽ cung cấp trải nghiệm ẩm thực đích thực của
Việt Nam và đồng thời cũng sẽ được trải nghiệm một bữa ăn ấm cúng, đậm chất một gia đình truyền thống ở
Thực đơn đa dạng từ nhiều vùng miền khác nhau.
Không gian nhà hàng ấm cúng, truyền thống.
Dịch vụ tận tâm, chuyên nghiệp.
Mong muốn trải nghiệm bữa ăn chuẩn gia đình “Việt Nam”.
Mong muốn trải nghiệm đa dạng ẩm thực từ nhiều vùng miền khác nhau của Việt Nam
Sợ không chuẩn vị Việt Nam.
Sợ rào cản ngôn ngữ ảnh hưởng đến chất lượng của bữa ăn.
Có hứng thú, đã biết một chút và mong muốn được trải nghiệm thêm về ẩm thực và văn hóa bữa ăn của các gia đình Việt Nam.
Phong cách sống Sở thích Giao tiếp xã hội Mua
Trải nghiệm nhiều món ăn đặc sản ở các vùng miền.
Sang trọng nhưng cũng giản dị.
Thích những món ăn ở miền Trung đặc biệt là Đà Nẵng.
Không gian sang trọng, ấm cúng.
Thích giao lưu với con người, văn hóa ở Đà Nẵng. Ưu tiên chất lượng. Ưu tiên sự thuận tiện cho việc đặt chỗ và đặt hàng trực tuyến.
Phong cách sống Sở thích Giao tiếp xã hội Mua
Thích khám phá những văn hóa mới lạ.
Trải nghiệm những hương vị mới.
Thử những món ăn gắn liền với văn hóa ở Đà Nẵng
Giao lưu với nhiều nền văn hóa mới. Ưu tiên chất lượng. Ưu tiên sự thuận tiện cho việc đặt chỗ và đặt hàng trực tuyến.
Target audience wants, needs, and expectations
Trải nghiệm món Việt xưa: Khách hàng tìm kiếm những nhà hàng cung cấp trải nghiệm ẩm thực Việt xưa, bao gồm cả hương vị truyền thống, bầu không khí và sự ấm áp.
Thuận tiện: Khách hàng tìm kiếm những lựa chọn thuận tiện, bao gồm khám phá menu trực tuyến dễ dàng, đặt chỗ trước.
Thông tin và tương tác: Khách hàng tương tác với trang web để khám phá ẩm thực và tìm hiểu văn hóa thông qua các câu chuyện và nội dung giới thiệu món ăn Đánh giá và xếp hạng: Họ tham khảo các đánh giá và xếp hạng từ người dùng khác để đánh giá độ tin cậy và uy tín của nhà hàng trước khi quyết định.
Trang web thân thiện với người dùng: Khách hàng yêu cầu một trang web dễ điều hướng, cung cấp thông tin rõ ràng và dễ tiếp cận về thực đơn, đặt bàn và đơn đặt hàng trực tuyến.
Nguyên liệu và Món ăn chất lượng: Họ mong đợi nhà hàng đáp ứng được yêu cầu về nguyên liệu và món ăn chất lượng.
Nội dung hấp dẫn: Khách hàng yêu cầu nội dung hấp dẫn và giàu thông tin trên trang web Từ đó, không chỉ cung cấp thông tin cho họ về nhà hàng mà còn lưu giữ thông tin cho họ quan tâm và kết nối.
Tính xác thực: Khách hàng mong đợi trải nghiệm ẩm thực Việt đích thực, không chỉ là đồ ăn mà còn bao gồm bầu không khí và sự ấm áp gắn liền với ẩm thực Việt
Tiện lợi: Họ mong đợi trang web cung cấp những tính năng thuận tiện cho việc khám phá thực đơn, đặt chỗ một cách dễ dàng.
Chất lượng cao: Khách hàng có kỳ vọng cao về chất lượng của nguyên liệu và món ăn, họ muốn thấy được sự cam kết của nhà hàng về sự xuất sắc trong ẩm thực.
Nội dung thông tin: Họ muốn xem thông tin chi tiết về nhà hàng và các món ăn, nội dung phải hấp dẫn, lôi cuốn, đảm bảo tính chính xác.
Danh tiếng và Độ tin cậy: Khách hàng mong đợi tìm thấy những đánh giá và xếp hạng đảm bảo cho danh tiếng của nhà hàng.
Market trends
Theo Cục Thống kê Đà Nẵng, trong 11 tháng năm 2023, tổng lượng khách do các cơ sở lưu trú trên địa bàn phục vụ ước gần 6,9 triệu lượt, tăng 102,6% so với cùng kỳ
2022 Trong đó khách quốc tế hơn 1,8 triệu lượt, gấp 4,7 lần; khách trong nước hơn 5 triệu lượt, tăng 67,5% Doanh thu dịch vụ lưu trú và ăn uống ước gần 21.000 tỷ đồng, tăng gần 35%; trong đó doanh thu ăn uống gần 12.000 tỷ đồng, tăng 22% và chiếm hơn 50% tổng doanh thu dịch vụ lưu trú, ăn uống của 11 tháng năm 2023.
Ngoài ra, số người sử dụng internet tại Việt Nam đạt 26,8 triệu người (chiếm 31%), con số này vượt số lượng người nghe đài (22%) và đọc báo in (10%) Internet phát triển dần thay thế các hình thức truyền thông truyền thống Vì thế, website là một giải pháp không thể thiếu trong kinh doanh Lĩnh vực nhà hàng cũng không phải ngoài lệ
Việc sử dụng website cũng giúp việc tìm hiểu thông tin khách hàng trở nên thuận lợi hơn, giúp nhà hàng quảng bá tốt hơn từ đó nâng cao khả năng cạnh tranh trong thị trường F&B đầy khốc liệt như hiện nay.
Analyze competitor
Ẩm thực Trần - Ẩm thực Đà Nẵng
Là nhà hàng được các khách du lịch ưa chuộng ở Đà Nẵng.
Là nhà hàng đã ra đời lâu năm.
Các món ăn đặc sản ở Đà Nẵng.
Ngành du lịch ở Đà Nẵng phát triển.
Khách du lịch có xu hướng thưởng thức những món ăn đặc sản ở Đà Nẵng. ĐIỂM YẾU
Quảng bá chưa rộng rãi.
Không gian có phần hạn chế, không có phòng riêng.
Menu chưa đa dạng về các món ăn đặc sản ở Đà Nẵng.
Sự cạnh tranh gay gắt từ những nhà hàng khác. Giá cả nguyên vật liệu ngày càng tăng.
Không có sự đổi mới về phong cách quán.
Website của Ẩm thực Trần được đánh giá ở mức trung bình dựa vào các tiêu chí khác nhau Tiêu chí Accessibility đạt mức điểm tương đối tốt 85 Khả năng tối ưu hóa SEO rất tốt với 92 điểm.
Tuy nhiên điểm Best Practices chỉ đạt mức trung bình, và điểm hiệu suất của trang web còn rất thấp, chỉ đạt 29 điểm
Hình 2 1: Đánh giá các chỉ số của Website Ẩm thực Trần
Hình 2 2: Chỉ số Performance của website Ẩm thực Trần.
Hiệu suất có số điểm rất thấp, website chưa được tập trung tối ưu hóa: 29/100 o First Contentful Paint (FCP): Nội dung hoặc hình ảnh đầu tiên được xuất hiện khá nhanh trong khoảng thời gian là 1.7 giây. o Speed Index: Tốc độ tải nội dung của trang web được xác định rất chậm,mất 7.6 giây để hoàn tất. o Largest Contentful Paint (LCP): Thời gian hiển thị hình ảnh hoặc khối văn bản lớn nhất trên website được hiển thị đầu tiên có thể thấy là tương đối nhanh khoảng 2.0 giây. o Total Blocking Time: Thời gian một ứng dụng cần phản ứng với đầu vào của người dùng trong khi tải trang là 910ms, khá chậm (tốt từ 0-200ms). o Cumulative Layout Shift (CLS): Với số điểm 0.383, trang web có thể sẽ mang đến cho người dùng trải nghiệm không tốt (điểm số CLS tốt nên từ 0.1 trở xuống).
Hình 2 3: Chỉ số Accessibility của website Ẩm thực Trần.
Khả năng tiếp cận và độ dễ đọc của trang web đạt ở mức khá với điểm số 85/100. Các trường nhập ARIA không có tên có thể truy cập được.
Hình 2 4: Trường nhập ARIA không có tên có thể truy cập.
Màu background và foreground không có tỷ lệ tương phản đủ.
Hình 2 5: Màu background và foreground không có tỷ lệ tương phản đủ
Hình 2 6: Chỉ số Performance của website Ẩm thực Trần. Điểm tiêu chuẩn bắt buộc của trang web đạt 52/100 ở mức trung bình.Các APIs không được sử dụng nữa.
Hình 2 7: Các APIs không được sử dụng.
Hình ảnh có độ phân giải thấp.
Hình 2 8: Hình ảnh có độ phân giải thấp.
Sự cố đã được ghi vào bảng sự cố trong Chrome Devtools.
Hình 2 9: Sự cố đã được ghi vào bảng sự cố trong Chrome Devtools.
Hình 2 10: Chỉ số Performance của website Ẩm thực Trần. Điểm SEO ở mức cao, 92/100 cho thấy trang web rất được đầu tư cho mảng này.
Tuy nhiên không thể thu thập dữ liệu các liên kết.
Hình 2 11: Không thể thu thập dữ liệu các liên kết.
DETERMINE THE WEBSITE’S GENERAL CONTENT
Homepage (Trang chủ)
Trang chủ như là một phòng khách của trang web khi người dùng truy cập vào trang web Mục đích của trang chủ là để định hướng người dùng truy cập Tại đây cung cấp các tiêu đề trang, hình ảnh và sơ đồ trang Nhờ đó, người dùng dễ dàng tìm kiếm các thông tin trên web qua tên và hình ảnh, các thông tin về số điện thoại hay email,… của Vận MAy Ngoài ra thì trang chủ cũng là yếu tố quan trọng giúp gây ấn tượng với khách hàng truy cập trang web lần đầu tiên Từ đó khiến người dùng đi "sâu hơn" vào các trang khác trong website [1].
Các thành phần của trang chủ:
Header: o Logo: Giúp khách hàng nhận diện được thương hiệu và tăng độ uy tín cho trang web. o Thanh điều hướng: Gồm những trang con giúp cho trang web được rõ ràng, chi tiết giúp cho người truy cập dễ dàng hiểu được trang web và thao tác trên trang web dễ dàng hơn [2].
Hình 3 1: Thanh điều hướng của trang web. o Trang tài khoản: Có 2 form đăng nhập và đăng ký Cả 2 form đều yêu cầu người dùng nhập địa chỉ email và mật khẩu.
Hình 3 2: Form thông tin đăng nhập và đăng ký. o Tìm kiếm: Được đăt bên cạnh trang tài khoản, mục đích để hỗ trợ khách hàng tìn kiếm những thông tin mình muốn một cách nhanh chóng và hiệu quả hơn. o Giỏ hàng: Đặt ở góc trên bên phải, giúp người dùng lưu trữ sản phẩm và giúp doanh nghiệp nắm bắt thị hiếu tiêu dùng, thói quen mua sắm online, … của khách hàng [3].
Nội dung trang web: Sẽ bao gồm những mô tả, hình ảnh món ăn và video về nhà hàng giúp khách hàng nắm sơ bộ được thông tin của sản phẩm và nhà hàng.
Footer: Bao gồm logo và các thông tin của nhà hàng như địa chỉ, thời gian mở cửa,thông tin liên hệ và các trang mạng xã hội.
Subsidiary (Các trang con)
Về chúng tôi: Gồm những thông tin về nhà hàng như lịch sử hình thành, giới thiệu nhà hàng, triết lý thương hiệu và các hình ảnh của món ăn và không gian của nhà hàng.
Thực đơn là yếu tố quan trọng giúp khách hàng nắm được những món ăn mà nhà hàng cung cấp Thực đơn nhà hàng thường bao gồm menu chính và các trang con được phân loại theo món ăn, chẳng hạn như món ăn miền Bắc, Trung, Nam, cơm, hải sản và đồ uống Việc sắp xếp thực đơn theo cách này cho phép khách hàng nhanh chóng xác định được những món ăn phù hợp với sở thích của mình.
Hình 3 3: Thực đơn của nhà hàng.
Hình 3 4: Drop menu để phân loại các món ăn. Đặt bàn: Gồm form thông tin đặt bàn để khách hàng điền vào như ngày đặt (chỉ được trong hôm nay và ngày hôm sau trước), thời gian đặt, thông tin người dùng (tên, email, số điện thoại), ghi chú thông tin thêm
Sau khi lựa chọn ngày, sơ đồ bố trí bên trong nhà hàng sẽ hiện ra để khách hàng lựa chọn chỗ ngồi Bàn còn trống sẽ được hiển thị màu xanh, bàn đang được khách hàng lựa chọn sẽ hiển thị màu đỏ nâu và bàn đã được đặt sẽ hiển thị màu xám.
Hình 3 6: Sơ đồ nhà hàng
Tin tức: Trang này sẽ gồm những thông tin thêm của nhà hàng giúp thu hút khách hàng và quảng bá thương hiệu cho nhà hàng.
Liên hệ: Trang này sẽ có các thông tin liên hệ của nhà hàng như địa chỉ, điện thoại,gmail và bản đồ dẫn đến nhà hàng
Hình 3 7: Thông tin liên hệ và bản đồ.
SELECT THE WEBSITE’S STRUCTURE
Homepage (Trang chủ)
Thực đơn các món ăn Best Seller
Video giới thiệu nhà hàng
Liên kết đến các trang mạng xã hội
Thông tin liên hệ, các chính sách của cửa hàng
Subsidiary (Các trang con)
Giới thiệu về nhà hàng ẩm thực truyền thống Vận May.
Giới thiệu về những món ăn đặc biệt
Giới thiệu rõ hơn về Vận May
Câu chuyện về Vận May
Vị ngon trọn khoảnh khắc
Thông tin và mô tả cụ thể các món ăn của nhà hàng và feedback của khách hàng sau khi mua hàng.
Tôm hùm nướng phô mai
Hình ảnh sơ đồ nhà hàng để khách hàng dễ dàng đặt bàn.
Form cho khách hàng đặt bàn gồm:
Thời gian đặt - Thời gian về
Giới thiệu các tin tức về nhà hàng Vận May và tin tức về các ngày khuyến mãi của nhà hàng.
4.2.6 Trang liên hệ Địa chỉ của nhà hàng Vận May.
Thông tin về giờ mở/đóng cửa nhà hàng.
Thông tin liên hệ và mạng xã hội của nhà hàng.
Google đường đi đến nhà hàng.
Thông tin về món ăn được thêm vào giỏ hàng bao gồm: Tên sản phẩm, giá tiền, số lượng.
Tính tổng tiền các sản phẩm, chọn hình thức thanh toán, hình thức vận chuyển. Nhập các mã giảm giá của nhà hàng.
Thông tin thanh toán của khách hàng bào gồm: Tên, số điện thoại, địa chỉ, Gmail. Đơn hàng của khách hàng gồm: Tổng tiền phải trả, hình thức giao hàng, hình thức nhận hàng.
Khách hàng click vào trang tài khoản thì sẽ hiện 2 form đăng nhập và đăng kí. Form đăng kí sẽ đăng kí bằng địa chỉ Email và mật khẩu.
Sau khi có tài khoản thì khách hàng đăng nhập và tài khoản bằng tài khoản đã đăng kí.
SPECIFY THE WEBSITE’S NAVIGATION SYSTEM
Navigation flows
Vận May sử dụng dropdown menu được chia thành Miền Bắc, Miền Trung, Miền Nam, Cơm, Hải Sản, Đồ Uống Giúp phân loại món ăn để khách hàng có thể tìm kiếm nhanh hơn, người dùng cũng không cần phải di chuyển quá nhiều trang để tìm kiếm món ăn Ngoài ra nó còn cho phép hiển thị nhiều sự lựa chọn mà không cần chiếm quá nhiều diện tích.
5.1.2 Thanh main menu điều hướng
Hình 5 2: Thanh main menu điều hướng.
Thanh main menu điều hướng, khi click vào sẽ dẫn đến các trang tương ứng Bằng cách này người dùng có thể nhanh chóng di chuyển đến các trang hay chuyển từ trang này sang trang khác một cách nhanh chóng và thuận tiện.
Hình 5 3: Liên kết hình ảnh tới các trang khác.
Sử dụng hình ảnh được gắn link dẫn đến trang sản phẩm chi tiết, giúp khách hàng dễ dàng truy cập đến món ăn mà không cần phải di chuyển quá nhiều hay tìm kiếm từ các trang khác Ngoài ra khi nhấn vào logo trang chủ thì khách hàng có thể từ trang khác quay trở lại trang chủ Điều này giúp cho khách hàng tiết kiệm thời gian khi lướt trên web hơn.
Hình 5 4: Liên kết link trang chủ với logo Vận May.
Một dạng của navigation,ở đây ta có thể thấy lần lượt các mức phân cấp từ trang chủ xuống đến trang sản phẩm cụ thể mà bạn đang xem Breadcrumb giúp khách hàng dễ dàng quay lại các mức độ trước đó của trang web mà không cần sử dụng nút "Quay lại" trình duyệt.
Menu hamburger cũng được sử dụng để tối ưu hóa không gian và cung cấp điều hướng linh hoạt, tạo trải nghiệm người dùng thuận tiện trên giao diện di động và các thiết bị có không gian hạn chế.
User flow
Hình 5 7: User flow của trang web.
Customer journey maps
Hình 5 8: Bảng hành trình khách hàng của Vận May.
DESIGN THE LOOK AND FEEL
Phần Look của trang web [4]
Trang Web của Vận May sử dụng 2 màu sắc chính là màu nâu đậm và màu be nhạt
Hình 6 1: Màu sắc chủ đạo của Vận May.
Màu nâu đậm (#2C180D) là màu sắc thể hiện sự ấm áp, tin cậy Vận May sử dụng gam màu này để truyền đạt thông điệp về bản sắc truyền thống, lâu đời của ẩm thực Việt Nam cũng như uy tín của nhà hàng.
Màu be nhạt (#FBEFCE): Màu be nhạt cũng thể hiện sự ấm cúng Tuy nhiên, màu be nhạt cũng thể hiện sự thanh lịch, tinh tế và dịu dàng Vận May sử dụng màu này với mục đích muốn nhấn mạnh sự ấm cúng của nhà hàng ngoài ra cũng thể hiện sự ân cần, chu đáo của đội ngũ nhân viên của nhà hàng Vận May.
Tóm lại, việc kết hợp hai màu nâu đậm và be nhạt với nhau cũng tạo cảm giác cảm giác sang trọng, thanh lịch, truyền tải thông điệp về sự truyền thống, hiện đại và chất lượng của nhà hàng Ngoài ra, nâu đậm và be nhạt cũng là hai màu tương phản, giúp người dùng nâng cao khả năng đọc và thu hút sự chú ý, từ đó hướng người dùng đến những tính năng quan trọng của trang web.
Logo của Vận May có hình ảnh cỏ bốn lá - biểu tượng tượng trưng cho may mắn,hạnh phúc và thịnh vượng Đây cũng chính là mong muốn của Vận May cho các thực khách của mình - mong muốn họ sẽ được gặp những điều tốt đẹp nhất
Ngoài việc truyền tải thông điệp về sự chất lượng, an toàn và mong muốn mang lại những điều tốt đẹp cho khách hàng thì việc gắn Logo cho trang web cũng giúp người dùng nhận diện được thương hiệu Vận May và tăng độ uy tín cho trang web [5]
Bởi vì là trang web cho nhà hàng nên các hình ảnh trên trang web đều là hình ảnh của các món ăn do chính nhà hàng tự chụp Theo 1 khảo sát của eBay thì việc sử dụng hình ảnh thật trên trang web của nhà hàng sẽ giúp tăng độ tin cậy cho khách hàng, kích thích sự tò mò về sản phẩm, từ đó tăng thời gian truy cập trang web và tăng tỷ lệ chuyển đổi Ngoài ra thì việc sử dụng hình ảnh chất lượng cao cũng giúp tăng hiệu quả SEO của trang web [6].
Trên trang web của Vận May cũng có những hình ảnh về không gian của nhà hàng. Ngoài việc giúp cho khách hàng hình dung được không gian nhà hàng thì cũng giúp khách hàng cảm nhận được thông điệp về một không gian ấm cúng, truyền thống mà Vận May muốn truyền tải, từ đó tăng độ tin cậy và kích thích khách hàng đến thưởng thức.
Vì là nhà hàng theo đuổi sự truyền thống và cổ điển nên Vận May lựa chọn font chữ Serif thể hiện sự cổ điển, trang trọng và thanh lịch Ngoài ra thì font có chân cũng được cho là font chữ dễ đọc [7].
6.1.4 Bố cục: o Logo: Nằm ở góc ngoài cùng bên trái bởi vì theo nghiên cứu của
Theo Nielsen Norman Group, logo nên đặt ở góc trái vì hầu hết người dùng đều nhìn vào góc này khi truy cập trang web Nội dung website nên căn giữa để tạo sự cân đối và dễ thu hút người dùng Nội dung căn giữa cũng tạo cảm giác chuyên nghiệp và chất lượng Các mục chức năng như tài khoản, thanh tìm kiếm và giỏ hàng thường được đặt ở góc phải trên cùng của trang.
Việc đặt thanh tìm kiếm ở những vị trí này đảm bảo rằng chức năng tìm kiếm luôn hiển thị và sẵn sàng sử dụng Việc đặt thanh tìm kiếm ở góc trên cùng hoặc trung tâm của trang giúp tối ưu hóa không gian, cho phép các yếu tố thiết kế khác được hiển thị rõ ràng hơn. o Thanh điều hướng: Nằm ở chính giữa của Header, việc đặt thanh điều hướng ở vị trí này khiến cho trang web được rõ ràng, chi tiết giúp cho người truy cập dễ dàng hiểu được trang web và thao tác trên trang web dễ dàng hơn.
Hình 6 5: Thanh điều hướng trên Header.
Phần Feel của trang web [8]
Trang web Vận May với tone màu cổ điển cùng với hình ảnh bữa ăn gia đình từ đó mang lại cảm giác ấm cúng, cổ điển của một bữa cơm gia đình truyền thống Việt Nam.
Hình 6 6: Trang chủ của trang web Vận May.
Sử dụng các hiệu ứng chuyển động như Fade in left, Fade in right, Side in down,Side in left và Side in right trong trang web, các hiệu ứng đều rất mượt mà từ đó tạo cảm giác thoải mái, dễ chịu cho người dùng.
Các thành phần của trang web như nút, dropdown menu, ảnh sản phẩm, đều có hiệu ứng di chuột từ đó giúp tăng tính tương tác của người dùng với trang web từ đó tăng sự thích thú và thu hút khách hàng truy cập trang web nhiều hơn.
DETAIL DESIGN
Wireframe
Danh mục menu gồm: Về chúng tôi, Thực đơn, Đặt bàn, Tin tức, Liên hệ với hiệu ứng di chuột
Biểu tượng tài khoản cá nhân, tìm kiếm, giỏ hàng
Hiệu ứng chuyển động là Side in down
=> Phần header được cố định ở đầu trang giúp cho khách hàng khi truy cập vào website hiểu được phân bố của các trang con và có thể chuyển đến các trang khác dễ dàng.
Thông tin về thời gian mở cửa
Thông liên liên hệ: Email hỗ trợ, hotline
Các logo liên kết đến các trang mạng xã hội: Facebook, Instagram
=> Giúp cung cấp thông tin cần thiết cho khách hàng về website.
Hình 7 3: Wireframe Trang chủ banner
Hình 7 4: Wireframe trang chủ slide
Hình 7 5: Wireframe trang chủ với hình ảnh sản phẩm nổi bật
Hình 7 6: Wireframe trang chủ video
Hình ảnh sản phẩm nổi bật với hiệu ứng di chuột Float
Hình 7 7: Wireframe về chúng tôi với banner slogan.
Hình 7 8: Wireframe về chúng tôi với câu chuyện Vận May.
Hình 7 9: Wireframe về chúng tôi với hình ảnh không gian quán.
Hình 7 10: Wireframe về chúng tôi với hình ảnh thông điệp nhà hàng.
Hình 7 11: Wireframe về chúng tôi với hình ảnh không gian quán.
Banner và slogan của Vận May
Câu chuyện về Vận May với hiệu ứng chuyển động là Fade in left và Fade in right.
Hình ảnh về không gian quán
Thông điệp của Vận May gửi đến khách hàng với hiệu ứng chuyển động là Side in left, Side in right.
Triết lý thương hiệu với hiệu ứng chuyển động là Fade in down.
Thực đơn có menu lật có kèm hiệu ứng và âm thanh.
7.1.6 Trang danh mục sản phẩm
Hình 7 13: Wireframe trang danh mục sản phẩm.
Trang danh mục sản phẩm bao gồm:
Tên, hình ảnh, giá của từng sản phẩm.
Nút thêm vào giỏ hàng với hiệu ứng di chuột đổi màu cho từng sản phẩm.
Hình 7 14: Wireframe Trang đặt bàn.
Hình 7 15: Wireframe Trang đặt bàn.
Trang đặt bàn bao gồm:
Form điền thông tin cá nhân
Nút đặt bàn với hiệu ứng di chuột đổi màu
7.1.8 Trang sản phẩm chi tiết
Hình 7 16: Wireframe trang chi tiết sản phẩm.
Hình 7 17: Wireframe trang chi tiết sản phẩm.
Trang chi tiết sản phẩm bao gồm:
Hình ảnh sản phẩm với hiệu ứng di chuột phóng to
Mô tả ngắn về sản phẩm
Nút Thêm vào giỏ hàng với hiệu ứng di chuột đổi màu
Thông tin về mã, danh mục và từ khoá của sản phẩm
Thông tin mô tả chi tiết về sản phẩm Ở đây thường là thông tin giới thiệu về sản phẩm, hương vị, cách thưởng thức ngon nhất.
Form đánh giá sản phẩm và các đánh giá của khách hàng đã mua trước đó giúp khách hàng có thể đánh giá chất lượng sản phẩm theo quan điểm cá nhân, đồng thời giúp khách hàng khác có được cái nhìn sơ lược về chất lượng sản phẩm.
Các sản phẩm tương tự.
Hình 7 18: Wireframe Trang tin tức.
Hình 7 19: Wireframe trang tin tức.
Trang Blog bao gồm các bài viết về chương trình khuyến mãi, các hoạt động của nhà hàng Vận May, với hiệu ứng chuyển động là Fade in down, Fade in left và Fade in right.
Hình 7 20: Wireframe trang liên hệ.
Trang liên hệ hiển thị địa chỉ, google map, hotline và email của nhà hàng VậnMay.
Giao diện trang Giỏ hàng hiển thị hình ảnh minh họa sản phẩm và tên sản phẩm để khách hàng dễ nhận biết Trang cũng cho phép dễ dàng xóa các sản phẩm không mong muốn khỏi giỏ Tổng giá tiền của từng sản phẩm cụ thể được liệt kê rõ ràng, giúp khách hàng nắm bắt được thông tin tài chính Trang có hai nút gây chú ý: "Tiếp tục mua sắm" và "Thanh toán", được thiết kế với hiệu ứng di chuột "Solid" ấn tượng, viền nút đổi từ màu trắng sang màu nâu khi trỏ chuột vào.
Hình 7 22: Wireframe trang thanh toán.
Trang thanh toán được chia làm 2 phần:
Phần bên trái là khung thông tin yêu cầu khách hàng điền để đặt hàng.
Phần bên phải là tính tổng tiền đơn hàng và nút đặt hàng.
Hình 7 23: Wireframe trang tài khoản.
Trang tài khoản được chia làm 2 phần:
Phần bên trái là khung Đăng nhập.
Phần bên phải là khung Đăng ký.
UI mockups design
Hình 7 24: Trang chủ của Vận May trên máy tính.
Hình 7 25: Trang chủ của Vận May trên máy tính.
Hình 7 26: Trang chủ của Vận May trên máy tính.
Hình 7 27: Trang chủ của Vận May trên máy tính.
Hình 7 28: Trang chủ của Vận May trên điện thoại.
Web Detail
Logo Vận May được đặt trang trọng ở góc trái header Nhờ vậy, khách hàng có thể dễ dàng quay lại trang chủ từ bất kỳ trang nào Việc gắn link trang chủ vào logo website giúp cải thiện trải nghiệm người dùng, tạo sự thuận tiện khi chuyển hướng giữa các trang.
Thanh menu điều hướng chính trong website của Thanh Spa được thiết kế ở vị trí bên trái của tiêu đề trang Menu này bao gồm các trang: Giới thiệu, Thực đơn, Đặt bàn, Tin tức và Liên hệ Thiết kế phông chữ in đậm giúp khách hàng dễ dàng nhận ra và thao tác với các trang này, mang lại trải nghiệm người dùng thuận tiện và trực quan.
Các trang và danh mục thiết yếu như tài khoản, tìm kiếm và giỏ hàng nên được đặt ở bên phải header chính để khách hàng dễ dàng truy cập trong suốt quá trình mua sắm Việc hiển thị chúng dưới dạng biểu tượng giúp khách hàng dễ dàng nhận diện và thực hiện các thao tác cần thiết.
Thanh header main được nhóm thiết kế dễ dàng nhận biết, thao tác và tiết kiệm diện tích hơn.
Banner: Hình ảnh về những món ăn của Vận May Banner có bố cục cân đối, màu sắc hài hoà, tạo được ấn tượng, sự ngon mắt với người xem.
Hình 7 29: Banner trang chủ của trang web Vận May.
Slide trượt gồm các thông tin, tên, hình ảnh về món ăn đặc trưng của 3 miềnBắc Trung Nam
Hình 7 30: Hình ảnh thân trang chủ.
Hình 7 31: Hình ảnh thân trang chủ.
Hình 7 32: Hình ảnh thân trang chủ.
Hình 7 33: Hình ảnh trang chủ với sản phẩm nổi bật.
Video về cách chế biến các món ăn của Vận May:
Hình 7 34: Hình ảnh video cách chế biến các món ăn của Vận May.
Footer: Được thiết kế với nền vàng nhạt nổi bật so với nền nâu của website.Footer đã được rút gọn và chỉ chứa những thông tin cần thiết như: hình ảnh logo, địa chỉ, thời gian mở cửa, thông tin liên hệ và biểu tượng Facebook và Instagram được liên kết với tài khoản của nhà hàng.
Hình 7 35: Footer của trang web.
Chat box: Chat box hiển thị bên phải màn hình ở tất cả các trang, giúp giải đáp thắc mắc của khách hàng một cách nhanh chóng, rõ ràng.
Hình 7 36: Chatbox của trang web.
Giỏ hàng: Giỏ hàng hiển thị bên phải màn hình ở tất cả các trang, giúp khách hàng kiểm tra sản phẩm trong giỏ hàng của mình một cách nhanh chóng nhất Ở đây có thêm các nút Thanh toán, Tiếp tục mua sắm giúp khách hàng thao tác nhanh chóng hơn.
7.2.2.Về chúng tôi Đầu trang được thiết kế với banner không gian quán và slogan “Vị ngon trọn khoảnh khắc”.
Hình 7 38: Slogan và hình ảnh đầu trang Về Chúng tôi.
Thông tin về Vận May, các hình ảnh không gian, món ăn và các chuyển động giúp khách hàng không cảm thấy nhàm chán khi xem, đọc các thông tin.
Hình 7 39: Trang về chúng tôi với thông tin về nhà hàng.
Hình 7 40: Hình ảnh ở trang chủ.
Hình 7 41: Hình ảnh vị ngon tron khoảnh khắc.
Hình 7 42: Triết lý thương hiệu của trang Vận May.
Khi nhấn vào chữ THỰC ĐƠN trên header, sẽ đến trang Thực đơn có menu có thể lật mở kèm hiệu ứng và âm thanh giúp khách hàng cảm nhận chân thật nhất
Hình 7 43: Hình ảnh menu của Vận May.
Hình 7 44: Hình ảnh menu khi lật.
Khi chọn danh mục trong dropdown menu Sản phẩm được hiển thị theo từng danh mục: Miền Bắc, Miền Trung, Miền Nam, Cơm, Hải Sản, Đồ Uống
Những sản phẩm theo danh mục Miền Bắc: khách hàng có thể dễ dàng nhìn thấy hình ảnh của món ăn, tên và giá cả Khách hàng di chuột qua các sản phẩm sẽ có hiệu ứng hiển thị nút Thêm vào giỏ hàng, giúp khách hàng dễ dàng và thao tác nhanh chóng hơn.
Hình 7 46: Sản phẩm theo danh mục miền Bắc.
Hình 7 47: Sản phẩm danh mục có thêm nút giỏ hàng.
Khách hàng nhập thông tin đặt bàn: chọn ngày, giờ và nhập các thông tin cá nhân. Chữ được thể hiện tương phản với nền để khách hàng dễ đọc và thực hiện các thao tác.
Chọn ngày: khách hàng chỉ có thể đặt bàn trước vào ngày hiện tại và
1 ngày sau Giúp tránh được việc khách hàng có thể đặt lộn ngày.
Sau khi chọn ngày thì sơ đồ ghế ngồi và bàn, được thiết kế với màu sắc nổi bật giúp khách hàng dễ dàng nhìn thấy và lựa chọn chỗ ngồi mà mình mong muốn.
Hình 7 50: Sơ đồ chỗ ngồi 3D của nhà hàng Vận May.
Sau khi nhấn nút Book a table, khách hàng sẽ phải xác nhận lại thông tin đặt bàn một lần nữa Chữ được hiển thị rõ ràng giúp khách hàng dễ nhìn.
7.2.5 Trang sản phẩm chi tiết
Hình 7 51: Hình ảnh sản phẩm chi tiết.
Product Gallery: hiển thị các hình ảnh của sản phẩm, có thêm hiệu ứng phóng to khi khách hàng di chuyển trong hình ảnh, giúp khách hàng có thể nhìn rõ hơn hình ảnh về món ăn mà mình chọn.
Product Summary: hiển thị tên sản phẩm, giá cả Ngoài ra còn có nút Thêm vào giỏ hàng và nút điều chỉnh số lượng sản phẩm để thuận tiện trong việc mua sắm của khách hàng Các thông tin về mã và danh mục sản phẩm.
Hình 7 52: Mô tả sản phẩm.
Product Tabs:có 3 phần là mô tả, đánh giá.
Mô tả: mô tả chi tiết về sản phẩm, hình ảnh
Đánh giá: nơi người dùng để lại các đánh giá sau khi đăng nhập và mua sản phẩm
Sản phẩm tương tự: gợi ý những sản phẩm tương tự với sản phẩm cùng danh mục khách hàng đang xem Khách hàng di chuột qua các sản phẩm sẽ có hiệu ứng hiển thị nút Thêm vào giỏ hàng, giúp khách hàng dễ dàng và thao tác nhanh chóng hơn.
Hình 7 53: Các sản phẩm tương tự.
ECOMMERCE FEATURES DEPLOYMENT
Chatbox
Hình 7 61: Chatbox của nhà hàng Vận May.
Chatbot được thiết kế để trả lời cái câu hỏi cơ bản của khách hàng như địa chỉ quán và điều hướng khách hàng đặt bàn Các câu hỏi về hỗ trợ tư vấn sẽ được chuyển đến messenger của Vận May để nhân viên tư vấn.Mục đích giúp trả lời những thắc mắc của khách hàng nhanh nhất có thể.
Thanh toán
Hình 7 62: Thanh toán ở Vận May.
Tính năng thanh toán cho phép khách hàng nhập thông tin các nhân, bên cạnh đó khi nhập các mã giảm giá của Vận May sẽ được giảm tiền khi mua trên web Đây là động lực để khách hàng sử dụng web để mua hàng, trước khi thanh toán thì sẽ yêu cầu khách hàng tạo tài khoản và cung cấp email Từ đó Vận May có thể sử dụng email để thực hiện các chiến dịch email Marketing hay thực hiện các chương trình khách hàng thân thiết để có thể xây dựng lòng trung thành của khách hàng, thông qua các chương trình giảm giá cũng sẽ có được các khách hàng tiềm năng mới.
Hình 7 63: Thanh toán tích hợp mã giảm.
Đặt bàn 3D
Hình 7 64: Tính năng đặt bàn 3D của Vận May Đặt bàn 3D sẽ giúp khách hàng có thể chọn được chỗ ngồi ưng ý nhất, hơn nữa chức năng đặt bạn chỉ cho phép khách hàng đặt trước 1 ngày để tránh tình trạng khách hàng đặt sai ngày hay Vận May Theo đó, màu xanh, đỏ là những màu chưa được đặt, còn màu xám đã được khách hàng đặt rồi Chức năng này nó sẽ giúp cho khách hàng chưa tới quán cũng có thể hình dung được vị trí của mình, cũng như không gian quán để có sự lựa chọn phù hợp, tăng tính trải nghiệm cho khách hàng.
Giỏ hàng
Hình 7 65: Hình ảnh giỏ hàng của Vận May.
Giỏ hàng sẽ hiển thị những món ăn mà khách hàng đang xem xét, cho khách hàng biết được tổng hóa đơn Ngoài ra giỏ hàng còn có 2 nút điều hướng tới trang thanh toán và trang menu giúp khách hàng có thể thanh toán hay tiếp tục mua sắm mà không cần phải di chuyển qua nhiều trang Giỏ hàng luôn hiển thị bên phải của website ở tất cả các trang, giúp cho khách hàng có thể thuận tiện xem xét, cũng như kiểm tra giỏ hàng từ đó có thể kích thích khách hàng mua sắm, cũng như tương tác với website.
TEST, PUBLISH AND MAINTAIN THE WEBSITE
Kiểm tra và khả năng tương thích trên các thiết bị
Tự kiểm tra các chỉ số bằng Google Lighthouse
Cho một nhóm 20 người thực hiện các bài kiểm tra:
Thử nghiệm các chức năng đăng nhập, tìm kiếm, đặt bàn, điền biểu mẫu,gửi dữ liệu
Kiểm tra mức độ thân thiện với người dùng
Đo lường hiệu suất của trang web, tốc độ tải trang,
Xác minh khả năng tương thích trên các trình duyệt khác nhau (Chrome, Edge,Safari, ) và các thiết bị khác nhau (máy tính, điện thoại, )
Xuất bản và duy trì website
Chọn tên miền (domain name) và hosting: Chọn tên miền xác định rõ mục đích của trang web: vanmayrestaurant.site.
Phát triển trang web: Lựa chọn sử dụng các hệ thống quản lý nội dung (CMS) WordPress.
Tối ưu hóa công cụ tìm kiếm (SEO): Đảm bảo trang web được tối ưu hóa cho công cụ tìm kiếm để tăng khả năng xuất hiện trên trang kết quả tìm kiếm.
Kết nối tên miền với hosting và đưa trang web vào hoạt động.
Duy trì trang web
Thường xuyên cập nhật nội dung trên trang web để giữ cho website luôn mới mẻ và hấp dẫn Cải thiện SEO của trang web.
Thường xuyên theo dõi hiệu suất trang web và tối ưu hóa để đảm bảo trải nghiệm người dùng tốt.
Sử dụng các công cụ phân tích web như Google Analytics để theo dõi lượng truy cập và hiểu hơn hành vi của người dùng trên trang web.
Thường xuyên sao lưu các tệp tin, cơ sở dữ liệu quan trọng của trang web.
Thường xuyên kiểm tra các liên kết hỏng hoặc báo lỗi.
Kế hoạch bảo trì trang web
Thời gian Công việc Mục đích Bộ phận
Kiểm tra hoạt động website Đảm bảo tất cả các trang của website không có lỗi và tải được bình thường
Cập nhật phần mềm, plugin Đảm bảo hoạt động của các chức năng trên website được ổn định và đảm bảo bảo mật
Sao lưu dữ liệu Đảm bảo dữ liệu được sao lưu thường xuyên để có thể backup dữ liệu khi có sự cố xảy ra
Cập nhật các chương trình, sự kiện của Doanh nghiệp
Thường xuyên cập nhật các nội dung, sự kiện mới để thu hút nhiều người dùng
Quản trị viên website và bộ phận Marketing
Cải thiện thứ hạng trang web, thu hút khách hàng Bộ phận Marketing Mỗi tháng
Kiểm tra tốc độ website Đảm bảo tốc độ tải, phát hiện và khắc phục sớm nhất các nguyên nhân ảnh hưởng đến tốc độ tải trang
Kiểm tra bảo mật website
Ngăn chặn các cuộc tấn công mạng, đảm bảo website hoạt động an toàn
Phân tích và thống kê lượng truy cập
Hiểu rõ hơn về khách hàng và hiệu quả hoạt động của trang web, cải thiện tỷ lệ chuyển đổi, đo lường mức độ thành
Quản trị viên website công của các chiến dịch marketing
SEMANTICS CHECK
Performance
Hình 10 1: Chỉ số Performance của website Vận May.
First Contentful Paint: Thời điểm mà văn bản/ hình ảnh đầu tiên được hiện lên ở mức khá nhanh 0.9s.
Total Blocking Time: Tổng thời gian giữa First Contentful Paint và Time To Interactive khi mà luồng chính (main thread) bị chặn là 0s.
Cumulative Layout Shift: Trang web có có điểm CLS tuyệt đối so với tiêu chuẩn
