Thiết kế website mai mối Family Connect: từ nhu cầu khách hàng đến giải pháp

Family Connect là ai và bài toán khi thiết kế website mai mối

Family Connect là dịch vụ mai mối có chuyên viên tư vấn thật, dành cho người muốn tìm hiểu nghiêm túc để tiến tới hôn nhân. Khách hàng là người độc thân đã lâu, người bận rộn với công việc, người không hợp với app hẹn hò và cả những người đã ly hôn hoặc goá muốn đi bước nữa. Văn phòng đặt tại Tây Hồ, Hà Nội.

Khi nhận dự án, mình xác định website phải làm được ba việc cùng lúc:

• Là bộ mặt thương hiệu: người lần đầu nghe tên Family Connect vào website phải hiểu ngay đây là ai, khác app hẹn hò ở đâu và có đáng tin không.
• Là điểm đến của quảng cáo: mọi chiến dịch Facebook, Google sau này đều đổ về website, nên website phải chuyển được lượt truy cập thành đăng ký tư vấn.
• Là công cụ vận hành: đội ngũ Family Connect phải tự quản lý được lead, hồ sơ, câu chuyện, bài viết mà không cần gọi lập trình viên mỗi lần sửa một dòng chữ.

Ba mục tiêu này kéo theo gần như toàn bộ quyết định thiết kế và kỹ thuật mà mình trình bày ở các phần sau.

Phân tích nhu cầu: khách hàng của dịch vụ mai mối đang lo điều gì?

Trước khi phác thảo giao diện, mình liệt kê những câu hỏi mà một người độc thân 30–45 tuổi sẽ tự hỏi khi lần đầu vào website một dịch vụ mai mối. Mình gom lại thành bốn nỗi lo lớn:

1. Sợ hồ sơ ảo, sợ lừa đảo. Đây là lý do nhiều người rời bỏ app hẹn hò. Họ cần thấy rõ hồ sơ được xác minh như thế nào.
2. Sợ lộ thông tin. Không ai muốn đồng nghiệp hay người quen biết mình đang "đi tìm người yêu qua dịch vụ". Quyền riêng tư phải được nói rõ, không phải giấu ở chân trang.
3. Sợ bị ép mua gói đắt. Dịch vụ mai mối thường có mức phí không nhỏ, khách sợ vừa để lại số điện thoại là bị gọi chốt sale.
4. Sợ bị phán xét. Người lớn tuổi, người đã ly hôn, đã có con rất nhạy cảm với việc mình có "được chào đón" hay không.

Phía chủ dịch vụ cũng có nhu cầu riêng: cần lead thật, biết lead đến từ kênh quảng cáo nào, tự chỉnh nội dung được, và phải tuân thủ quy định về dữ liệu cá nhân — vì thông tin tình trạng hôn nhân, năm sinh, số điện thoại đều là dữ liệu nhạy cảm.

Từ đó mình lập một bảng đối chiếu: mỗi nỗi lo phải có ít nhất một phần trên website trả lời trực tiếp.

Đây là bước mình thấy nhiều website dịch vụ bỏ qua: thiết kế theo "trend" hoặc theo website đối thủ, thay vì bắt đầu từ câu hỏi thật của khách hàng. Mình từng viết về hệ quả của việc này trong bài website spa không ra khách: 7 lỗi thường gặp và cách sửa.

Phương án kỹ thuật: vì sao mình chọn WordPress với theme và plugin viết riêng

Mình cân nhắc ba phương án phổ biến khi thiết kế website dịch vụ:

Mình chọn phương án thứ ba và tách làm hai phần:

• Theme "Family Connect": lo toàn bộ giao diện tông hồng – trắng, font Be Vietnam Pro kết hợp Playfair Display, đồng bộ trên mọi trang.
• Plugin lõi "Family Connect Core": chứa dữ liệu nghiệp vụ — hồ sơ khách hàng, câu chuyện thành công, đội ngũ tư vấn, hình ảnh thực tế, gói dịch vụ, hỏi đáp, form lead và cấu hình gửi mail.

