Dự án website DNA Testings do Thiết Kế Web DC thực hiện cho trung tâm xét nghiệm ADN, giai đoạn 2024 đến 2025: một website gom mười trang xét nghiệm, bốn trang bảng giá và nút đăng ký tư vấn cố định trên màn hình.
Thông tin dự án
Dự án thuộc nhóm thiết kế website y tế. Bảng dưới ghi thông tin dự án theo trang chủ, trang giới thiệu và chân trang của website. Thời gian thực hiện ghi theo khoảng năm, các dòng còn lại đều đối chiếu được trực tiếp trên website. Dự án nằ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 | Trung tâm xét nghiệm ADN DNA Testings (DNA Testings Lab) |
| Lĩnh vực | Xét nghiệm ADN huyết thống, ADN thai nhi, di truyền và sàng lọc |
| Khu vực | TP.HCM, Hà Nội và các tỉnh thành (theo mô tả trên website) |
| Thời gian | 2024 đến 2025 |
| Nền tảng | WordPress, theme riêng, Contact Form 7 |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | dnatestings.vn |
Đ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 sắp xếp dịch vụ, giá và quy trình chứ không ở hiệu ứng. Mỗi điểm đều kiểm lại được trực tiếp trên dnatestings.vn. Số tương phản màu là kết quả DC tính từ mã màu của trang.
1. Mười trang xét nghiệm và bốn trang bảng giá riêng cho từng nhóm.
2. Bảng giá và hướng dẫn thu mẫu đặt ngay sau khối dịch vụ trên trang chủ.
3. Cụm nút cố định gồm Đăng ký ngay, Gọi điện, Chat Zalo, Messenger và YouTube.
4. Màu đạt tương phản chuẩn WCAG: 12,63:1 cho chữ nội dung và 4,43:1 cho tiêu đề đỏ cỡ lớn.
5. Khối Hội đồng khoa học giới thiệu năm thành viên ngay trên trang chủ.
Bối cảnh của dự án
DNA Testings là trung tâm xét nghiệm ADN, hoạt động ở TP.HCM, Hà Nội và trên khắp cả nước, nên Thiết Kế Web DC làm website theo mô hình giới thiệu dịch vụ kèm bảng giá và form tư vấn. Khách cần biết xét nghiệm nào, giá bao nhiêu và thu mẫu ra sao.
Lĩnh vực xét nghiệm của khách
Thiết Kế Web DC đưa khối dịch vụ lên đầu trang chủ. Website có mười trang xét nghiệm gồm ADN huyết thống, ADN cha con, ADN làm giấy khai sinh, ADN thai nhi trước sinh, ung thư di truyền, di truyền, gen tiền hôn nhân, NIPT, Thalassemia và gen đông máu. Công ty còn có dịch vụ thu mẫu và giao mẫu tại nhà, các trang giấy chứng nhận, đội ngũ và đại lý đối tác. Các mô tả này là thông tin trung tâm tự ghi trên website.
Định hướng thiết kế
DC xác định bốn mục tiêu cho website trước khi dựng giao diện: hiện đúng loại xét nghiệm ngay trang chủ, để khách xem giá trước khi liên hệ, giải thích cách thu mẫu và quy trình, và cho khách đăng ký tư vấn từ bất kỳ vị trí nào. Từng mục tiêu được DC triển khai cụ thể ở các phần Trải nghiệm người dùng và Thiết kế giao diện.
Trải nghiệm người dùng
Thiết Kế Web DC sắp xếp website để người xem đi từ dịch vụ tới giá rồi tới đăng ký tư vấn mà không phải gọi hỏi từng việc. Mục này chỉ ghi các bước người xem đi qua, còn hình thức hiển thị được tách sang mục Thiết kế giao diện.
Người xem website
Hai nhóm người xem dưới đây là nhận định của DC theo nội dung website, chưa kèm số liệu hành vi. Nhóm thứ nhất là người cần xét nghiệm ADN như huyết thống, giấy khai sinh hay thai nhi, họ cần biết loại xét nghiệm, giá và cách thu mẫu. Nhóm thứ hai là người cần xét nghiệm di truyền và sàng lọc như ung thư di truyền, NIPT, Thalassemia, họ cần đọc kỹ từng dịch vụ trước khi đăng ký.
Sơ đồ trang
DC chia website thành các nhóm trang theo việc khách cần, mỗi nhóm mở thành menu con.
- Giới Thiệu: năm trang gồm giới thiệu trung tâm, giấy chứng nhận, đội ngũ, đại lý và đối tác, liên hệ.
- Dịch Vụ: mười trang xét nghiệm, trong đó nhóm Xét Nghiệm Di Truyền có bốn trang con.
- Bảng Giá: bốn trang giá cho ADN huyết thống, ADN thai nhi, NIPT và ung thư di truyền.
- Tin Tức: bốn chuyên mục gồm tin chuyên ngành, địa điểm xét nghiệm ADN, hướng dẫn thu mẫu và tin công ty.
- Chân trang: sáu trang chính sách như chính sách và quy định chung, bảo hành kết quả, hình thức thanh toán.
Luồng người dùng
Người xem bắt đầu từ khối dịch vụ trên trang chủ, mở trang xét nghiệm cần tìm, rồi sang khối Bảng giá để xem mức chi phí. Người muốn tự thu mẫu đi từ khối Hướng Dẫn Thu Mẫu, còn ai muốn tìm theo từ khóa dùng ô tìm kiếm. Ở bước nào khách cũng có thể bấm nút Đăng ký ngay để mở form và chọn dịch vụ cần tư vấn.
Thiết kế giao diện
Thiết Kế Web DC dựng giao diện trên một theme riêng, dùng nền trắng với tiêu đề đỏ và phông chữ Roboto. Màu và chữ do DC đo trên chính website đang hoạt động. Phần này ghi phông chữ, bố cục trang chủ, thanh menu, thành phần giao diện và cụm nút liên hệ nổi.
Phông chữ
DC dùng Roboto cho toàn bộ website. Chữ thân bài cỡ 16 px, giãn dòng 28,8 px nên đoạn mô tả xét nghiệm dài vẫn thoáng. Tiêu đề H2 và H3 cỡ 24 px đậm, H2 màu đỏ trên nền sáng còn H3 màu trắng trên khối nền đậm.
Bố cục trang chủ
DC mở trang chủ bằng khối dịch vụ trước, giới thiệu sau, để khách thấy xét nghiệm trung tâm làm ngay khi vào trang. Các khối xếp theo thứ tự sau:
1. Dịch vụ của chúng tôi: sáu thẻ gồm thu mẫu tại nhà, ADN huyết thống, giấy khai sinh, thai nhi, cha con và ung thư di truyền, kèm hai khối Bảng giá và Hướng Dẫn Thu Mẫu.
2. Giới thiệu trung tâm: bốn thẻ về bảo mật, tư vấn, tốc độ và sự thuận tiện, đây là cam kết trung tâm tự ghi.
3. Quy trình xét nghiệm: các bước từ đăng ký đến nhận kết quả.
4. Khối tư vấn: dòng "Search 10 lần cũng không bằng 1 lần nghe tư vấn" kèm form để lại thông tin.
5. Hội đồng khoa học: năm thành viên.
6. Tin tức, rồi Đăng ký tư vấn và chân trang ghi các văn phòng.
Thanh menu
DC chia menu thành bốn nhóm lớn là Giới Thiệu, Dịch Vụ, Bảng Giá và Tin Tức, cộng mục Tuyển Dụng ở cuối. Mỗi nhóm mở ra menu con, trong đó Dịch Vụ có nhóm con Xét Nghiệm Di Truyền. Menu có ô tìm kiếm do plugin Add Search to Menu tạo ra.
Thành phần giao diện
DC dùng đỏ làm màu nhấn trên nền trắng, theo bảng màu sau.
| Mã màu | Dùng cho |
| #333333 | Chữ nội dung |
| #ec1a23 | Tiêu đề H2 và các điểm nhấn |
| #ffffff | Nền trang và chữ trên khối nền đậm |
Về tỷ lệ tương phản, DC tính theo WCAG 2.1 cho từng cặp màu chính. Chữ xám #333333 trên nền trắng đạt 12,63:1. Tiêu đề đỏ #ec1a23 trên nền trắng đạt 4,43:1, vượt mức 3:1 mà chuẩn AA yêu cầu cho chữ lớn đậm như tiêu đề 24 px.
Các thành phần dùng lặp lại gồm thẻ dịch vụ có nút "Xem thêm", thẻ cam kết có tiêu đề viết hoa, thẻ thành viên Hội đồng khoa học và thẻ tin tức.
Nút liên hệ nổi
DC làm kênh liên hệ thành cụm nút cố định trên màn hình, gồm Đăng ký ngay, Gọi điện, Chat Zalo, Messenger và YouTube. Nút Đăng ký ngay mở form có danh sách dịch vụ để khách chọn. Số điện thoại 0985567600 cũng hiện cố định trên màn hình, kèm nút Scroll Top để quay lại đầu trang.
Công nghệ và kỹ thuật
Thiết Kế Web DC dựng website trên WordPress với một theme riêng và plugin form, tìm kiếm. Cách dựng này thuộc thiết kế website bằng WordPress, nền tảng để trung tâm tự cập nhật nội dung. Bốn mục sau đi từ giao diện sang phần chạy phía sau, kỹ thuật nền và quản trị, đều đọc từ mã trang.
Front-end: theme riêng dựng trang xét nghiệm ADN
DC dựng phần người xem thấy bằng theme riêng tên dnathemes, nơi bố cục trang chủ, các trang dịch vụ, bảng giá và tin tức được dựng. Website có hai khối trượt và nhúng một video YouTube.
Back-end: WordPress và Contact Form 7 cho trung tâm xét nghiệm
Thiết Kế Web DC dựng phần chạy phía sau trên WordPress, nhận ra từ địa chỉ wp-json của website. Plugin Contact Form 7 dựng các form đăng ký tư vấn, còn plugin Add Search to Menu thêm ô tìm kiếm vào menu. Các form có ô xác thực reCAPTCHA.
Kỹ thuật nền
Website được phục vụ qua Cloudflare bằng kết nối HTTPS. Trang khai báo khung nhìn theo chiều rộng thiết bị và có dữ liệu có cấu trúc JSON-LD gồm Organization, Place, PostalAddress, WebSite và SearchAction. Website có sẵn robots.txt và sơ đồ trang XML.
Quản trị website
Thiết Kế Web DC bàn giao website để trung tâm tự quản trị nội dung trong WordPress: thêm trang dịch vụ, cập nhật bảng giá, đăng tin trong bốn chuyên mục và chỉnh nội dung form. Danh sách dịch vụ trong form đăng ký tư vấn gồm các xét nghiệm của website.
Kết quả
Phần Kết quả gồm số đo trang chủ và các tính năng đang chạy trên dnatestings.vn. DC kiểm từng dòng trên website thật trước khi viết, nên mỗi mục chỉ ghi cái thấy rõ trong mã trang chủ hoặc trên menu, và ai cũng mở website ra đối chiếu được.
Số đo website sau khi dựng
DC chạy PageSpeed Insights cho trang chủ hai lần và nhận cùng một kết quả. Các số dưới đây là bản máy tính.
| Chỉ số | Kết quả đo |
| Điểm SEO | 92/100 |
| Thời gian hiển thị nội dung chính (LCP) | 2,6 giây |
| Độ ổn định bố cục (CLS) | 0,651 |
LCP và CLS của trang chủ còn cao hơn ngưỡng khuyến nghị của Google, lần lượt là 2,5 giây và 0,1.
Tính năng chạy được
Mỗi dòng dưới đây là một tính năng đang chạy, kiểm lại được trên trang chủ.
| Tính năng | Cách hoạt động |
| Menu bốn nhóm | Giới Thiệu, Dịch Vụ, Bảng Giá, Tin Tức, mỗi nhóm mở menu con |
| Nút Đăng ký ngay | Mở form có danh sách dịch vụ để chọn |
| Form tư vấn trên trang chủ | Dựng bằng Contact Form 7, có xác thực reCAPTCHA |
| Cụm nút liên hệ nổi | Gọi điện, Chat Zalo, Messenger, YouTube, Đăng ký ngay |
| Tìm kiếm | Ô tìm kiếm trong menu |
| Video giới thiệu | YouTube nhúng trên trang chủ |
| Nút lên đầu trang | Nút Scroll Top cố định trên màn hình |
DC chỉ xem website trên máy tính, bố cục và tốc độ trên điện thoại chưa được kiểm nên bài không bàn tới bản di động.
Website của DNA Testings cho thấy cách đặt dịch vụ, giá và hướng dẫn thu mẫu cạnh nhau trên trang chủ, kèm nút đăng ký tư vấn luôn nằm trong tầm bấm.
Các website khác của DC nằm ở các dự án khác, còn chi phí trọn gói xem tại bảng báo giá thiết kế website trọn gói. Phòng xét nghiệm muốn làm website có thể liên hệ Thiết Kế Web DC để trao đổi trực tiếp.
Bạn cần website cho trung tâm xét nghiệm, phòng khám hay phòng lab? DC làm từ trang dịch vụ, bảng giá đến form tư vấn. Gửi thông tin cho DC để nhận báo giá theo số dịch vụ cần đưa lên website.
