Phân phối gạch ốp lát và thiết bị vệ sinh

Thanh Long Group

Thanh Long Group thành lập ngày 12/12/2001 với ba sáng lập viên, nay là một trong những nhà phân phối gạch ốp lát lớn của thị trường Việt Nam. Hơn 1.000 nhân sự, 25 công ty thành viên, hơn 500 xe vận chuyển đa trọng tải và 13 đối tác nội địa lẫn quốc tế đứng sau hơn 10.000 đại lý, nhà phân phối trải từ Bắc vào Nam. Hàng của họ là gạch lát, gạch ốp, gạch trang trí dưới các nhãn Blue Dragon, Tasa, Tasa Blue Ribbon, cùng keo dán gạch và thiết bị vệ sinh.

MONA thiết kế và phát triển website song ngữ Việt – Anh cho Thanh Long. Đây không phải trang giới thiệu doanh nghiệp mà là một cuốn catalogue tra được: người dùng lọc ra đúng viên gạch mình cần, xem nó nằm trong bộ sưu tập nào, rồi tìm công ty thành viên gần nhất để lấy hàng.

Xem website thật

Màn hero website Thanh Long Group giới thiệu bộ sưu tập gạch Amazonite

Lĩnh vực: Vật liệu xây dựng & nội thất
Hạng mục: Thiết kế & phát triển website
Nền tảng: WordPress
Website: thanhlonggroups.com

Bài toán

Người đi chọn gạch không tìm thương hiệu, họ tìm đúng một viên

Bán vật liệu có một điều oái oăm: khách vào trang hiếm khi biết tên sản phẩm. Họ biết mình đang lát cái gì và ở đâu — nhà tắm hay sân vườn, khổ 600 hay 1200, xương granite hay ceramic, bề mặt bóng hay nhám. Một danh mục xếp theo tên nhãn là bắt họ mò từng trang.

Nên tụi em dựng cả trang xoay quanh bộ lọc. Bảy trường chạy trên cùng một danh mục — ứng dụng, khu vực, kích thước, xương gạch, bề mặt, màu sắc, nhãn hiệu — và số sản phẩm còn lại đổi ngay bên phải để người lọc biết mình còn bao nhiêu lựa chọn. Ngay trang chủ đã đặt sẵn một khối năm trường, chọn xong bấm là nhảy thẳng vào kết quả.

Phần nhìn thì đi hướng ngược lại với ảnh cắt sẵn của nhà máy: mỗi bộ sưu tập mở bằng một không gian nội thất chiếm trọn bề ngang, để người đọc thấy viên gạch nằm trong phòng thật trước khi thấy mã số. Toàn bộ dựng song ngữ Việt – Anh, và trang hệ thống phân phối gắn bản đồ chỉ đường cho từng công ty thành viên.

Giao diện nổi bật

Mấy chỗ tụi em chăm nhất: bộ lọc bảy trường đếm lại số sản phẩm ngay khi chọn, trang chi tiết ghi đủ màu, xương, khổ và bề mặt của từng viên, và bản đồ chỉ đường tới đúng công ty thành viên gần nhất.

Danh mục gạch ốp lát với bộ lọc bảy trường bên trái và số sản phẩm còn lại

Trang chi tiết viên gạch Blue Dragon 9533 với màu xương kích thước và bề mặt

Lưới bộ sưu tập Terrazzo và Travertine dựng bằng ảnh không gian thật

Danh sách công ty thành viên kèm bản đồ chỉ đường trên website Thanh Long

Lưới dự án đã dùng gạch Thanh Long kèm tên công trình và tỉnh thành

Khối số liệu nhân sự công ty thành viên xe vận chuyển và khách hàng Thanh Long

Hạng mục bàn giao

MONA đã làm gì cho Thanh Long Group

01
Thiết kế UX/UI cho một catalogue vật liệu — nền sáng, xanh rêu thương hiệu, ảnh không gian chiếm trọn bề ngang
02
Phát triển website trên nền WordPress, dựng riêng cấu trúc gạch ốp lát, bộ sưu tập và thiết bị vệ sinh
03
Xây bộ lọc bảy trường ứng dụng, khu vực, kích thước, xương gạch, bề mặt, màu sắc, nhãn hiệu trên cùng một danh mục
04
Dựng hệ song ngữ Việt – Anh và trang hệ thống phân phối gắn bản đồ chỉ đường cho từng công ty thành viên
05
Tối ưu tốc độ tải cho trang nhiều ảnh khổ lớn và chuẩn hiển thị trên mobile

Trải nghiệm giao diện

Phần còn lại của cuốn catalogue: bộ sưu tập mở bằng một không gian thật, danh mục thiết bị vệ sinh lọc riêng theo bồn cầu, lavabo, sen tắm, tủ chậu, và thư viện video quay tại kho vận.