Cách tách này có một lợi ích quan trọng: dữ liệu nằm trong plugin, nên sau này đổi giao diện cũng không mất lead hay hồ sơ. Đây là thói quen mình mang từ những năm làm phần mềm doanh nghiệp: giao diện có thể thay, dữ liệu vận hành thì phải sống lâu hơn giao diện.

Ngoài website chính, mình cũng dựng sẵn kiến trúc landing page riêng cho từng chiến dịch quảng cáo: mỗi chiến dịch là một mã nguồn độc lập, có form và trang quản trị lead riêng. Thêm, sửa hay gỡ một chiến dịch không ảnh hưởng tới website chính hay chiến dịch khác.

Trang chủ 15 phần: mỗi phần trả lời một câu hỏi của khách

Trang chủ là nơi phần lớn lượt truy cập từ quảng cáo đổ về, nên mình thiết kế theo đúng thứ tự câu hỏi trong đầu khách: Đây là gì? → Có dành cho mình không? → Khác gì app hẹn hò? → Làm thế nào? → Có đáng tin không? → Đăng ký ở đâu? Cả 15 phần đều sửa được nội dung và bật/tắt riêng trong trang quản trị.

1. Banner đầu trang: nói rõ giá trị trong 5 giây

Tiêu đề "Gặp đúng người, cùng xây một mái ấm" đặt cảm xúc lên trước, đoạn mô tả bên dưới nói rõ cách làm: lắng nghe, xác minh, chỉ giới thiệu người phù hợp. Hai nút hành động — Đăng ký tư vấn miễn phí và Nhắn Zalo — dành cho hai kiểu khách: người thích điền form và người muốn nhắn tin trước cho chắc. Ba dòng tin cậy (tư vấn ban đầu miễn phí, hồ sơ được xác minh, dành cho cả nam và nữ) xử lý ngay nỗi lo đầu tiên.

Banner đầu trang: thông điệp, 2 nút hành động và 3 điểm tin cậy nằm gọn trong màn hình đầu tiên.

2. Về chúng tôi và "Dành cho ai": giúp khách tự nhận ra mình

Phần Về chúng tôi định vị bằng một câu: "Không phải ứng dụng hẹn hò. Là người mai mối đồng hành cùng bạn", kèm ba giá trị Nghiêm túc – Riêng tư – Tận tâm. Ngay sau đó là bốn hoàn cảnh cụ thể: độc thân đã lâu, bận rộn với công việc, không hợp app hẹn hò, muốn đi bước nữa. Khách đọc thấy hoàn cảnh của mình trong đó thì sẽ đọc tiếp.

Bốn hoàn cảnh được gọi tên rõ ràng, trong đó có nhóm muốn đi bước nữa.

3. Bảng so sánh với app hẹn hò: tách mình ra khỏi "đám đông"

Đối thủ lớn nhất của Family Connect không phải một dịch vụ mai mối khác, mà là thói quen dùng app hẹn hò. Vì vậy mình đặt một bảng so sánh 6 tiêu chí: hồ sơ đối phương, mục đích tham gia, cách tìm người, quyền riêng tư, buổi gặp đầu tiên và việc đồng hành sau buổi gặp. Cột Family Connect được làm nổi bật, khách chỉ cần lướt là thấy sự khác biệt.

Bảng 6 tiêu chí so sánh Family Connect với ứng dụng hẹn hò thông thường.

4. Gói dịch vụ không ghi giá — có chủ đích

Ba gói Kết Nối, Đồng Hành, Trọn Vẹn được trình bày theo quyền lợi tăng dần, gói giữa được đánh dấu "Khuyên dùng". Mình chủ động không ghi giá vì mức độ hỗ trợ phụ thuộc vào tiêu chí và hoàn cảnh của từng người — một con số đặt sai ngữ cảnh dễ khiến khách rời trang trước khi được tư vấn. Thay vào đó, nút "Nhận tư vấn & báo giá" ở gói nào thì form đăng ký tự chọn sẵn gói đó, chuyên viên gọi lại đã biết khách quan tâm gói nào.

