Dự án website Hoàng Minh Med do Thiết Kế Web DC thực hiện cho công ty nhập khẩu và phân phối thiết bị y tế, giai đoạn 2023 đến 2024: một website gom 16 nhóm thiết bị vào một menu danh mục mở từ mọi trang.
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 liên hệ 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 | Hoàng Minh Med, công ty thiết bị và vật tư y tế |
| Lĩnh vực | Nhập khẩu, sản xuất và phân phối thiết bị y tế cho phòng khám, bệnh viện (theo mô tả trên website) |
| Khu vực | Toàn quốc, có văn phòng ở Hà Nội và TP.HCM |
| Thời gian | 2023 đến 2024 |
| Nền tảng | WordPress, theme Hello Elementor, Elementor |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | hoangminhmed.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 một danh mục thiết bị lớn chứ không ở hiệu ứng. Mỗi điểm đều kiểm lại được trực tiếp trên hoangminhmed.com. DC tính tỷ lệ tương phản màu từ mã màu lấy trên website.
1. Menu danh mục 16 nhóm thiết bị, mở ra từ mọi trang.
2. Form đăng ký tư vấn có danh sách sản phẩm quan tâm để khách chọn.
3. Bốn nút liên hệ nổi: gọi hotline, Messenger, Chat Zalo và Tìm đường.
4. Màu đạt tương phản chuẩn WCAG AA: 12,63:1 cho chữ nội dung và 5,29:1 cho đỏ nhấn.
5. Trang chủ kèm bài hướng dẫn thiết bị như máy Monitor, cách mắc điện tim, đầu dò siêu âm.
Bối cảnh của dự án
Hoàng Minh Med nhập khẩu, sản xuất và phân phối thiết bị y tế cho cơ sở khám chữa bệnh, nên Thiết Kế Web DC làm website theo mô hình danh mục sản phẩm kèm form tư vấn. Khách của website là phòng khám và bệnh viện cần tìm đúng thiết bị cho chuyên khoa của mình.
Nhóm thiết bị y tế của khách
Thiết Kế Web DC đưa danh mục thiết bị lên đầu thanh menu. Website chia thiết bị thành 16 nhóm như nội soi tai mũi họng, sản phụ khoa, phòng mổ, chẩn đoán hình ảnh, nha khoa, nhãn khoa, hồi sức cấp cứu, vật lý trị liệu và xét nghiệm. Ngoài thiết bị, công ty ghi các dịch vụ đi kèm gồm bàn giao lắp đặt, cho thuê, sửa chữa, tư vấn xây dựng phòng khám và thanh lý thiết bị. Các mô tả này là thông tin công ty 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: tìm đúng nhóm thiết bị từ mọi trang, cho khách đăng ký tư vấn ngay trên trang, gom thiết bị, dịch vụ và tin tức vào một cấu trúc rõ ràng, và để khách chọn kênh liên hệ quen dùng. Các mục sau mô tả cách DC đưa từng mục tiêu vào giao diện và cấu trúc.
Trải nghiệm người dùng
Thiết Kế Web DC sắp xếp website để người xem chọn nhóm thiết bị, xem tên máy rồi để lại nhu cầu tư vấn mà không qua nhiều bước. Mục này chỉ nói về đường đi của người xem trên website, phần màu, chữ và nút để dành cho mục Thiết kế giao diện.
Người xem website
Website phục vụ hai nhóm người xem, DC rút ra từ nội dung trang chứ chưa có số liệu hành vi thật. Nhóm thứ nhất là cơ sở y tế đang tìm thiết bị theo chuyên khoa, họ cần thấy nhóm máy và tên từng thiết bị. Nhóm thứ hai là người cần dịch vụ đi kèm thiết bị như lắp đặt, sửa chữa hay thanh lý, họ cần biết công ty có nhận việc đó không và liên hệ ở đâu.
Sơ đồ trang
DC chia website thành các nhóm trang theo việc khách làm, mỗi nhóm có mục riêng trên menu.
- Trang chủ: giới thiệu và các bài hướng dẫn thiết bị.
- Danh mục sản phẩm: 16 nhóm thiết bị, mỗi nhóm có danh sách thiết bị con.
- Giới thiệu: mô tả công ty.
- Dịch vụ: năm trang gồm bàn giao lắp đặt, cho thuê, sửa chữa, tư vấn xây dựng phòng khám và thanh lý thiết bị y tế.
- Tin tức: bốn chuyên mục gồm tin khuyến mãi, tuyển dụng, chăm sóc sức khỏe và tin tức khác.
- Liên hệ: có trang Hệ thống chi nhánh.
Luồng người dùng
Người cần thiết bị mở menu Danh mục sản phẩm, chọn một trong 16 nhóm, vào nhóm thiết bị con rồi để lại nhu cầu qua form chọn sản phẩm quan tâm hoặc bấm một trong bốn nút liên hệ. Người cần dịch vụ đi từ mục Dịch vụ trên menu tới trang tương ứng. Người muốn đọc hướng dẫn xem các bài ngay trên trang chủ, và ai muốn tìm theo từ khóa dùng ô tìm kiếm của website.
Thiết kế giao diện
Thiết Kế Web DC dựng giao diện trên theme Hello Elementor, dùng nền trắng với màu đỏ làm điểm nhấn và phông chữ Be Vietnam Pro. DC lấy màu và chữ từ chính website đang chạy. Phần này ghi phông chữ, bố cục trang chủ, thanh menu, thành phần giao diện và các nút liên hệ nổi.
Phông chữ
DC dùng Be Vietnam Pro cho toàn bộ website, phông có dấu tiếng Việt rõ nên tên thiết bị dài vẫn dễ đọc. Chữ thân bài cỡ 16 px, giãn dòng 24 px. Tiêu đề H1 cỡ 24 px và tiêu đề H2 cỡ 22 px, cùng độ đậm 500.
Bố cục trang chủ
DC xếp đầu trang theo thứ tự thanh thông tin, thanh menu rồi nội dung. Thanh trên cùng ghi ba địa chỉ văn phòng kèm hotline và ô giỏ hàng 0 ₫. Phần nội dung mở bằng tiêu đề "Mua thiết bị y tế chính hãng uy tín tại Hoangminhmed.com" và đoạn giới thiệu, sau đó là các bài hướng dẫn theo thứ tự sau:
1. Máy Monitor: cách đọc kết quả, cách đọc thông số và các chỉ số trên máy.
2. Cách mắc điện tim: sáu mục từ chuẩn bị da, đặt điện cực đến theo dõi xung điện.
3. Cách đo điện tim.
4. Các loại đầu dò siêu âm.
5. Kết luận, rồi chân trang gồm văn phòng Hà Nội và TP.HCM, các chính sách hỗ trợ khách hàng và form đăng ký nhận tư vấn.
Thanh menu
DC đặt Danh mục sản phẩm làm mục đầu tiên của thanh menu, vì đây là thứ khách tìm trước. Mục này mở ra 16 nhóm, mỗi nhóm kèm danh sách thiết bị con như máy nội soi, ống nội soi, bàn khám, đèn clar. Sau đó là các mục Trang chủ, Giới thiệu, Dịch vụ, Tin tức và Liên hệ, trong đó Dịch vụ có năm mục con và Tin tức có bốn mục con.
Thành phần giao diện
DC chọn đỏ làm màu nhấn trên nền trắng để nút nổi lên khỏi chữ xám, và dùng các màu sau.
| Mã màu | Dùng cho |
| #333333 | Chữ nội dung và tiêu đề |
| #d61410 | Chữ nút "Xem thêm" và các điểm nhấn |
| #6b0015 | Nền nút "Gửi đi" của form |
| #ffffff | Nền trang và chữ trên nút |
DC kiểm tỷ lệ tương phản của các cặp màu chính theo WCAG 2.1. Chữ xám #333333 trên nền trắng đạt 12,63:1 và đỏ #d61410 trên nền trắng đạt 5,29:1, cả hai đều vượt mức 4,5:1 mà chuẩn AA yêu cầu cho chữ thường.
Các thành phần dùng lặp lại gồm nút "Xem thêm" chữ đỏ nền trắng, nút "Gửi đi" chữ trắng trên nền đỏ sẫm, ô tìm kiếm, ô giỏ hàng và các biểu tượng mạng xã hội Facebook, Twitter, YouTube, Instagram ở chân trang.
Nút liên hệ nổi
DC làm kênh liên hệ thành một cụm bốn nút cố định trên màn hình, để khách không phải cuộn về đầu hay cuối trang. Bốn nút là Gọi Hotline, Messenger, Chat Zalo và Tìm đường, trong đó nút Tìm đường mở Google Maps tới văn phòng. Ở góc dưới bên phải còn có nút lên đầu trang.
Công nghệ và kỹ thuật
Thiết Kế Web DC dựng website trên WordPress với theme Hello Elementor và trình dựng trang Elementor. Hướng làm này nằm trong dịch vụ thiết kế website bằng WordPress của DC. Phần dưới chia bốn mục là Front-end, Back-end, kỹ thuật nền và quản trị, dựa hoàn toàn vào những gì đọc được từ mã trang.
Front-end: Hello Elementor dựng danh mục thiết bị y tế
DC dựng phần người xem thấy bằng theme Hello Elementor và trình dựng trang Elementor 3.21.1. Hello Elementor là khung theme gọn, còn các khối trang chủ, form và menu danh mục được dựng bằng Elementor theo kiểu kéo thả. Phông Be Vietnam Pro tải từ Google Fonts với chế độ hiển thị chữ tạm trước khi phông tải xong.
Back-end: WordPress và LiteSpeed Cache cho website thiết bị y tế
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ý bài viết, trang và menu. Plugin LiteSpeed Cache lưu bộ nhớ đệm cho trang, và máy chủ trả về dấu hiệu trang được lấy từ bộ nhớ đệm.
Kỹ thuật nền
Website chạy phía sau Cloudflare và trên PHP 8.2, trả trang qua 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 cho website, bài viết và ô tìm kiếm. Website có sẵn robots.txt và sơ đồ trang XML.
Quản trị website
Thiết Kế Web DC bàn giao website để công ty tự quản trị nội dung trong WordPress: thêm bài hướng dẫn, đăng tin, sửa menu và chỉnh khối trang bằng Elementor mà không viết mã. Form tư vấn được dựng bằng Elementor và có ô xác thực reCAPTCHA, còn danh sách sản phẩm trong form gồm tên các nhóm và thiết bị của website.
Kết quả
Website hoạt động đủ các tính năng dưới đây. DC mở từng mục trên website đang chạy rồi mới ghi vào bài. Phần này gồm số đo trang chủ và bảng tính năng, mỗi dòng chỉ nêu cái thấy rõ trong mã trang hoặc trên menu, và người đọc kiểm lại được ngay trên website.
Số đo website sau khi dựng
Trang chủ được DC chạy qua PageSpeed Insights hai lần, kết quả hai lần trùng nhau. Số trong bảng thuộc 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) | 0,8 giây |
| Độ ổn định bố cục (CLS) | 0 |
Cả hai chỉ số thuộc nhóm "tốt" của Google, và LCP 0,8 giây thấp hơn nhiều so với mốc 2,5 giây.
Tính năng chạy được
Bảng tính năng dưới đây ghi những gì chạy trên trang chủ.
| Tính năng | Cách hoạt động |
| Menu danh mục | Mở ra 16 nhóm thiết bị, mỗi nhóm kèm thiết bị con |
| Form đăng ký tư vấn | Họ tên, email, số điện thoại và danh sách sản phẩm quan tâm để chọn |
| Form nhận tư vấn ở chân trang | Email, số điện thoại và ô đồng ý điều khoản |
| Bốn nút liên hệ nổi | Gọi Hotline, Messenger, Chat Zalo, Tìm đường |
| Tìm kiếm | Ô tìm kiếm của website |
| Giỏ hàng | Ô giỏ hàng hiện 0 ₫ ở đầu trang |
| Nút lên đầu trang | Ở góc dưới bên phải |
Mọi mô tả ở trên dựa trên giao diện máy tính, DC chưa kiểm bố cục và tốc độ trên điện thoại nên bài không nhận định về bản di động.
Website của Hoàng Minh Med cho thấy cách chia một danh mục thiết bị lớn thành 16 nhóm mở từ mọi trang, kèm form tư vấn và bốn nút liên hệ nổi.
Quy mô các website khác của DC xem tại các dự án khác, mức chi phí xem tại bảng báo giá thiết kế website trọn gói. Đơn vị phân phối thiết bị y tế cần website danh mục lớn có thể liên hệ Thiết Kế Web DC để được tư vấn.
Bạn cần website cho đơn vị phân phối thiết bị y tế hay phòng khám? DC làm từ danh mục sản phẩm, form tư vấn đến phần quản trị. Gửi yêu cầu cho DC để nhận báo giá theo quy mô danh mục của bạn.
