Thiết kế website bán lẻ Macbook cho MacOne

MacOne là hệ thống cửa hàng bán lẻ Macbook và phụ kiện Apple với nhiều chi nhánh. Đề bài gồm hai phần: dựng lại toàn bộ giao diện theo nhận diện thương hiệu mới, và nối website với hệ thống KiotViet đang chạy tại cửa hàng để giá trên web luôn khớp với giá thật.

Bài toán khó nhất: một sản phẩm, hàng chục biến thể

Máy Apple đã qua sử dụng không có "một mức giá". Cùng một dòng MacBook Pro sẽ tách ra theo đời máy, cấu hình RAM/SSD, màu sắc, và tình trạng máy — mỗi tổ hợp một giá khác nhau.

Cách làm dễ nhất là mỗi tổ hợp một bài viết riêng. Nhưng như vậy một dòng máy sẽ sinh ra vài chục bài trùng nội dung: cùng mô tả, cùng ảnh, chỉ khác con số. Đội vận hành sẽ không cập nhật nổi, còn Google sẽ thấy hàng loạt trang gần như giống hệt nhau.

Giải pháp là mô hình hoá biến thể bên trong một sản phẩm cha. Người quản trị biên tập nội dung một lần: mô tả, ảnh, thông số chung. Các biến thể chỉ mang thuộc tính phân biệt và tự nhận giá từ bảng đồng bộ. Kết quả: một URL sạch cho mỗi dòng máy, nội dung không trùng lặp, và cập nhật giá không cần ai vào CMS.

Đồng bộ giá và tồn kho theo từng chi nhánh

Giá bán và số lượng còn hàng lấy từ KiotViet — hệ thống mà nhân viên cửa hàng vốn đã dùng hằng ngày. Website không phải là nơi nhập liệu thứ hai.

Điểm cần xử lý riêng ở MacOne là tồn kho phân theo chi nhánh: một máy còn ở cửa hàng này nhưng hết ở cửa hàng khác. Trang sản phẩm phản ánh đúng tình trạng đó thay vì gộp thành một con số chung, tránh trường hợp khách đi tới nơi mới biết hết hàng.

Phần tích hợp này về sau tôi tách hẳn thành một service riêng dùng chung cho nhiều website — quá trình đó tôi ghi lại trong bài đồng bộ KiotViet với WordPress.

Giao diện dựng cho người mua bằng điện thoại

Phần lớn khách của MacOne vào web từ điện thoại, thường là trong lúc đang so sánh giá ở nhiều nơi. Vì vậy layout được dựng mobile-first, và ưu tiên đưa ba thứ lên sớm nhất: giá, tình trạng máy, chính sách bảo hành.

Bộ lọc danh mục cũng thiết kế theo cách người mua Apple thật sự tìm — theo dòng máy và năm sản xuất trước, rồi mới tới cấu hình và khoảng giá.

Toàn bộ theme viết riêng, không dùng theme thương mại: mã nguồn gọn, không kèm hàng chục tính năng không dùng đến, và tốc độ tải kiểm soát được.

Bạn đang bán lẻ và dùng KiotViet? Xem thêm 1Pro, Nam Thành Công hoặc gửi yêu cầu báo giá.