Dự án website Thinksmart Insurance do Thiết Kế Web DC thực hiện cho công ty bảo hiểm nhân thọ phục vụ người Việt tại Mỹ, giai đoạn 2024 đến 2025: một website hai ngôn ngữ giải thích sản phẩm trước khi xin liên hệ.
Thông tin dự án
Bảng dưới tổng hợp thông tin của dự án, lấy từ trang chủ, chân trang và dữ liệu có cấu trúc của website. Thời gian thực hiện ghi theo khoảng năm. Mọi dòng đều đối chiếu được trên website. Dự án thuộc nhóm thiết kế website bảo hiểm trong mảng thiết kế website của Thiết Kế Web DC.
| Hạng mục | Nội dung |
| Khách hàng | Thinksmart Insurance, văn phòng tại Lawrenceville, Georgia, Hoa Kỳ |
| Lĩnh vực | Bảo hiểm nhân thọ cho cộng đồng người Việt tại Mỹ |
| Ngôn ngữ | Tiếng Việt và tiếng Anh |
| Thời gian | 2024 đến 2025 |
| Nền tảng | WordPress, theme Hello Elementor, Elementor |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | thinksmartinsurance.com |
Điểm nổi bật của dự án
Dự án có năm điểm đáng chú ý, và cả năm nằm ở cách Thiết Kế Web DC tổ chức nội dung giải thích chứ không ở hiệu ứng. Mỗi điểm kiểm lại được trực tiếp trên thinksmartinsurance.com, và phần sau của bài ghi chi tiết từng điểm. Thứ tự đi từ sản phẩm tới giao diện.
1. Bốn chương trình bảo hiểm, mỗi chương trình một trang riêng.
2. Quy trình tham gia bảy bước đặt ngay trên trang chủ.
3. Hai ngôn ngữ Việt và Anh với nút chuyển EN trên menu.
4. Bài trắc nghiệm ba câu hỏi dẫn tới form nhận tư vấn.
5. Chữ trắng trên nút đỏ thẫm đạt tương phản 6,75:1, vượt chuẩn WCAG AA.
Bối cảnh của dự án
Thinksmart Insurance bán các chương trình bảo hiểm nhân thọ cho gia đình người Việt tại Mỹ, nên Thiết Kế Web DC làm website theo mô hình giới thiệu sản phẩm kèm blog kiến thức. Người xem đọc bằng tiếng Việt từ nhiều tiểu bang và cần hiểu sản phẩm trước khi liên hệ.
Sản phẩm và đối tượng của công ty
DC đưa bốn chương trình lên trang chủ thành bốn thẻ, gồm IUL Secrets, Term Life, Em Bé Triệu Phú và Max Funded IUL. Website ghi công ty đã đồng hành 13 năm với hơn 20 ngàn gia đình Việt trên 50 tiểu bang. Đó là số công ty tự khai, DC chỉ trình bày lại và không kiểm chứng.
Định hướng thiết kế
Thiết Kế Web DC xác định bốn mục tiêu cho website: cho người xem biết công ty bán những loại bảo hiểm nào ngay màn hình đầu, giải thích được từng bước tham gia, cung cấp kiến thức bằng tiếng Việt và cho người xem để lại thông tin mà không bị ép. Các mục sau cho thấy DC đưa từng mục tiêu vào trang chủ, menu và nội dung ra sao.
Trải nghiệm người dùng
Thiết Kế Web DC sắp xếp website để người xem đi từ hiểu sản phẩm tới biết quy trình rồi tới nhận tư vấn, không qua nhiều bước. Mục này chỉ nói về đường đi, còn màu, chữ và các nút nằm ở phần Thiết kế giao diện. Các mục sau gồm người xem, sơ đồ trang và luồng.
Người xem website
Hai nhóm người xem dưới đây do DC suy ra từ nội dung website, chưa có số liệu hành vi thật để kiểm chứng. Nhóm thứ nhất là người mới tìm hiểu bảo hiểm nhân thọ, họ cần đọc kiến thức và thuật ngữ bằng tiếng Việt. Nhóm thứ hai là người đã biết sản phẩm, họ cần xem từng chương trình, quy trình tham gia và cách liên hệ tư vấn viên.
Sơ đồ trang
DC chia website thành năm nhóm trang theo cách một người tìm hiểu bảo hiểm đi từ công ty tới sản phẩm rồi tới hỗ trợ.
- Về chúng tôi: giới thiệu công ty, tuyển dụng và trang tra cứu tư vấn viên.
- Bảo hiểm: bốn trang chương trình Term Life, IUL Secrets, Em Bé Triệu Phú, Max Funded IUL Secrets.
- Chăm sóc khách hàng: giải quyết quyền lợi bảo hiểm, tính phí, chuyện của tôi gia đình tôi, hướng dẫn sử dụng, chương trình khuyến mãi.
- Blog: bài viết nổi bật, kiến thức bảo hiểm, đầu tư tiết kiệm và hưu trí, sức khỏe đời sống, sự kiện.
- Liên hệ và bản tiếng Anh.
Luồng người dùng
Người mới đi từ banner vào danh sách bốn chương trình, bấm "Tìm hiểu thêm" để mở trang chương trình, rồi bấm "Nhận Quote Miễn Phí" để sang trang liên hệ. Người muốn đọc kiến thức đi từ khối Hiểu đúng về bảo hiểm vào bài viết. Người chưa muốn gọi làm bài trắc nghiệm ba câu hỏi rồi điền form nhận thông tin khám sức khỏe.
Thiết kế giao diện
Thiết Kế Web DC dựng giao diện trên theme Hello Elementor, dùng đỏ thẫm làm màu nhấn, nền trắng và xám nhạt cho phần đọc, phông Roboto cho toàn trang. DC lấy số đo màu và chữ ngay trên website đang chạy. Phần này ghi phông chữ, bố cục trang chủ, thanh menu và thành phần giao diện.
Phông chữ
DC dùng một phông Roboto với nhiều độ đậm. Tiêu đề lớn trên banner cỡ 32 px độ đậm 700, tiêu đề khối 26 px độ đậm 600. Đoạn nội dung dùng 16 px, dòng cao 26 px, vì khách phải đọc kỹ các đoạn giải thích sản phẩm. Nút kêu gọi dùng chữ 15 đến 16 px và bo góc 3 px.
Bố cục trang chủ
DC thiết kế banner "13 năm đồng hành" kèm nút PLAY VIDEO. Dưới banner, trang chủ xếp theo thứ tự khách cần để tin:
1. Chúng tôi cung cấp dịch vụ bảo hiểm: bốn thẻ chương trình và một form nhanh.
2. Quy trình tham gia bảo hiểm: bảy bước và nút "Nhận Quote Miễn Phí".
3. Hiểu đúng về bảo hiểm: danh sách bài mới nhất và bài trắc nghiệm ba câu hỏi.
4. Chuyện của tôi, gia đình tôi: năm video.
5. Khách hàng nói gì về chúng tôi: sáu lời của khách.
6. Tại sao nên chọn Thinksmart: ba số liệu công ty tự ghi và khối hỗ trợ Anh - Việt.
7. Tin tức nổi bật và chân trang: bài mới, mạng xã hội, bản đồ, các chính sách.
Thanh menu
DC đặt menu ở đầu trang với các mục Về chúng tôi, Bảo hiểm, Chăm sóc khách hàng, Blog, Liên hệ và nút chuyển ngôn ngữ EN. Mục Bảo hiểm mở ra bốn chương trình, mục Chăm sóc khách hàng mở ra các trang hỗ trợ.
Thành phần giao diện
DC chọn đỏ thẫm làm màu nhấn vì màu này nổi trên nền trắng và đen, và dùng xanh lá cho dấu hiệu tích cực. Bảng sau liệt kê màu của các thành phần được dùng nhiều lần.
| Mã màu | Dùng cho |
| #bb0000 | Nút "Nhận Quote Miễn Phí", nút "Xem thêm" |
| #000000 | Nền các khối tối và tiêu đề |
| #eeeeee | Nền các khối nội dung xen kẽ |
| #69727d | Nút phụ như "Đăng ký" |
| #36b37e | Dấu hiệu tích cực |
| #333333 | Đoạn mô tả trên nền trắng |
Với chuẩn WCAG 2.1, DC kiểm tra tỷ lệ tương phản của các cặp màu chính. Chữ trắng trên nút đỏ thẫm `#bb0000` đạt 6,75:1, chữ `#333333` đạt 12,63:1 trên nền trắng và 10,89:1 trên nền `#eeeeee`, đều vượt mức 4,5:1 của chuẩn AA.
Thẻ chương trình dùng tiêu đề, một đoạn mô tả ngắn và nút "Tìm hiểu thêm". Ba nút Hotline, Messenger và Email dạng biểu tượng kèm chữ cho người xem chọn cách liên hệ.
Công nghệ và kỹ thuật
Thiết Kế Web DC dựng website trên WordPress với theme Hello Elementor kèm child theme riêng. Hướng này nằm trong nhóm thiết kế website bằng WordPress. Bốn phần tiếp theo gồm giao diện, phần chạy phía sau, kỹ thuật nền và quản trị, và đều dựa trên mã trang của website.
Front-end: Hello Elementor và child theme dựng trang bảo hiểm
DC dựng phần người xem thấy bằng theme Hello Elementor, một child theme tên thinksmart giữ riêng phần chỉnh sửa, và trình dựng trang Elementor 4.3.6. Unlimited Elements for Elementor bản premium bổ sung các thành phần mà bộ mặc định chưa có.
Back-end: WordPress và biểu mẫu nhận tư vấn
Thiết Kế Web DC dựng phần chạy phía sau trên WordPress 7.1.4, ghi trong thẻ generator của trang, quản lý trang chương trình, bài viết và menu. Các biểu mẫu nhận tư vấn dùng Contact Form 7, nhận ra qua mã trang.
Kỹ thuật nền
Website chạy trên máy chủ LiteSpeed qua kết nối HTTPS, kèm plugin LiteSpeed Cache và hỗ trợ giao thức HTTP/3. Trang khai báo ngôn ngữ vi, en và en-US, có dữ liệu có cấu trúc JSON-LD kiểu InsuranceAgency kèm địa chỉ và giờ làm việc, và sơ đồ trang XML khai báo trong robots.txt.
Quản trị website
Công ty quản trị nội dung trong WordPress: tạo trang chương trình, đăng bài vào blog, sửa menu và chỉnh khối bằng Elementor. Khối "Hiểu đúng về bảo hiểm" và "Tin tức nổi bật" lấy bài mới từ blog, nên công ty đăng bài thì trang chủ cập nhật theo.
Kết quả
Kết quả của dự án gồm số đo trang chủ và các tính năng đã chạy được. Thiết Kế Web DC chỉ ghi cái nhìn thấy trong mã trang chủ hoặc trên menu, và đối chiếu từng mục trên website đang chạy. Mọi dòng đều kiểm lại được trực tiếp trên thinksmartinsurance.com.
Số đo website sau khi dựng
DC chạy PageSpeed Insights hai lần cho trang chủ và nhận cùng một kết quả. Bảng ghi số đo bản máy tính.
| Chỉ số | Kết quả đo |
| Điểm SEO | 100/100 |
| Thời gian hiển thị nội dung chính (LCP) | 0,4 giây |
| Độ ổn định bố cục (CLS) | 0,027 |
Với LCP 0,4 giây và CLS 0,027, cả hai chỉ số đều đạt mức "tốt" của Google.
Tính năng chạy được
Mỗi dòng trong bảng là một tính năng đã chạy trên trang chủ và kiểm lại được.
| Tính năng | Cách hoạt động |
| Hai ngôn ngữ | Nút EN chuyển sang bản tiếng Anh |
| Video giới thiệu | Nút PLAY VIDEO mở video ngay trên trang |
| Form nhận tư vấn | Nhập họ tên, tuổi của con, giới tính, số điện thoại |
| Bài trắc nghiệm | Ba câu trả lời Có hoặc Không rồi điền form |
| Gọi một chạm | Hotline dùng liên kết `tel:` |
| Messenger và Email | Mở cuộc trò chuyện hoặc thư mới |
| Bản đồ chỉ đường | Google Maps nhúng ở chân trang |
Mọi mô tả ở trên lấy từ giao diện máy tính, còn bản điện thoại chưa kiểm nên không nhận định.
Website Thinksmart Insurance cho thấy cách trình bày một sản phẩm khó hiểu thành các lớp rõ ràng, từ chương trình, quy trình tới kiến thức, trước khi người xem để lại thông tin.
Đơn vị tư vấn bảo hiểm muốn tham khảo thêm có thể xem các dự án khác và bảng báo giá thiết kế website trọn gói. Mọi câu hỏi về website, mời anh chị liên hệ Thiết Kế Web DC.
