Dự án website Blue Sea Logs là website WordPress do Thiết Kế Web DC thiết kế cho Blue Sea, công ty logistics tại TP.HCM vận chuyển đường biển, hàng không, nội địa và làm thủ tục hải quan cho doanh nghiệp xuất nhập khẩu. Bài đi theo người đang tìm đơn vị vận chuyển hàng hóa, họ là ai, họ cần thấy bằng chứng gì trước khi hỏi giá, họ đọc dịch vụ và dự án ở đâu.
Thông tin dự án
Blue Sea là tên thương mại của Công ty TNHH Vận chuyển Thương mại Biển Xanh, theo website khách hoạt động liên tục từ ngày 10/10/2005. Dự án website Blue Sea Logs thuộc nhóm thiết kế web logistics, nơi website phải tạo được lòng tin trước khi khách gửi một lô hàng. Bảng dưới tổng hợp thông tin chính.
Hạng mục | Nội dung |
Khách hàng | Công ty TNHH Vận chuyển Thương mại Biển Xanh, thương hiệu Blue Sea |
Ngành | Giao nhận vận tải đường biển, đường hàng không, vận tải nội địa và dịch vụ hải quan |
Website | bluesealogs.com |
Nền tảng | WordPress, theme Flatsome kèm child theme, Contact Form 7, GTranslate |
Văn phòng | TP.HCM (hai địa điểm), Hà Nội, Hải Phòng |
Đơn vị thực hiện | Thiết Kế Web DC |
Thời gian thực hiện | 2024 đến 2025 |
Bối cảnh của dự án
Khách chọn một công ty logistics vì tin, mà tin trong ngành này nghĩa là có pháp nhân rõ, có mạng lưới thật và đã chở được loại hàng giống hàng của mình. Website của Blue Sea vì vậy phải trả lời cả ba điều ấy trước khi người xem rời trang.
Chủ hàng xuất nhập khẩu tìm gì trước khi hỏi giá
Trước khi vẽ giao diện, DC ngồi liệt kê những câu một chủ hàng thường tự hỏi, vì người lần đầu xuất khẩu và doanh nghiệp đã quen forwarder hỏi hai kiểu khác nhau. Bảng dưới ghép từng câu hỏi với chỗ website trả lời.
| Câu hỏi của chủ hàng | Họ tìm thấy câu trả lời ở đâu |
| Công ty này có thật và hoạt động bao lâu rồi | Khối giới thiệu với mốc 10/10/2005 và trang Giới thiệu có đầy đủ thông tin pháp nhân |
| Họ chở được tuyến nào, bằng đường nào | Bốn thẻ dịch vụ biển, hàng không, nội địa và hải quan |
| Họ có đại lý ở nước đến không | Khối số liệu mạng lưới 193 quốc gia và hơn 489 đối tác |
| Họ đã chở loại hàng giống hàng của tôi chưa | Mục "Dấu ấn dự án nổi bật" với các lô hàng cụ thể |
| Giá có minh bạch không | Khối "Tại sao chọn chúng tôi" và lời hẹn báo giá trong 24 giờ |
| Tôi chưa hiểu chứng từ, cần đọc thêm | Mục "Tin tức ngành mới nhất" giải thích từng thuật ngữ |
| Muốn xem hồ sơ năng lực | Nút "Hồ sơ năng lực" ở khối giới thiệu |
| Cần gọi hoặc nhắn ngay | Cột nút liên hệ cố định và trang Liên hệ có bốn văn phòng |
Nội dung phải xếp: dịch vụ, dự án và chứng từ
Nội dung của Blue Sea gồm bốn dịch vụ, chín dự án đã làm và hàng chục bài giải thích thuật ngữ. DC phải xếp chúng thành ba lớp riêng để người xem đang vội không bị trộn lẫn với người xem muốn học.
- Bốn dịch vụ chính: vận chuyển đường biển, vận chuyển hàng không, vận chuyển nội địa và dịch vụ hải quan, mỗi dịch vụ có trang riêng.
- Chín dự án tiêu biểu: từ đóng hàng LCL xuất khẩu, thiết bị nhập khẩu cho một dự án ở Đà Lạt, mô hình kiến trúc bằng tăm tre đi Mỹ, Úc và Đức, nội thất nguyên container đi Hoa Kỳ, thép tiền chế sang châu Phi, chanh xanh sang Ấn Độ, đến hàng nội địa TP.HCM đi Hải Phòng theo mô hình door to door và thiết bị chiếu sáng nhập từ châu Âu bằng đường hàng không.
- Mục tin tức ngành: hơn mười lăm bài giải thích khái niệm như surrender bill, packing list, notify party, manifest, cut-off time, HBL và MBL, ETA và ETD, consignee, DPU, CY và CFS.
- Bốn con số năng lực: theo website khách, mạng lưới 193 quốc gia qua JCtrans, hơn 489 đối tác hãng tàu, hãng bay và đại lý, hơn 21 năm hoạt động và hơn 99 nhân viên toàn thời gian tại bốn văn phòng.
Bài toán của một công ty giao nhận có mạng lưới rộng
Thiết Kế Web DC xác định bài toán là biến một danh sách dịch vụ ai cũng nói giống nhau thành thứ khách nhớ được và tin được. Hàng nghìn công ty logistics đều ghi "nhanh, an toàn, giá tốt", nên website phải dựa vào số liệu và lô hàng cụ thể thay cho khẩu hiệu.
- Lòng tin đến từ dữ kiện kiểm chứng được: mã số thuế, địa chỉ bốn văn phòng, người đại diện pháp luật và hồ sơ năng lực cho khách đối chiếu.
- Dự án là bằng chứng mạnh nhất: mỗi lô hàng nêu rõ loại hàng, tuyến và thị trường, nên khách có hàng tương tự thấy ngay công ty đã làm.
- Bài giải thích thuật ngữ vừa giúp khách vừa giúp tìm kiếm: người mới xuất khẩu thường tìm một thuật ngữ chứng từ trước khi tìm công ty, nên mục tin tức là cửa vào thứ hai của website.
Bốn mục tiêu: tin pháp nhân, chọn đường vận chuyển, tin lô hàng và hỏi giá
Bốn mục tiêu dưới đây là cách DC chuyển bài toán thành việc phải làm, và mỗi quyết định về màu, chữ, bố cục đều được đối chiếu với chúng.
1. Chủ hàng thấy công ty có thật ngay màn hình đầu: banner, tên pháp nhân và mốc năm hoạt động.
2. Chủ hàng chọn đúng đường vận chuyển: bốn dịch vụ tách riêng, đặt gần nhau ngay sau phần giới thiệu.
3. Chủ hàng tin vào năng lực thật: số liệu mạng lưới, dự án có lô hàng cụ thể và đánh giá của khách.
4. Chủ hàng hỏi giá không phải tìm số: nút báo giá ở cuối trang, cột nút liên hệ cố định và hotline hiện ở mọi trang.
Thiết kế giao diện
Giao diện do Thiết Kế Web DC thiết kế theo hướng vững vàng và dễ đọc: nền sáng, màu xanh biển cho các thành phần chính, một phông chữ cho toàn trang. Phần dưới đi qua bảng màu, phông chữ, bố cục trang chủ, menu và các nút cố định.
Xanh biển và các màu phụ theo tên thương hiệu
Blue Sea nghĩa là biển xanh, nên DC lấy xanh biển làm màu chủ đạo và để nền sáng cho phần chữ đọc. Mỗi màu có một việc cố định, nhờ đó người xem nhận ra ngay đâu là nút, đâu là khối thông tin.
| Màu | Mã | Dùng cho |
| Xanh biển | `#065799` | Dải đầu trang, lớp phủ trên ảnh banner và nút "Hồ sơ năng lực" |
| Xanh ngọc thẫm | `#084e62` | Biểu tượng tròn ở các khối tính năng và ô nhập đăng ký nhận tin |
| Xanh navy rất đậm | `#02213b` | Nền chân trang và dòng bản quyền, tạo điểm kết đậm cho trang |
| Xanh lá | `#0fbe16` | Vòng tròn của nút gọi nổi, màu quen thuộc của cuộc gọi |
| Chữ nội dung | `#111111` | Đoạn mô tả trên nền sáng |
| Trắng | `#ffffff` | Nền trang và chữ trên khối xanh |
Google Sans và cỡ chữ cho trang nhiều thuật ngữ
Website dùng một phông duy nhất là Google Sans, thay đổi độ đậm và cỡ chữ để tạo thứ bậc. Một phông giúp trang gọn, còn chữ đọc rõ là điều cần thiết với một nội dung chứa nhiều thuật ngữ và con số.
- Tiêu đề trang và tiêu đề khối: cỡ 24 px, độ đậm 700, dòng cao 32 px, đủ lớn để người lướt nhìn ra từng khối.
- Đoạn nội dung: cỡ 16 px, dòng cao khoảng 25,6 px, màu gần đen. Dòng thoáng giúp đoạn giải thích chứng từ dễ đọc.
- Tên dịch vụ trên thẻ: chữ trắng đậm cỡ 13,6 px đặt trên ảnh, đi kèm nút "Xem thêm" cỡ 13 px.
- Nút kêu gọi hành động: chữ 15,5 px, đậm, bo góc 6 px, nền xanh biển, đủ cao để bấm trên điện thoại.
Bố cục trang chủ từ pháp nhân đến báo giá
DC xếp trang chủ theo đúng thứ tự một chủ hàng đi từ nghi ngờ đến tin: công ty là ai, làm được gì, mạnh ở đâu, đã chở gì, vì sao chọn, người khác nói gì, rồi mới đến lời mời báo giá.
1. Khối "Về chúng tôi": giới thiệu công ty logistics tại TP.HCM, mốc hoạt động từ 10/10/2005, mạng lưới qua JCtrans, bốn văn phòng, người đứng đầu và lời hẹn báo giá trọn gói trong 24 giờ, kèm nút "Hồ sơ năng lực".
2. Khối "Dịch vụ của chúng tôi": bốn thẻ vận chuyển đường biển, hàng không, nội địa và dịch vụ hải quan, mỗi thẻ có nút "Xem thêm".
3. Khối "Đồng hành tin cậy": bốn con số 193, 489, 21 và 99 kèm lời kêu gọi dành cho hơn 3000 khách hàng đã sử dụng dịch vụ từ 2005.
4. Khối "Dấu ấn dự án nổi bật": sáu thẻ lô hàng tiêu biểu, mỗi thẻ gắn nhãn "Dự án" và nút "Xem thêm".
5. Khối "Tại sao chọn chúng tôi": bốn lý do là đóng gói an toàn, giá cả minh bạch, giao hàng đúng hạn và vận chuyển nhanh.
6. Khối "Khách hàng nghĩ gì về chúng tôi": các đánh giá kèm tên khách và khu vực, có chấm sao.
7. Khối "Tin tức ngành mới nhất": tám bài mới nhất về thuật ngữ và chứng từ.
8. Khối báo giá cuối trang: tiêu đề "Nhận báo giá vận chuyển ngay hôm nay!" và nút "Liên hệ ngay", đặt ngay trên chân trang.
Menu sáu mục và cột nút mạng xã hội, gọi điện cố định
DC giữ menu ngắn để khách tìm được dịch vụ hoặc thông tin pháp nhân trong một lần bấm, còn cột nút cố định giữ các kênh liên hệ luôn nằm trong tầm tay.
- Sáu mục menu: Trang chủ, Giới thiệu, Dịch vụ, Tin tức, Dự án và Liên hệ. Sáu mục là đủ để người xem không bị rối.
- Menu Giới thiệu thả xuống bốn mục: Về chúng tôi, trang riêng của CEO Nguyễn Thanh Tuấn, Hồ sơ năng lực và Tuyển dụng. Trang riêng của người đứng đầu giúp khách doanh nghiệp biết ai chịu trách nhiệm.
- Menu Dịch vụ thả xuống bốn mục: vận chuyển đường biển, hàng không, nội địa và dịch vụ hải quan, để khách vào thẳng đường vận chuyển mình cần.
- Cột nút cố định: Facebook, TikTok, YouTube và gọi điện nằm cố định khi cuộn, nút gọi dùng số hotline 0902 972 959.
- Chân trang đủ bốn văn phòng: trụ sở TP.HCM, văn phòng TP.HCM, Hà Nội và Hải Phòng, kèm mã số thuế, hotline, email và giờ làm việc.
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 một chủ hàng: kiểm tra công ty, chọn đường vận chuyển, xem lô hàng đã làm, học thêm chứng từ rồi để lại yêu cầu báo giá. Mỗi bước có trang riêng và luôn có lối bấm sang bước kế tiếp.
Trang Giới thiệu để đối chiếu pháp nhân
Trang này dành cho khách doanh nghiệp muốn kiểm tra trước khi ký hợp đồng, nên DC ghi đầy đủ thông tin thay vì chỉ viết lời quảng bá.
- Thông tin pháp nhân: tên công ty tiếng Việt và tiếng Anh, mã số thuế, mã chi nhánh, người đại diện, trụ sở, ngày bắt đầu hoạt động và ngày đăng ký pháp nhân hiện tại.
- Tầm nhìn và sứ mệnh: hai mục ngắn, tách riêng để khách đọc nhanh định hướng của công ty.
- Sáu giá trị cốt lõi: chính trực, tận tâm, hiệu quả, hợp tác, chuyên nghiệp và trách nhiệm, mỗi giá trị một khối.
- Thành tựu và chứng nhận: mục riêng để khách xem giải thưởng và giấy chứng nhận.
Trang Dịch vụ theo từng đường vận chuyển
Trang Dịch vụ mở đầu bằng phần tổng quan rồi tách từng dịch vụ để khách chọn đúng đường mình cần.
- Tổng quan kiểu freight forwarder trọn gói: nói rõ chuỗi việc từ đặt chỗ, gom hàng, làm chứng từ đến thông quan và giao tận kho.
- Bốn dịch vụ có trang riêng: vận tải hàng không, vận tải đường biển, vận tải nội địa và dịch vụ hải quan, mỗi trang có nút "Xem thêm" dẫn từ trang tổng.
- Tin mới ở cuối trang: các bài thuật ngữ đặt ngay dưới danh sách dịch vụ để khách đang tìm hiểu dịch vụ có thể đọc thêm.
Trang Dự án như một hồ sơ lô hàng
Mỗi dự án là một bài viết riêng mô tả một lô hàng cụ thể, vì với công ty giao nhận, một lô hàng đã đi được chính là bằng chứng.
- Chín lô hàng trong chín trang: mỗi tiêu đề nêu loại hàng, hình thức vận chuyển và thị trường, như xuất khẩu nội thất nguyên container đi Hoa Kỳ hay xuất khẩu chanh xanh sang Ấn Độ.
- Nhiều hình thức vận chuyển trong cùng mục: có hàng xuất đường biển, hàng nội địa door to door và hàng nhập bằng đường hàng không, để khách thấy phạm vi công việc.
- Thông tin cập nhật và thời gian đọc: một số bài dài ghi rõ tháng cập nhật và thời gian đọc để khách biết trước độ chi tiết.
Mục tin tức giải thích thuật ngữ xuất nhập khẩu
Phần tin tức không đăng tin công ty mà giải thích chứng từ và điều kiện giao hàng, vì đây là điều chủ hàng mới thường phải tra.
- Mỗi bài trả lời một thuật ngữ: tiêu đề đặt theo dạng "X là gì" kèm cách phân biệt, như notify party và consignee, HBL và MBL, ETA và ETD, CY và CFS.
- Có cả bài hướng dẫn quy trình: ví dụ hướng dẫn xuất khẩu lần đầu cho doanh nghiệp.
- Ngày đăng hiển thị trên thẻ: để khách thấy mục tin tức còn được cập nhật đều.
Form báo giá và bốn văn phòng
Trang Liên hệ gom địa chỉ bốn nơi và form để khách chọn cách hỏi hợp với mình, từ gọi hotline, gửi email đến để lại yêu cầu.
- Bốn văn phòng: trụ sở và văn phòng tại TP.HCM, văn phòng Hà Nội và văn phòng Hải Phòng, để khách chọn nơi gần kho hoặc cảng của mình.
- Hotline và email cùng khối: số 0902 972 959 và địa chỉ thư của công ty, nên khách không phải tìm ở nhiều chỗ.
- Form liên hệ làm bằng Contact Form 7: gửi yêu cầu của khách về email công ty, hợp với khách chưa muốn gọi ngay.
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. Điểm PageSpeed Insights đo ngày 08/11/2026 cho thấy Accessibility 95, Best Practices 96 và SEO 100 ở cả hai thiết bị, còn Performance đạt 66 trên mobile và 81 trên desktop. Bảng dưới ghi thêm LCP, CLS và TBT.
WordPress, Flatsome và các plugin đang dùng
DC xây website trên WordPress, dùng theme Flatsome để dựng các khối ảnh và thẻ, còn phần chỉnh riêng nằm trong child theme để cập nhật theme không làm mất giao diện.
- Flatsome và child theme: theme cho dựng nhanh banner, thẻ dịch vụ và lưới dự án. Child theme giữ các tệp kiểu riêng cho đầu trang, chân trang và trang vận tải biển.
- Contact Form 7: form liên hệ gửi thông tin khách về email của công ty.
- GTranslate: cho khách nước ngoài đổi ngôn ngữ giao diện khi đọc website.
- Dữ liệu có cấu trúc: trang chủ khai báo Organization, WebSite, WebPage và Person để công cụ tìm kiếm hiểu đúng về doanh nghiệp.
- 3D FlipBook: hiển thị hồ sơ năng lực dạng sách lật ngay trên website.
- kk Star Ratings: hiển thị chấm sao trên các đánh giá của khách.
Số đo PageSpeed của website giao nhận vận tải
PageSpeed Insights chạy hai lượt trên mỗi thiết bị trong ngày 08/11/2026 và hai lượt đều ra cùng số. Dưới đây là số đo nguyên văn.
| Chỉ số | Mobile | Desktop |
| Performance | 66 | 81 |
| Accessibility | 95 | 95 |
| Best Practices | 96 | 96 |
| SEO | 100 | 100 |
| LCP | 12,9 giây | 2,5 giây |
| CLS | 0 | 0,003 |
| TBT | 10 ms | 20 ms |
Tên miền chưa có dữ liệu CrUX từ người dùng thật nên đây là số đo thử. Dung lượng tải của trang chủ khoảng 3,8 MB trên mobile và 4,3 MB trên desktop.
Đọc số đo: ảnh banner và ảnh dự án quá khổ
Bảng cho thấy website rất tốt ở SEO, độ ổn định và thời gian xử lý script, còn LCP trên mobile chủ yếu vì ảnh. DC ghi rõ điểm mạnh lẫn việc còn lại để khách biết nên xử lý gì trước.
- Điểm mạnh: SEO 100 và Accessibility 95 ở cả hai thiết bị, CLS bằng 0 trên mobile và 0,003 trên desktop, TBT chỉ 10 ms trên mobile và 20 ms trên desktop. Nghĩa là trang gần như không bị giật khi bấm và máy chủ trả HTML đầu tiên chỉ sau khoảng 5 ms.
- Ảnh dưới màn hình đã nạp lười: 39 trên 48 ảnh của trang chủ chỉ tải khi khách cuộn tới.
- Nguyên nhân LCP mobile 12,9 giây: phần tử tính LCP là ảnh banner đầu trang kích thước 2048 x 857, đã gắn ưu tiên tải và không nạp lười, nhưng ảnh còn lớn hơn nhiều so với khung hiển thị trên điện thoại. Lighthouse ước tính có thể bớt khoảng 2,3 MB ảnh trên mobile nếu đổi định dạng và cắt đúng kích thước.
- CSS và jQuery chặn hiển thị: tệp CSS của theme, CSS riêng của child theme và jQuery làm chậm lần hiển thị đầu, Lighthouse ước tính tiết kiệm khoảng 1,9 giây nếu hoãn tải.
- Việc còn lại ở Accessibility: còn một số nút chưa có tên cho trình đọc màn hình, đây là lỗi duy nhất Lighthouse báo ở nhóm này.
- Một tệp ảnh nền báo lỗi 404: hình mẫu `pattern-1.png` không còn tồn tại, nên trình duyệt ghi một 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 Blue Sea Logs, 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 giải thích thuật ngữ mới, thêm dự án lô hàng và chỉnh thông tin văn phòng trong WordPress mà không cần nhờ lại đơn vị làm web.
Hướng mở rộng: báo giá theo tuyến, theo dõi lô hàng và ảnh banner
Website đã đủ để một công ty logistics trình bày dịch vụ, mạng lưới và lô hàng đã làm. Các hạng mục dưới đây đều làm được trên nền WordPress hiện có mà không phải dựng lại.
- Cắt ảnh banner và ảnh dự án về đúng khung hiển thị rồi đổi sang WebP: đây là việc rút ngắn LCP mobile rõ nhất và nên đo lại PageSpeed sau khi làm.
- Hoãn CSS và jQuery không cần cho màn hình đầu: giảm thời gian chờ hiển thị đầu tiên.
- Đặt tên cho các nút và sửa lỗi 404 của ảnh nền: đưa Accessibility lên gần 100 và dọn bảng lỗi.
- Form báo giá theo tuyến và loại hàng: khách chọn đường biển hay hàng không, nhập cảng đi, cảng đến, loại hàng và khối lượng để công ty báo giá trong 24 giờ.
- Trang theo dõi lô hàng: khách nhập số vận đơn để xem hàng đang ở chặng nào, thay cho việc gọi hỏi nhân viên.
Dự án website Blue Sea Logs gom bốn dịch vụ vận chuyển, chín lô hàng đã làm, mục giải thích thuật ngữ và thông tin bốn văn phòng vào cùng một mạch đọc, trên nền WordPress xanh biển với SEO đạt 100 ở cả hai thiết bị. Từ giao diện, child theme đến bàn giao quản trị, toàn bộ website do Thiết Kế Web DC thực hiện.
Công ty giao nhận, vận tải hay xuất nhập khẩu cần một website dựng lòng tin bằng lô hàng thật như dự án website Blue Sea Logs 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 công ty logistics vận tải
- Đị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