Chương trình Đi bước nữa cho người đã ly hôn hoặc goá được tách thành một khối riêng, với ngôn ngữ tế nhị, không phán xét.

Ba gói dịch vụ không ghi giá; mỗi nút dẫn tới form và tự điền gói khách quan tâm.

5. Quy trình 5 bước: khách luôn biết mình đang ở đâu

Đăng ký thông tin → Trò chuyện 1-1 → Xác minh hồ sơ → Giới thiệu & gặp mặt → Đồng hành tìm hiểu. Câu dẫn "Bạn luôn là người quyết định bước tiếp theo" đặt ở đây để giảm cảm giác bị cuốn vào một quy trình bán hàng.

Quy trình kết nối 5 bước, mỗi bước một câu mô tả ngắn.

6. Hồ sơ thành viên và câu chuyện thành công: minh bạch đến từng nhãn

Đây là phần mình cân nhắc lâu nhất. Khách muốn thấy "ở đây có ai", nhưng thành viên thì không muốn bị công khai. Giải pháp là hồ sơ rút gọn theo tab Nam/Nữ: chỉ có tên viết tắt, năm sinh, nơi sống, nghề nghiệp và mong muốn. Họ tên đầy đủ, hình ảnh và liên lạc chỉ trao đổi khi cả hai bên đồng ý.

Trong trang quản trị, một hồ sơ chỉ hiện ra ngoài website khi đã được tick "đã đồng ý". Mỗi hồ sơ và câu chuyện đều có nhãn "Đã xác minh" hoặc "Minh hoạ", và toàn bộ dữ liệu minh hoạ xoá được bằng một nút khi đã có thành viên thật. Mình không muốn website của khách "đẹp" nhờ những hồ sơ ảo không ghi chú — điều đó đi ngược chính giá trị mà dịch vụ đang bán.

Hồ sơ hiển thị dạng rút gọn, có nhãn trạng thái rõ ràng (ảnh chụp tại thời điểm bàn giao, hồ sơ đang gắn nhãn minh hoạ).

7. Đội ngũ tư vấn và hình ảnh thực tế: người thật, nơi thật

Với dịch vụ "người giới thiệu người", khách cần biết ai sẽ nghe câu chuyện của mình. Mỗi chuyên viên có tên, chức danh, phần giới thiệu và một câu nói thể hiện cách họ làm việc. Phần hình ảnh thực tế dùng 8 ảnh chụp văn phòng thật, bấm vào xem phóng to — bằng chứng đơn giản nhưng hiệu quả rằng đây là một đơn vị có địa chỉ, có người, có không gian tiếp khách.

Đội ngũ tư vấn: ảnh đại diện, vai trò và lời nhắn của từng chuyên viên.

8 ảnh thực tế văn phòng, có chú thích và xem phóng to.

8. Cam kết thay cho lời quảng cáo

Thay vì các câu "uy tín số 1", mình dùng 6 cam kết cụ thể, mỗi cam kết trả lời đúng một nỗi lo ở phần phân tích: hồ sơ thật, riêng tư tuyệt đối, minh bạch chi phí, không ép buộc, tôn trọng mọi câu chuyện, an toàn khi gặp mặt. Phần này dùng nền hồng đậm để tạo điểm dừng thị giác trước form đăng ký.

6 cam kết đặt ngay trước form đăng ký.

9. Form đăng ký tư vấn: ngắn, nhưng đủ để chuyên viên gọi lại đúng cách

Form chỉ hỏi những gì chuyên viên thật sự cần cho cuộc gọi đầu: họ tên, số điện thoại, giới tính, năm sinh, tình trạng, gói quan tâm và giờ tiện nghe máy. Trường giờ nghe máy nhỏ nhưng quan trọng: khách bận rộn sẽ không bị gọi lúc đang họp, tỷ lệ bắt máy cũng cao hơn.

Form kiểm tra số điện thoại Việt Nam, bắt buộc đủ 18 tuổi, báo lỗi rõ ràng ngay tại ô nhập, có ô đồng ý thu thập dữ liệu bắt buộc và dẫn tới Chính sách bảo mật. Bên cạnh form là hotline và Zalo cho người không muốn điền.

