Giữa năm Covid 2020, trong giai đoạn bình thường mới sau đợt dịch đầu tiên, MINISTOP Việt Nam tranh thủ chạy một chương trình khyến mãi nhằm câu kéo khách hàng mua sắm với những phần quà hỗ trợ theo dõi sức khoẻ như bảo hiểm, máy lọc không khí, cân thông minh, đồng hồ thông minh…

Chương trình đơn giản dễ chơi, bạn sẽ có một mã quay số với mỗi 35k trên hoá đơn, quét QR code vào địa chỉ trang campaign, nhập mã và quay. May thì trúng, không may lần sau trúng, ezzzzz

 

 

 

 

 

Và tớ vinh hạnh được ôm hết phần landing page, từ design đến develop. Bắt đầu với giao diện được clone y xì đúc với poster campaign được thiết kế bởi Ministop :>

 

 

 

Để dễ dàng nhất cho khách hàng tham gia, phần quay số sẽ được triển khai trên nền web thay vì làm app, trên chính hosting của Ministop. Vẫn 3 dạng layout cơ bản là desktop – tablet – mobile, tớ phải đảm bảo cho toàn bộ người truy cập đều có cùng trải nghiệm mặc dù hơn 90% lượng truy cập đến từ mobile do khách hàng quay số trực tiếp từ cửa hàng với bill trên tay.

 

 

 

 

Concept của campaign là quay bánh xe may mắn, từa tựa như chương trình chiếc nón kì diệu hồi xưa, bởi vậy nên phần animation phải được chú trọng nhiều. Để bám dính lấy concept, tớ dùng hiệu ứng xoay tròn làm chủ đạo cho transition và animation. Như này:

 

 

 

 

Tớ đầu tư nhiều vào animation. Animation với tốc độ và nhịp điệu hợp lý có thể góp phần tạo mood cho ứng dụng, tớ làm hiệu ứng khi quay trúng phần quà sẽ nhanh và nhiều, có cả confetti bay bay chúc mừng; còn quay trật thì chạy chậm và xìu hơn..

 

 

 

.   .   .

 

Một userflow hoàn chỉnh khi tham gia quay tay ngay trên điện thoại:

 

 

 

 

Hehee ổn hông bạn ơi? Project này tớ tham gia với vai trò là developer, animator và UX/UI designer; do vậy ở đây bạn chỉ thấy quẩn quanh những cái screen recording được cắt gọt lại thôi. Dự án làm cả 3 tuần chỉ gom lại được một ít để khoe mẽ như trên, nhưng đằng sau đó là rất nhiều vấn đề kĩ thuật, đủ các loại bug giao diện và animation issue cho tớ tha hồ vò đầu bứt tai. Tất cả mọi thứ chỉ để khách mua hàng có được một quá trình quay số trơn tru như bạn vừa xem xong.

Nhưng mà chỉ coi thôi thì chưa trọn vẹn đâu, kéo ngược lên trên một chút và bấm vào cái điện thoại ngay trên này đi! Chắc cú quay trúng đó :>

 

 

07.2020

 

Post Views: 1,158