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

In the middle of 2020, right after the first wave of the disease, MINISTOP Vietnam decided to launch a promotion campaign with many prizes that are needed for people’s health at that time – insurance, air purifier, smart band and smart weight meter…

There was a lucky wheel, a digital one. You just need a bill of 35.000vnd or higher to have a lucky code, then scan a QR to access the landing page, type the code in and spin the wheel, what happen after depends on your luckiness!

Ministop quay tay - bill & design

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 :>

So, we’re glad to be trusted to do the design and develop for the landing page! Everything started with the page UI which is built exactly the same with that campaign poster:

Để 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.

The lucky wheel was built on web base instead of mobile app to give users the easiest and simpliest way of access. There are 3 type of devices – desktop, tablet and mobile – and we have to work hard to ensure all of users have the best experience; even though more than 90% of access are from mobile user at the store with a bill.

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:

With the lucky wheel concept, animation is an important part to be developed. To keep the UX stick with our concept, we use spinning effect as a key on both animation and transition:

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..

We highly focus on animation, that can help increase the application’s mood. When user wins a prize, many animations will be added, including the confetti effect; and when they doesn’t have enough luck, the animation will run a bit slower..

.   .   .

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

.   .   .

A basic complete user flow:

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

Well yeah, is that good? We took part in this project as a developer, animator and UX/UI designer. That’s why you just have scrolled through a few long loaded screen recordings. Not many fabulous pictures to show, that’s all the 3-week project wrapped up; but behind that, we struggled with too many problems and bugs. All we had been through just to give users a flawless using flow as you have seen above.

To fully experience what we have done, you might want to scroll up a little bit and click on the phone. You will win a prize, i swear!!!

07.2020