Form đăng ký tư vấn: ngắn, có giờ tiện nghe máy và ô đồng ý bắt buộc.

10. Hỏi đáp, Blog và lời kêu gọi cuối

Phần Hỏi đáp xử lý nốt các câu còn lại: ai được đăng ký, có mất phí không, xác minh thế nào, bao lâu thì được giới thiệu, đã ly hôn có con có đăng ký được không, gặp mà không hợp thì sao. Có một câu mình rất thích trong phần này: "Chúng tôi không hứa hẹn con số, mà ưu tiên giới thiệu đúng người thay vì nhiều người."

Ba bài blog mới nhất giúp trang chủ luôn có nội dung mới cho Google, và lời kêu gọi cuối trang cho người đã đọc hết một lựa chọn rõ ràng: đăng ký hoặc gọi hotline.

Hỏi đáp dạng mở/đóng, kèm dữ liệu cấu trúc FAQ cho Google.

Các trang còn lại và mục đích của từng trang

Ngoài trang chủ, website có 15 trang khác. Mình không làm trang nào chỉ để "cho đủ" — mỗi trang có một nhiệm vụ cụ thể:

Trải nghiệm trên điện thoại: thanh liên hệ luôn trong tầm tay

Phần lớn lượt truy cập từ quảng cáo Facebook đến từ điện thoại, nên mình thiết kế mobile song song với desktop chứ không coi đó là bản thu nhỏ. Điểm quan trọng nhất là thanh liên hệ nhanh cố định ở đáy màn hình với 3 nút: Gọi ngay, Zalo, Đăng ký tư vấn. Khách cuộn tới đâu cũng chỉ cách hành động đúng một chạm.

Trên điện thoại, bảng so sánh chuyển thành dạng thẻ dọc và thanh Gọi ngay – Zalo – Đăng ký luôn cố định ở đáy màn hình.

Tối ưu thu lead phía sau form

Một website thu lead tốt không dừng lại ở nút "Gửi". Phía sau form, mình làm thêm những thứ mà khách truy cập không nhìn thấy nhưng chủ dịch vụ dùng hằng ngày:

1. Ghi nguồn quảng cáo: mỗi lead lưu kèm UTM, fbclid, gclid và trang gửi form, để biết chiến dịch nào ra khách thật, không chỉ ra lượt click.
2. Chống spam: ô bẫy bot ẩn và giới hạn 5 lần gửi mỗi giờ trên một IP.
3. Báo lead qua email: gửi chi tiết lead qua Gmail SMTP tới danh sách email quản lý ngay khi có đăng ký mới.
4. Quản lý lead trong trang quản trị: thống kê tổng / hôm nay / 7 ngày / chưa xử lý; lọc theo trạng thái, giới tính, ngày; 5 trạng thái (Mới, Đã liên hệ, Đang tư vấn, Đã đăng ký, Không phù hợp) kèm ghi chú nội bộ; số lead chưa xử lý hiện ngay trên menu.
5. Xuất CSV: xuất danh sách theo bộ lọc, mở bằng Excel không lỗi dấu tiếng Việt.
6. Trang Cảm ơn làm mốc chuyển đổi: gắn Meta Pixel và GA4 vào URL này để đo chính xác số đăng ký từ quảng cáo.

Nếu bạn từng chạy quảng cáo mà không biết lead đến từ đâu, gần như chắc chắn bạn đang tối ưu theo cảm tính. Mình phân tích kỹ hơn trong bài chi phí một khách đặt lịch khi chạy ads.

Tối ưu SEO và tốc độ ngay từ khi bàn giao

Mình không để SEO thành việc "làm sau". Những thứ dưới đây có sẵn từ ngày đầu tiên website chạy:

• Tiêu đề và mô tả sửa được cho từng trang; ảnh và tiêu đề khi chia sẻ link lên Facebook, Zalo hiển thị đúng.
• Dữ liệu cấu trúc: Organization, WebSite, FAQ, Breadcrumb, BlogPosting.
• Breadcrumb, sitemap, URL tiếng Việt không dấu như /ve-chung-toi/, /dich-vu/.
• Chặn index các trang không cần lên Google: Cảm ơn, Tìm kiếm, 404.
• Tốc độ: font tự host (không phụ thuộc Google Fonts), ảnh WebP, lazy-load, cache LiteSpeed.

