Hồ sơ phương án giao diện · 10.2026 Bạt Che Nắng 24h · Hoà Phát Smart Việt Nam
Mở bản kế hoạch →

Thiết kế lại website bán hàng

Ba cách kể câu chuyện
che nắng, che mưa.

Từ dữ liệu thật của batchenang24h.com — 78 sản phẩm, 4 nhóm giải pháp, 15 quận nội thành — tôi dựng 3 phương án giao diện có định hướng khác nhau. Mỗi phương án là một cách trả lời câu hỏi: khách nên tin, chọn và gọi Hoà Phát vì điều gì?

WordPress + WooCommerce Rank Math SEO Mobile-first Dữ liệu 10/2026

Trước khi vẽ lại

4 điểm cần sửa cùng lúc với giao diện

Giao diện mới sẽ vô nghĩa nếu cấu trúc nội dung và dữ liệu sản phẩm vẫn giữ nguyên. Đây là những điểm ảnh hưởng trực tiếp đến SEO và chuyển đổi.

Thiếu H1 Trang chủ không có thẻ H1

Tiêu đề đang nằm trong hình/div. Google khó xác định chủ đề trang, cũng khó tạo sitelink.

15 Trang quận trùng lặp

Mỗi trang chứa 16–36 sản phẩm gần như giống nhau. Nguy cơ nội dung mỏng, doorway và cannibalize từ khoá.

44% “Giá liên hệ” thiếu công cụ

34/78 sản phẩm không có giá. Cần form báo giá, dự toán m² và Zalo thay vì chỉ ghi “liên hệ”.

0 Đánh giá & nội dung nuôi SEO

Chỉ 2 bài viết, 0 review. Thiếu tín hiệu E-E-A-T, thiếu review schema và nội dung so sánh – tư vấn.

Ghi chú thêm: website đang dùng 2 hotline (0971 916 788 và 0375 687 123) và 2 cách ghi địa chỉ (Đại Mỗ / Trung Văn). Cần thống nhất NAP trước khi làm Local SEO & Google Business Profile.

Ba hướng, ba cách chốt đơn

Phương án 1 · 2 · 3

Mỗi phương án đều dùng chung dữ liệu sản phẩm, ảnh công trình và hotline thật. Khác nhau ở cách sắp xếp ưu tiên: thương hiệu, chuyển đổi hay tốc độ liên hệ.

Phương án 1 – Xưởng Việt, giao diện desktop
Phương án 1 trên mobile
01

Xưởng ViệtPremium · Editorial

“Mái che vừa vặn. Không gian vừa ý.”

Đưa website về đúng chất may đo: ảnh công trình lớn, chữ serif, nhịp thở chậm và những câu chuyện về vật liệu. Bán cảm giác “được làm riêng” trước khi bán sản phẩm.

EditorialẢnh công trìnhĐặt khảo sátKể chuyện vật liệu
#1F4D3A #C0603A #F7F2E8 #1B2A22

Điểm mạnh

  • Nâng định vị thương hiệu rõ rệt
  • Công trình và vật liệu được kể có chiều sâu
  • CTA mềm, phù hợp khách cân nhắc kỹ

Đánh đổi

  • Ít “chốt đơn” hơn, cần nội dung tốt
  • Phụ thuộc bộ ảnh chất lượng cao
Phương án 2 – Chuẩn Kỹ Thuật, giao diện desktop
Phương án 2 trên mobile
02

Chuẩn Kỹ ThuậtConversion · Spec

“Đúng khổ. Đúng vật liệu. Đúng hẹn.”

Biến 78 sản phẩm và 44% “giá liên hệ” thành một hệ thống báo giá: dự toán theo m², bảng so sánh vật liệu, quy trình 4 bước và FAQ. Trả lời câu hỏi của khách trước khi họ gọi.

Dự toán m²So sánhBáo giá 2hSchema
#0B2A4A #F26522 #F4F7FA #0A1B2B

Điểm mạnh

  • Trả lời đúng câu hỏi trước khi mua
  • Tăng tỷ lệ để lại số qua form & dự toán
  • Cấu trúc tốt cho SEO, Ads và AI Overview

Đánh đổi

  • Cần chốt đơn giá minh hoạ chính xác
  • Cảm xúc thương hiệu thấp hơn PA1
