Dự án website Ringo Logistics là website WordPress do Thiết Kế Web DC thiết kế cho đơn vị express và logistics tại TP.HCM, giới thiệu dịch vụ chuyển phát, gửi hàng quốc tế và có công cụ tra cứu giá cước ngay trên trang.
Thông tin dự án Website Ringo Logistics
RinGo Express & Logistics là đơn vị vận chuyển tại quận Tân Bình, TP.HCM, nhận gửi hàng đường biển, hàng không, đường bộ và làm thủ tục hải quan. Dự án website Ringo Logistics thuộc nhóm thiết kế website chuyển phát nhanh, nơi người gửi cần biết giá trước khi gọi điện. Bảng dưới tổng hợp thông tin chính.
| Hạng mục | Nội dung |
| Khách hàng | RinGo Express & Logistics, đơn vị express và logistics tại TP.HCM |
| Ngành | Vận tải đường biển, đường hàng không, đường bộ, thủ tục hải quan, chuyển phát nhanh và gửi hàng quốc tế |
| Website | ringologistics.com |
| Nền tảng | WordPress, theme Flatsome kèm child theme, Contact Form 7, GTranslate |
| Công cụ riêng | Trang tính cước vận chuyển viết trong child theme |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Thời gian thực hiện | 2023 đến 2024 |
Bối cảnh của dự án
Người gửi hàng đi nước ngoài thường chưa biết mình cần gì, chỉ biết hàng nặng bao nhiêu và muốn gửi tới đâu. Vì thế website của Ringo phải đưa họ từ câu hỏi "gửi đi Nhật bao nhiêu tiền" tới một con số và một số điện thoại trong vài lần bấm.
Người gửi hàng quốc tế hỏi gì trước khi gửi
Trước khi vẽ giao diện, DC ngồi liệt kê những câu một người gửi hàng thường tự hỏi, vì chủ shop gửi lẻ và doanh nghiệp gửi lô hỏi hai kiểu khác nhau. Bảng dưới ghép từng câu với chỗ website trả lời.
| Câu hỏi của người gửi | Họ tìm thấy câu trả lời ở đâu |
| Gửi hàng này đi nước kia mất bao nhiêu | Trang "Giá cước" với công cụ tra cứu |
| Công ty này gửi được đến những nước nào | Tám thẻ "Dịch vụ gửi hàng đi" từng nước ở trang chủ |
| Hàng của tôi đi đường nào cho hợp | Trang đường biển, đường hàng không và chuyển phát riêng |
| Hàng nào bị cấm, cần giấy tờ gì | Mục loại hàng và quy định trong trang chuyển phát |
| Công ty có làm thủ tục hải quan không | Thẻ "Thủ tục Hải Quan" ở khối dịch vụ |
| Công ty có đủ lớn để tin không | Bốn con số ở khối "Thành tựu" |
| Muốn đọc thêm về chứng từ, cước phí | Mục tin tức |
| Cần gọi hoặc ghé văn phòng | Trang Liên hệ và chân trang có hotline, địa chỉ |
Dịch vụ, nước đến và bảng cước cần xếp vào đâu
Nội dung của Ringo xoay quanh ba thứ rất khác nhau: dịch vụ vận chuyển, các nước đến và bảng cước. DC phải đặt mỗi thứ vào đúng một chỗ để người xem không phải đọc cùng một ý ở ba nơi.
- Bốn dịch vụ chính: vận tải đường biển, thủ tục hải quan, chuyển phát nhanh và gửi hàng quốc tế, mỗi dịch vụ một trang.
- Tám nước đến có trang riêng: Nhật Bản, Thái Lan, Malaysia, Đài Loan, Hàn Quốc, Canada, Úc và Mỹ.
- Bảng cước: nằm riêng ở trang "Giá cước", không trộn vào trang dịch vụ.
- Bốn con số năng lực: theo website khách, hơn 2000 lượt vận chuyển hoàn thành, hơn 1250 khách hàng hài lòng, hơn 10 năm kinh nghiệm và hơn 150 nhân viên.
- Mục tin tức: các bài giải thích vận tải hàng không, vận tải quốc tế và vận tải đường biển.
Bài toán của một đơn vị express nhỏ gọn
Thiết Kế Web DC xác định bài toán là đưa phần "tính tiền" lên trước phần "giới thiệu". Người gửi hàng thường so giá giữa nhiều nơi, nên trang nào cho họ con số sớm nhất sẽ được gọi trước.
- Giá phải nằm trong tầm tay: mục Giá cước đứng ngay trên menu chính, không giấu trong trang dịch vụ.
- Mỗi nước đến là một cách người ta tìm kiếm: người gõ "gửi hàng đi Úc" cần thấy một trang về Úc, không phải một trang chung chung về vận chuyển quốc tế.
- Nội dung phải đủ rộng mà vẫn gọn: website vừa nói về đường biển, hàng không vừa nói về chuyển phát nên DC giữ bố cục nhất quán giữa các trang dịch vụ.
Bốn mục tiêu: tra giá, chọn tuyến, chọn nước đến và tin công ty
Bốn mục tiêu dưới đây là thước đo DC dùng suốt quá trình dựng, mỗi lần chọn màu, chữ hay vị trí khối đều đối chiếu lại.
1. Người gửi hiểu công ty làm gì ngay màn hình đầu: banner vận chuyển toàn cầu và các thẻ dịch vụ ngay phía dưới.
2. Người gửi biết giá trước khi liên hệ: mục Giá cước trên menu và công cụ tra cứu một trang.
3. Người gửi chọn được nước đến của mình: tám thẻ gửi hàng đi từng nước.
4. Người gửi tin vào năng lực thật: bốn con số, các trang dịch vụ có quy trình và thủ tục rõ ràng.
Thiết kế giao diện
Giao diện do Thiết Kế Web DC thiết kế theo hướng gọn và chắc: nền xanh teal thẫm, chữ trắng trên các khối đậm, một phông chữ cho toàn trang. Các mục sau ghi lại màu, phông chữ, bố cục trang chủ và thanh menu của Ringo, đo từ giao diện thật ngày 08/11/2026.
Xanh teal thẫm và vai trò từng màu
Ringo là đơn vị vận chuyển nên DC chọn xanh teal thẫm, màu gợi biển sâu và chuyên nghiệp, rồi để nền sáng cho phần chữ đọc. Mỗi màu có một việc cố định.
| Màu | Mã | Dùng cho |
| Xanh teal thẫm | `#002a34` | Nút "Xem thêm", nền các khối dịch vụ và chân trang |
| Xanh ngọc | `#084e62` | Biểu tượng tròn và các điểm nhấn phụ cùng tông |
| Đen nhạt | `#191919` | Nền các khối tối xen kẽ |
| Xám | `#666666` | Chữ phụ và viền |
| Chữ nội dung | `#111111` | Đoạn mô tả trên nền sáng |
| Trắng | `#ffffff` | Chữ trên khối xanh và nền trang |
Be Vietnam Pro và cỡ chữ dễ đọc trên bảng cước
Website dùng một phông duy nhất là Be Vietnam Pro, phông thiết kế sẵn cho tiếng Việt nên dấu thanh không lệch ở cỡ nhỏ. Một phông cũng giúp bảng giá cước và đoạn giải thích đọc liền mạch với phần còn lại.
- Tiêu đề trang: cỡ 24 px, độ đậm 700, dòng cao 32 px, màu đen trên nền sáng.
- Tiêu đề khối trên banner: cỡ 22 px, đậm, chữ trắng trên ảnh, dùng cho bốn dòng như "Vận chuyển toàn cầu – Đường hàng không".
- Tên dịch vụ trên thẻ: cỡ 16 px, đậm, màu xám sáng trên nền xanh thẫm.
- Đoạn nội dung: cỡ 16 px, dòng cao khoảng 25,6 px, độ đậm 400.
- Nút "Xem thêm": chữ 15,5 px, đậm, bo góc 6 px, nền xanh teal thẫm.
Bố cục trang chủ từ banner vận tải đến lời mời báo giá
DC xếp trang chủ theo thứ tự một người đi từ "công ty này làm gì" đến "gửi đi nước nào" rồi "có đáng tin không". Mỗi khối trả lời một câu hỏi.
1. Banner bốn dòng: vận chuyển toàn cầu bằng đường hàng không, đường biển, đường bộ và giải pháp quản lý kho.
2. Khối "Về chúng tôi": giới thiệu đơn vị express và logistics, ba điểm mạnh là đội ngũ chuyên nghiệp, giao hàng đúng hẹn và hỗ trợ tận tâm.
3. Khối "Dịch vụ": bốn thẻ vận tải đường biển, thủ tục hải quan, chuyển phát nhanh và gửi hàng quốc tế, mỗi thẻ có nút "Xem thêm".
4. Tám thẻ gửi hàng đi từng nước: Nhật Bản, Thái Lan, Malaysia, Đài Loan, Hàn Quốc, Canada, Úc và Mỹ.
5. Khối "Thành tựu": bốn con số 2000+, 1250+, 10+ và 150+ kèm lời kêu gọi dành cho hơn 3000 khách hàng.
6. Khối "Tại sao chọn chúng tôi": bốn lý do đóng gói an toàn, giá cả minh bạch, giao hàng đúng hạn và vận chuyển nhanh.
7. Khối cảm nhận và tin tức: đánh giá của khách và các bài viết nổi bật.
8. Khối báo giá cuối trang: lời mời nhận báo giá ngay trên chân trang có địa chỉ, hotline và email.
Menu sáu mục có mục Giá cước riêng
DC giữ menu ngắn để người gửi hàng tìm được giá hoặc dịch vụ trong một lần bấm.
- Sáu mục menu: Trang chủ, Giới thiệu, Dịch vụ, Giá cước, Tin tức và Liên hệ.
- Mục Giá cước đứng riêng: không nằm trong menu thả xuống, vì đây là thứ người gửi hàng tìm nhiều nhất.
- Menu Giới thiệu thả xuống bốn mục: giới thiệu công ty, tầm nhìn và sứ mệnh, tuyển dụng, văn hóa hoạt động.
- Menu Dịch vụ thả xuống bốn mục: vận tải đường biển, thủ tục hải quan, dịch vụ chuyển phát và gửi hàng quốc tế.
- Nút lên đầu trang: hiện trên màn hình lớn để quay về menu ở các trang dài.
Trải nghiệm người dùng
Thiết Kế Web DC tổ chức nội dung theo hành trình của người gửi hàng quốc tế: xem dịch vụ, tra giá cước, chọn nước đến rồi liên hệ. Mỗi chặng của hành trình này là một trang riêng, và cuối mỗi trang đều có nút dẫn khách tới chặng kế tiếp.
Công cụ tính cước vận chuyển
Đây là phần khác biệt nhất của website: người gửi tự tra giá tạm tính mà không cần chờ nhân viên báo.
- Các ô nhập: nước gửi đến, khối lượng tính bằng kg, kích thước dài, rộng, cao tính bằng cm, loại sản phẩm và phương thức vận chuyển, kèm nút "Tra cứu".
- Bảng kết quả: liệt kê tên dịch vụ, giá cước cơ bản và thời gian, đơn vị tính bằng đồng.
- Lời nhắc minh bạch: ghi rõ đây là giá tạm tính, chưa gồm thuế và phụ phí, để khách không hiểu nhầm con số là giá cuối.
- Có tệp giao diện riêng: công cụ nằm trong child theme với tệp CSS và thư mục riêng.
Tám trang gửi hàng đi từng nước
Mỗi nước đến có một thẻ riêng ở trang chủ, vì người gửi tìm theo nơi hàng cần tới.
- Tên thẻ nêu thẳng điều khách tìm: "Dịch vụ gửi hàng đi Nhật Bản", "Dịch vụ gửi hàng đi Mỹ" và tương tự cho sáu nước còn lại.
- Nút "Xem thêm" dẫn tới trang riêng: nơi khách đọc điều kiện gửi riêng cho thị trường đó.
- Nhóm theo khu vực quen gửi: nhiều nước châu Á đứng gần nhau, rồi tới Canada, Úc và Mỹ.
Trang vận tải đường biển và trang chuyển phát nhanh
Hai trang dịch vụ dài nhất đi theo cùng một khung để khách quen cách đọc.
- Đường biển: mở đầu bằng giới thiệu dịch vụ, rồi ba lý do chọn là chi phí hợp lý, an toàn hàng hóa và thời gian đáng tin cậy, sau đó là quy trình, thủ tục cần chuẩn bị và cơ sở hạ tầng, phương tiện.
- Chuyển phát nhanh: có các mục giao nhanh, giảm gánh nặng công việc và dịch vụ theo dõi hàng hóa, rồi quy trình vận chuyển.
- Loại hàng và quy định: tài liệu quan trọng, hàng thương mại, hàng cồng kềnh, đóng gói, giấy tờ hợp lệ và quy định về hàng cấm.
- Chi phí và thanh toán: mục riêng về thanh toán linh hoạt để khách biết trước cách trả tiền.
Giới thiệu công ty, tin vận tải và liên hệ nhận báo giá
Ba trang còn lại hoàn tất hành trình: tin, hiểu và liên hệ.
- Trang giới thiệu: gồm phần về công ty với bốn con số, tầm nhìn và sứ mệnh, văn hóa hoạt động.
- Mục tin tức: ba bài giải thích vận tải đường hàng không, vận tải quốc tế và vận tải đường biển, kèm quy trình và chi phí.
- Trang liên hệ: địa chỉ 42/43 Nguyễn Minh Hoàng, phường 12, quận Tân Bình, email, hotline 1900 4797 và form gửi tin nhắn làm bằng Contact Form 7.
Công nghệ và hiệu năng
Thiết Kế Web DC dựng website trên WordPress với theme Flatsome và child theme riêng cho trang tính cước. Điểm PageSpeed Insights đo ngày 08/11/2026 khá cao: Performance đạt 94 trên mobile và 89 trên desktop, Accessibility 92, Best Practices 96, SEO 92, riêng TBT bằng 0 ms ở cả hai thiết bị.
WordPress, Flatsome và child theme chứa trang tính cước
DC xây website trên WordPress, dùng theme Flatsome để dựng nhanh banner và thẻ, còn phần riêng của Ringo nằm trong child theme để cập nhật theme không làm mất giao diện.
- Flatsome và child theme: child theme chứa tệp kiểu riêng cho trang giới thiệu và trang tính cước.
- Contact Form 7: form liên hệ gửi thông tin khách về email của công ty.
- GTranslate: cho đổi ngôn ngữ giao diện khi khách nước ngoài vào đọc.
- Trang tính cước có thư mục riêng: nằm trong child theme, nên DC chủ động chỉnh khi công ty đổi bảng giá.
Số đo PageSpeed của website chuyển phát
Trang chủ được đo PageSpeed Insights hai lượt mỗi thiết bị vào ngày 08/11/2026, hai lượt cho ra cùng một kết quả. Số dưới đây ghi nguyên văn, không chọn lượt đẹp hơn.
| Chỉ số | Mobile | Desktop |
| Performance | 94 | 89 |
| Accessibility | 92 | 92 |
| Best Practices | 96 | 96 |
| SEO | 92 | 92 |
| LCP | 1,8 giây | 1,8 giây |
| CLS | 0,008 | 0,001 |
| TBT | 0 ms | 0 ms |
Google chưa gom đủ dữ liệu CrUX của người truy cập thật cho tên miền này, nên bảng trên là số đo thử. Dung lượng tải của trang chủ khoảng 2,6 MB trên mobile và 2,5 MB trên desktop.
Đọc số đo: CSS nạp thừa ở trang chủ và ba ảnh quá nặng
Bảng cho thấy website nhanh và ổn định, chỉ còn vài việc nhỏ để nâng điểm. DC ghi rõ cả điểm mạnh lẫn việc còn lại để khách biết nên làm gì tiếp.
- Điểm mạnh: LCP 1,8 giây ở cả hai thiết bị, CLS gần bằng 0, TBT 0 ms nên trang phản hồi gần như tức thì khi bấm, máy chủ trả HTML đầu tiên sau khoảng 5 ms.
- Ảnh dưới màn hình đã nạp lười: 32 trên 37 ảnh của trang chủ chỉ tải khi khách cuộn tới.
- Việc còn lại ở LCP: thời gian hiện phần tử LCP chủ yếu là khoảng chờ render khoảng 1,5 giây vì các tệp CSS chặn hiển thị, trong đó tệp của trang giới thiệu và tệp của trang tính cước đều được nạp ở trang chủ. Lighthouse ước tính hoãn được chúng tiết kiệm khoảng 1,5 giây trên mobile.
- Ảnh còn nặng: ba ảnh lớn ở trang chủ nặng khoảng 235 đến 320 KB mỗi ảnh, Lighthouse ước tính bớt được hơn 1 MB trên mobile nếu nén lại hoặc đổi sang WebP.
- Accessibility 92: còn chỗ độ tương phản chữ chưa đủ và một nút chưa có tên cho trình đọc màn hình.
- Hai ảnh nền báo lỗi 404: hình mẫu `pattern-1.png` và `pattern-4.webp` không còn tồn tại, nên trình duyệt ghi lỗi trong bảng điều khiển dù không ảnh hưởng điểm.
Kết quả bàn giao
Khi bàn giao dự án website Ringo Logistics, Thiết Kế Web DC đi kèm hướng dẫn quản trị nội dung. Đội ngũ công ty tự đăng bài tin tức, thêm trang gửi hàng đi nước mới và chỉnh thông tin liên hệ trong WordPress mà không cần nhờ lại đơn vị làm web.
Hướng mở rộng: theo dõi vận đơn, nước đến và báo giá
Website đã đủ để một đơn vị express giới thiệu dịch vụ và cho khách tra cước. Mọi hạng mục sau đều thêm được vào WordPress hiện tại, không cần dựng lại website.
- Hoãn CSS của trang con khỏi trang chủ: chỉ nạp tệp trang giới thiệu và trang tính cước ở đúng trang, đây là việc rút ngắn thời gian hiển thị rõ nhất.
- Nén ba ảnh lớn rồi đo lại PageSpeed: giảm dung lượng trước khi thêm ảnh mới.
- Nút gọi và nút Zalo cố định: hiện website mới có hotline ở chân trang và trang liên hệ, thêm nút nổi giúp khách gọi ngay khi đang tra cước.
- Tra cứu vận đơn: khách nhập mã để xem hàng đang ở chặng nào, thay cho việc gọi hỏi nhân viên.
- Lưu lại kết quả tra cước thành yêu cầu báo giá: khách bấm một nút để gửi nước đến, khối lượng và kích thước cho công ty gọi lại.
- Trang hỏi đáp cho người gửi hàng lần đầu: gom các câu về hàng cấm, đóng gói, giấy tờ, thuế và thời gian giao theo từng nước, kèm dữ liệu có cấu trúc dạng câu hỏi để kết quả tìm kiếm hiện đúng câu trả lời.
- Mở rộng mục tin tức thành cụm bài theo nước và tuyến: tám trang gửi hàng đi từng nước hiện chỉ có ba bài tin chung, thêm bài giải thích riêng cho mỗi nước sẽ giúp người tìm "gửi hàng đi Úc" hay "gửi hàng đi Nhật" vào đúng trang.
- Khai báo dữ liệu có cấu trúc cho dịch vụ vận tải và tổ chức: giúp công cụ tìm kiếm hiểu công ty làm tuyến nào, nhận hàng ở đâu.
Dự án website Ringo Logistics đặt mục Giá cước, bốn dịch vụ vận chuyển và tám trang gửi hàng đi từng nước vào cùng một mạch đọc, trên nền WordPress xanh teal thẫm, điểm Performance đạt 94 trên mobile. Từ giao diện, công cụ tính cước đến bàn giao quản trị, toàn bộ website do Thiết Kế Web DC thực hiện.
Đơn vị chuyển phát, gửi hàng quốc tế hay logistics nhỏ cần một website cho khách tự tra giá như dự án website Ringo Logistics nên xem trước bảng báo giá thiết kế website trọn gói, tham khảo các dự án đã thực hiện rồi liên hệ Thiết Kế Web DC qua hotline 0886 799 977 – 0563 035 555 hoặc Zalo.
Thiết Kế Web DC – Tư vấn thiết kế website chuyển phát nhanh và logistics
- Địa chỉ: 370 Đường 3/2, Phường 12, Quận 10, TP.HCM
- Chi nhánh: 87 Phan Huy Ích, Phường Tân Sơn, TP.HCM
- Hotline: 0886 799 977 – 0563 035 555
- Email: [email protected]
- Website: thietkewebdc.com
