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.

Một dòng máy, hàng chục biến thể giá

Máy Apple đã qua sử dụng không có một mức giá. Cùng một dòng MacBook Pro 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á.

Cách làm dễ nhất là mỗi tổ hợp một bài viết riêng. Như vậy một dòng máy 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 không cập nhật nổi, còn Google thấy hàng loạt trang gần như giống hệt nhau.

Kết quả:

• Một URL sạch cho mỗi dòng máy
• Nội dung không trùng lặp giữa các biến thể
• 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 nhân viên cửa hàng vốn đã dùng hằng ngày. Website không phải 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 hiển thị đúng tình trạng từng chi nhánh 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 dùng chung cho nhiều website, 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à lúc đang so giá ở nhiều nơi. Layout vì vậy dựng mobile-first, ư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 đi theo cách người mua Apple thật sự tìm: 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. Mã nguồn gọn, không kèm hàng chục tính năng không dùng tới, tốc độ tải kiểm soát được.