Phương án 3 – 24h Gần Bạn, giao diện desktop
Phương án 3 trên mobile
03

24h Gần BạnLocal · Mobile-first

“Nắng mưa cứ để Hoà Phát lo.”

Thiết kế như một ứng dụng: thẻ màu, chat Zalo, gửi ảnh nhận giá và thanh điều hướng dưới. Dành cho khách mobile, quảng cáo local và những người muốn có giá trong 2 giờ.

ZaloGửi ảnhKhu vựcApp-like
#0B84E0 #FFC93C #F5FBFE #0E2E3E

Điểm mạnh

  • Gần gũi, rất dễ dùng trên mobile
  • Zalo chat & gửi ảnh là CTA chính
  • Thuận lợi chạy quảng cáo local

Đánh đổi

  • Ít premium, dễ giống shop nhỏ
  • Khó thể hiện công trình lớn

Đối chiếu

Chọn theo mục tiêu, không theo màu.

Thang 3 điểm là đánh giá định tính dựa trên dữ liệu hiện tại của website, không phải điểm số kỹ thuật.

Tiêu chí Xưởng Việt Chuẩn Kỹ Thuật Đề xuất 24h Gần Bạn
Nhận diện thương hiệu ●●●Cao cấp, khác biệt ●●●Chuyên nghiệp, kỹ thuật ●●●Thân thiện, đại chúng
Độ tin cậy kỹ thuật ●●● ●●●Bảng so sánh, quy trình, bảo hành ●●●
Tối ưu chuyển đổi ●●●CTA mềm ●●●Form, dự toán, Zalo, hotline ●●●Zalo-first, ít bước
SEO & nội dung ●●● ●●●FAQ, bảng, schema, internal link ●●●
Trải nghiệm mobile ●●● ●●● ●●●App bar, chat, gửi ảnh
Module WooCommerce ●●● ●●●Giỏ, lọc, so sánh, dự toán ●●●
Nguồn lực triển khai ●●●Cần đầu tư ảnh & nội dung ●●●Nhiều module hơn ●●●Nhanh nhất để launch

Đề xuất của người thiết kế

Chọn Chuẩn Kỹ Thuật làm nền, mượn chất liệu của hai phương án còn lại.

Với 78 sản phẩm, 44% “giá liên hệ” và đặc thù may đo theo khổ, khách cần biết khoảng giá và quy trình trước khi gọi. PA2 trả lời được điều đó bằng dự toán, so sánh và form báo giá — đồng thời vẫn đủ cấu trúc để làm SEO với Rank Math.

Tôi sẽ giữ nhịp ảnh lớn và chữ serif của PA1 cho phần “câu chuyện xưởng”, và giữ thanh Zalo + app bar của PA3 cho mobile. Kết quả là một website kỹ thuật nhưng không khô.

Nếu chốt hôm nay

Lộ trình 8 tuần để launch.

Kế hoạch giả định nội dung và ảnh được cung cấp đúng hạn. Thời gian thực tế điều chỉnh theo khối lượng migration và số template.

  1. 01

    Chốt phương án

    Chọn PA, chốt NAP, hotline, định vị.

  2. 02

    Nội dung & ảnh

    20+ ảnh công trình, bảng giá, 10 bài SEO.

  3. 03

    Dựng theme

    Block theme, template Woo, component.

  4. 04

    SEO & QA

    Schema, sitemap, tốc độ, mobile, 301.

  5. 05

    Launch

    Migration, đo lường, nhận việc.

Checklist chốt phương án

  • Chọn 1 phương án chính (hoặc hybrid rõ ràng).
  • Xác nhận hotline & địa chỉ chuẩn để thống nhất NAP.
  • Chốt ảnh công trình: có ảnh thật, bản quyền, tối thiểu 20 ảnh.
  • Chốt giá hiển thị / “giá liên hệ” cho 78 sản phẩm.
  • Chốt kênh nhận báo giá: form, Zalo, hotline — ai trả lời?
  • Chốt mục tiêu 90 ngày: leads, đơn hàng hay nhận diện?
  • Chốt ngân sách & thời gian cho ảnh/nội dung.
  • Chốt giữ 15 trang quận hay gộp thành 5–7 landing page.