Nếu sau này khách muốn dùng Rank Math hoặc Yoast, theme tự tắt thẻ meta của mình để không bị trùng. Với khách ngành dịch vụ địa phương, phần SEO tiếp theo thường là Google Maps và nội dung theo khu vực — mình có viết một lộ trình cụ thể trong bài SEO website spa: lộ trình Google địa phương 6 tháng.

Bàn giao bằng biên bản nghiệm thu 67 hạng mục

Cách bàn giao cũng là một phần của sản phẩm. Thay vì gửi link kèm câu "anh chị xem thử nhé", mình gửi Family Connect một file nghiệm thu gồm 16 trang, 15 phần trang chủ và 36 tính năng. Mỗi dòng có link để bấm kiểm tra, cách kiểm tra, vị trí chỉnh sửa trong trang quản trị và cột để khách chọn Đạt / Cần chỉnh sửa, bảng tổng hợp tự cập nhật tỷ lệ đạt.

File còn có thêm một tab "Việc cần bổ sung trước khi chạy quảng cáo": thay dữ liệu minh hoạ bằng hồ sơ thật có sự đồng ý, ảnh chuyên viên, cấu hình gửi mail, mã Pixel/GA4, duyệt điều khoản với pháp chế... Những việc này không thuộc phần lập trình nhưng nếu thiếu, website sẽ không thể chạy quảng cáo hiệu quả. Mình ghi rõ để hai bên không ai phải đoán.

Bài học khi thiết kế website cho dịch vụ dựa trên niềm tin

Sau dự án Family Connect, mình rút ra vài nguyên tắc áp dụng được cho mọi dịch vụ mà khách phải tin trước rồi mới mua — mai mối, tư vấn, spa, trung tâm đào tạo:

1. Bắt đầu từ nỗi lo của khách, không phải từ mẫu giao diện. Mỗi phần trên trang phải trả lời được một câu hỏi cụ thể.
2. Bằng chứng phải thật và được dán nhãn rõ. Một nhãn "minh hoạ" trung thực đáng giá hơn mười lời chứng thực không kiểm chứng được.
3. Giảm rủi ro cho bước đầu tiên: tư vấn miễn phí, không ép buộc, cho chọn giờ gọi, cho phép nhắn Zalo thay vì điền form.
4. Website phải phục vụ cả người vận hành: lead có nguồn, có trạng thái, nội dung tự sửa được.
5. Đo được thì mới tối ưu được: trang Cảm ơn, UTM và mã theo dõi phải có trước khi bật quảng cáo.

Nghe thì đơn giản, nhưng đây chính là điều mình nhận ra sau nhiều lần ngồi trực tiếp với chủ doanh nghiệp: họ không mua "một website đẹp", họ mua khả năng có thêm khách hàng. Mình từng chia sẻ góc nhìn này trong bài điều mình nhận ra sau chuyến công tác đầu tiên, và câu chuyện mình đi từ lập trình viên đến marketing.

Câu hỏi thường gặp khi thiết kế website mai mối, website dịch vụ

Bạn cần thiết kế website dịch vụ tương tự?

Nếu bạn đang kinh doanh một dịch vụ cần khách tin tưởng trước khi mua — mai mối, tư vấn, spa, massage, đào tạo — và muốn một website không chỉ đẹp mà còn thu được lead và đo được hiệu quả, mình sẵn sàng trao đổi. Mình sẽ bắt đầu bằng việc nghe bạn kể về khách hàng của mình, giống như cách mình đã làm với Family Connect.

Bạn có thể xem trực tiếp website tại familyconnect.vn, tìm hiểu thêm về Code Pro qua bài Code Pro chính thức ra mắt website codepro.vn, hoặc đọc thêm một case study khác: Vivian English đã làm gì để x10 số lượng học viên.

Nhận tư vấn thiết kế website Nhắn Zalo cho mình