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
Wireframe
Trang chủ
Trang danh mục sản phẩm
Trang sản phẩm
Trang sản phẩm chi tiết
Trang hỗ trợ khách hàng
Trang blog
Trang trở thành chủ tiệm
Trang giỏ hàng
Trang đăng nhập
Trang tài khoản của tôi
Mockup
2.1 Trang danh mục sản phẩm
2.4 Trang sản phẩm chi tiết
2.5 Trang hỗ trợ khách hàng
2.7 Trang trở thành chủ tiệm
2.12.Trang tài khoản của tôi
XIX Prototype web design into selected platform
Logo trên nhiều nền màu khác nhau
- Logo Duli Travel được thiết kế kết hợp chữ “D” và “L”, là 2 chữ trong tên thương hiệu “Duli”.
- Logo được thiết kế theo 2 màu chủ đạo là xanh dương và trắng và có 3 mẫu logo để 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àu xanh đậm đến nhạt dần, giúp logo trở nên độc đáo và bắt mắt hơn.
- Font chữ đã được đổi thành font việt hoá và dễ đọc đối với mọi người
- Font Fira Sans được hình thành bởi các nét thẳng, đơn giản và rõ ràng, nhấn mạnh vào tính dễ nhìn, dễ đọc Fira Sans mang hơi hướng hiện đại hơn, gọn gàng hơn và vẫn được dùng tốt ở các câu tiêu đề, slogan, nội dung của website.
PROTOTYPE WEB DESIGN INTO SELECTED PLATFORM (ODOO) 29 1 Design System
Trang chủ
- Các tính năng khác như:
- Header ở trang chủ được thiết kế có phần text màu trắng nổi bật trên khung nền tố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 quan trọ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ía trê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ỏ
- Danh mục sản phẩm được thiết kế đơn giản nhưng tập hợp đầy đủ tất cả các dòng sản phẩm của doanh nghiệp cung cấp cho khách hàng
- Danh mục được thiết kế và sử dụng màu chủ đạo tạo sự đồng nhất cho toàn bộ trang web giúp thiết kế được đẹp mắt hơn.
- Mỗi dòng sản phẩm được nhóm lại với nhau bởi sự tương đồng dựa trên tiêu chí như loại sản phẩm, đặc tính của sản phẩm giúp khách hàng có thể dễ dàng chọn lựa sản phẩm phù hợp với nhu cầu cá nhâ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
- Slide banner giúp gây ấn tượng và tạo sự thu hút cho khách hàng ngay từ lần đầu vào website
- Duli chọn hình ảnh xuất hiện trên banner là ảnh thiên nhiên đẹp mắt kết hợp với kích thước full màn hình sẽ khiến khách hàng nhận diện ngay đây là trang web về lĩnh vực du lịch và khiến họ cảm thấy hứng thú trải nghiệm web hơn
- Các thông điệp thể hiện trên ảnh sẽ quảng bá thương hiệu và kích thích người dùng khám phá sản phẩm của Duli
Sử dụng CTA để thúc đẩy hành động, khách hàng bấm vào nút có thể đến thẳng trang Sản phẩm để mua hàng.
- Gồm 3 hình ảnh và thông tin của chương trình khuyến mãi
- 3 button “Xem ngay” dưới mỗi ảnh
- Duli sẽ thường xuyên có những chương trình khuyến mãi để thu hút khách hàng mới và quảng bá thương hiệu và những thông tin đó sẽ được thể hiện ngay tại banner quảng cáo của trang chủ
- 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ấp và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àng
- Banner tiện ích giúp tăng giá trị của dịch vụ trong mắt khách hàng, được Duli sử dụng như một cách để thu hút và duy trì khách hàng trên trang web.
- 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 khi sử dụng dịch vụ của Duli:
+ Chính sách đảm bảo quyền lợi người thuê
+ Đượ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, đặt banner 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
- Gồm 4 hình ảnh tương ứng 4 danh mục sản phẩm
- Mỗi tên danh mục sản phẩm sẽ được gắn link điều hướng về trang sản phẩm tương ứng trong danh mục
- Danh mục sản phẩm giúp cho khách hàng nắm được các lĩnh vực dịch vụ của website.
- 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
Banner ngay trên trang chủ mục đích đề xuất cho khách hàng những loại sản phẩ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ách hàng
3.8 Banner trở thành chủ tiệm
- Heading “Trở thành chủ tiệm”
- Button “Trở thành chủ tiệm ngay”
- 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ếu só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ột trong 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ứa nhữ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ải nghiệm du lịch, chia sẻ mẹo, tips khi du lịch hay review dụng cụ sản phẩm.
Footer là phần cuối của một trang web, thường bao gồm thông tin liên hệ như email, số điện thoại và địa chỉ; liên kết đến các trang quan trọng trên trang web; thông tin về công ty như tên, logo và thông tin bản quyền; liên kết đến các trang mạng xã hội của công ty; và các chính sách, điều khoản sử dụng và chính sách bảo mật 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ầu tì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.
Trang sản phẩm
● Trang được thiết kế bắt mắt, hình ảnh đa dạng kết hợp với màu sắc chủ đạo là xanh, vàng, trắng tạo nên sự đồng nhất giữa các trang với nhau.
● Header: Cung cấp cho khách hàng các thông tin cần thiết chẳng hạn như giỏ hàng, sản phẩm yêu thích hoặc có thể điều hướng khách hàng sang các trang khác như: Trang chủ, chăm sóc khách hàng, blog, trở thành chủ tiệm, …
● Google map: Cung cấp cho khách hàng vị trí hiện tại của mình và những cửa hà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ách hà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ội như Facebook, Instagram,youtube, email
- Đưa ra các lựa chọn hiển thị sản phẩm cho khách hàng
Để tạo sự thuận tiện cho khách hàng, cửa hàng cung cấp nhiều lựa chọn lọc sản phẩm Khách hàng có thể xem danh sách tất cả sản phẩm có sẵn hoặc sử dụng các bộ lọc được thiết kế sẵn để thu hẹp phạm vi tìm kiếm dựa trên loại sản phẩm hoặc các thuộc tính cụ thể Tính năng này giúp khách hàng dễ dàng tìm thấy những sản phẩm phù hợp với nhu cầu của mình.
- 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 theo màu sắc sở thích, giá cá phù hợp với túi tiền của người dùng
- Các thông tin về sản phẩm: Tên sản phẩm, hình ảnh, giá cả, mô tả về sản phẩm
- Hiển thị các sản phẩm bán chạy nhất hiện nay với số lượt mua, đánh giá cao
- Khách hàng có thể chọn hiển thị sản phẩm theo nhu cầu sử dụng của mình.Chẳng hạn như trong mục “Cắm trại-Leo núi”, khách hàng có thể chọn hiển thị sản phẩm liên quan về lều trại, phụ kiện glamping, thiết bị bảo hộ,
- 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)…
● 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ách hà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 bằng cách mời họ khám phá thêm thông tin hấp dẫn và hữu ích thông qua nút "Tìm hiểu thêm" Nút này dẫn khách hàng trực tiếp đến các bài viết trên blog cung cấp thông tin chuyên sâu, mẹo và lời khuyên hữu ích liên quan đến chủ đề của trang web.
Trang sản phẩm chi tiết
+ Được thiết kế đơn giản nhưng đầy đủ thông tin, tập trung chủ yếu vào hình ảnh, thông tin về giá và mô tả sản phẩm
+ Đồng bộ bố cục, màu sắc, font chữ, được chia làm các phần chính như sau:
● Header bar, thanh tìm kiếm và đường dẫn mục: Cung cấp cho người dùng một số thông tin về giỏ hàng hiện tại, sản phẩm yêu thích, đường dẫn sản phẩm và lọc tìm nhanh chóng
● Footer bar: Nhắc lại thông tin doanh nghiệp bao gồm: danh mục sản phẩm cung cấp, chính sách và các liên kết bên ngoài liên quan đến Duli
- Các thông tin về hình ảnh, tên sản phẩm, lượt đánh giá, tên, mô tả ngắn, giá cả và thuộc tính sản phẩm
- Tùy chỉnh được số lượng cũng như chọn phương thức thanh toán là gì?
Ngoài ra, việc hiển thị cụ thể và rõ ràng các mục thông số kỹ thuật và thông tin doanh nghiệp sẽ giúp nâng cao độ uy tín của thương hiệu trong mắt khách hàng Điều này giúp tạo sự an tâm và tin tưởng cho khách hàng khi sử dụng sản phẩm, đồng thời cung cấp kênh liên lạc thuận tiện nếu có vấn đề phát sinh.
- Ngoài ra, thiết lập cho khách hàng thao tác được các tính năng như thêm vào mục sản phẩm yêu thích
- Sau khi kết thúc mua hàng, mỗi khách hàng được phép đánh giá chất lượng sản phẩm và quá trình chăm sóc khách hàng của mỗi chủ tiệm
- Phần đánh giá còn giúp người đọc có cái nhìn khách quan về sản phẩm, những nhận xét khách hàng là một người dữ liệu giúp chủ tiệm ngày càng cải thiện sản phẩm để làm hài lòng với nhiều khách hàng hơn.
● Các sản phẩm tương tự: Nhằm khai thác tối đa nhu cầu khách hàng, phần gợi ý sản phẩm giúp người dùng xem thêm về sản phẩm tương đồng đang tìm kiếm
● Chính sách thuê đồ: Quy định các chính sách rõ ràng
Trang hỗ trợ khách hàng
Trang chăm sóc khách hàng sẽ bao gồm các thông tin sau:
- Biểu mẫu liên hệ: là một form để khách hàng điền thông tin và các vấn đề mà khách hàng gặp phải Khi khách hàng gửi thành công các thông tin liên hệ của khách hàng sẽ được thông báo về gmail của bộ phận chăm sóc khách hàng DULI nhằm giúp khách hàng có thể liên hệ với trang web DULI, đặt câu hỏi hoặc yêu cầu hỗ trợ đồng thời giúp DULI tiếp cận và thuận tiện hỗ trợ khách hàng hơn.
Thông tin liên hệ dễ dàng truy cập là điều cần thiết cho bất kỳ doanh nghiệp nào Trong trường hợp DULI, thông tin liên hệ rõ ràng, bao gồm địa chỉ, số điện thoại, email, v.v., giúp khách hàng liên hệ trực tiếp với công ty để giải đáp thắc mắc hoặc cung cấp phản hồi Điều này tạo thuận lợi cho giao tiếp giữa DULI và khách hàng, giúp giải quyết nhanh chóng các mối quan tâm và nâng cao trải nghiệm tổng thể của khách hàng.
- Liên kết xã hội: cung cấp các trang mạng xã hội của DULI giúp người dùng có thể truy cập tiếp cận hơn với DULI, đồng thời giúp xây dựng thương hiệu của và thu hút nhiều khách hàng hơn.
- Các vấn đề thường gặp: bao gồm các hướng dẫn tại DULI giúp giải đáp được một số thắc mắc của khách hàng đồng thời minh bạch về hoạt động, các chính sách có tại DULI:
Trang Blog
- Trang Blog bao gồm các bài viết về 4 chủ đề chính: Tin tức, Cẩm nang, Review dụng cụ, trải nghiệm Cung cấp đầy đủ các kỹ năng xung quanh câu chuyện du lịch Ngoài ra người đọc có thể sử dụng thanh tìm kiếm để tra cứu nhanh những bài viết mong muốn
- Mỗi bài viết thu nhỏ sẽ hiển thị:
+ Hình ảnh: giúp trình bày các ý tưởng và thông tin một cách trực quan, dễ hiểu và thu hút hơn
+ Tiêu đề: Tiêu đề bài viết là một phần rất quan trọng để thu hút người đọc, Là một câu ngắn gọn cụ thể nói lên mục tiêu cả bài viết giúp người đọc dễ tiếp cận với bài viết mà mình muốn hơn.
Phần mô tả là phần giới thiệu quan trọng của bài viết, cung cấp thông tin cô đọng về nội dung chính của bài viết Phần này giúp người đọc nhanh chóng hiểu được thông tin cốt lõi và quyết định có nên tiếp tục đọc bài viết chi tiết hay không.
- Người đọc chỉ click vào bài viết mình thích để xem nội dung và có thể bình luận chia sẻ quan điểm của họ về bài viết và tương tác với nhau.
Trang trở thành chủ tiệm
- Bố cục: Thiết kế đơn giản, kết hợp với hình ảnh bắt mắt nhằm thu hút khách hàng, đồng bộ bố cục, màu sắc, font chữ
- Quy trình trở thành chủ tiệm:
+ Người dùng sẽ phải click vào nút “Đăng ký làm chủ tiệm” để cung cấp các thông tin cần thiết của cửa hàng
+ Khi nhập hết các thông tin cần thiết người dùng bấm nút “Gửi” để chuyển thông tin đến với nhà tuyển dụng
+ Người dùng muốn trở thành chủ tiệm sẽ phải làm theo từng bước bắt buộc như trên
- Lợi ích khi trở thành chủ tiệm:
+ Đưa ra các lợi ích khi trở thành chủ tiệm nhằm thu người dung đăng ký
Trang giỏ hàng và thanh toán
Khi khách hàng chọn sản phẩm mà họ muốn thuê và thêm vào giỏ hàng. Ở phần giỏ hàng sẽ có các thông tin:
+ Tên sản phẩm mà họ chọn
+ Thông tin chi tiết về sản phẩm đó: Kích thước, màu sắc…
+ Số lượng sản phẩm cần thuê
+ Giá cả của sản phẩm
+ Có thể hủy chọn sản phẩm để thay đổi sự lựa chọn
Xuất hiện một hóa đơn bên góc báo giá về tổng đơn hàng, phí vận chuyển
Khách hàng điền cung cấp thông tin giao hàng như tên, địa chỉ, số điện thoại, và bất kỳ thông tin khác cần thiết để giao hàng thành công trực tiếp mà không cần đăng nhập Trường hợp khách hàng đã có tài khoản và đăng nhập điền đầy đủ thông tin thì tiến hành sang bước xác nhận thanh toán
Khách hàng chọn phương thức thanh toán phù hợp với họ, bao gồm thanh toán trực tuyến bằng thẻ tín dụng hoặc chuyển khoản ngân hàng.
- Xác nhận đơn hàng: Khách hàng xem lại đơn hàng và thông tin thanh toán để đảm bảo rằng mọi thông tin đều chính xác trước khi xác nhận đơn hàng.
- Hoàn tất thanh toán: Khách hàng hoàn tất thanh toán và nhận được thông báo xác nhận về đơn hàng của mình qua email
Bước 4: Nhận được email đơn hàng
Sau khi hoàn tất quá trình thanh toán, khách hàng sẽ nhận được thông tin về việc xác nhận đơn hàng, số tiền đã thanh toán và thời gian giao hàng dự kiến (nếu có).
Trang đăng nhập
- Đưa ra các thông tin bắt buộc để khách hàng đăng nhập vào hệ thống như email và mật khẩu
- Nút đăng nhập được thiết kế với màu nổi bật giúp khách hàng tiện lợi hơn trong việc đăng nhập, đặc biệt là sử dụng màu chủ đạo tạo sự đồng nhất cho toàn bộ trang web giúp thiết kế được đẹp mắt hơn.
- Cho phép khách hàng đăng nhập thông qua tài khoản facebook và google
- Cung cấp các tùy chọn khác như
+ Bạn chưa có tài khoản? : điều phối khách hàng đăng ký tài khoản nếu chưa có tài khoản
+ Đặt lại mật khẩu: trong trường hợp khách hàng quên mật khẩu đăng nhập có thể tự đổi lại mật khẩu bằng xác nhận qua email
Mật khẩu cấp lại sẽ được gửi tới email của khách hàng
Trang đăng ký
- Đưa ra các thông tin cần thiết bắt buộc khi lập tài khoản như là email, tên đăng nhập, mật khẩu và xác nhận mật khẩu.
- Cho phép khách hàng nhập thông qua tài khoản facebook và google
- Nút đăng nhập được thiết kế với màu nổi bật giúp khách hàng tiện lợi hơn trong việc đăng nhập, đặc biệt là sử dụng màu chủ đạo tạo sự đồng nhất cho toàn bộ trang web giúp thiết kế được đẹp mắt hơn.
- Cung cấp các tùy chọn đăng nhập nếu khách hàng đã có mật khẩu “Bạn đã có tài khoản?” : điều phối khách hàng đăng nhập tài khoản để tiến hành đăng nhập.
Sau khi khách hàng đăng ký tài khoản thành công sẽ được đăng nhập vào website và được điều phối đến trang “tài khoản của tôi”
Trang tài khoản của tôi
- Cung cấp các thông tin về đơn hàng của khách hàng như: đơn đang chờ báo giá, tổng số đơn hàng đã được báo giá, hoá đơn và hoá đơn thanh toán Khách hàng có thể click vào từng khung để theo dõi nội dung chi tiết.
- Hiển thị thông tin về tài khoản khách hàng như thông tin cá nhân và địa chỉ.
- Khách hàng dễ dàng chỉnh sửa thông tin tài khoản thông qua trang chỉnh sửa với đường link liên kết tại đoạn text “chỉnh sửa”
- Giao diện được chia là 2 phần giúp khách hàng tiện theo dõi thông tin mà không phải lướt trang quá sâu.
Giao diện chỉnh sửa thông tin khách hàng
- Khách hàng dễ dàng theo dõi cũng như thay đổi thông tin về tên và địa chỉ liên lạc: sđt, địa chỉ, thành phố,
- Thiết kế thông tin theo từng ô giúp khách hàng dễ dàng theo dõi mà không bị rối thông tin.