Campaign Tab Festivity
Campaign Tab Festivity
Campaign Tab Festivity
My Role
My Role
Interaction Designer
Interaction Designer
Duration
Duration
2 Sprint (4 Weeks)
2 Sprint (4 Weeks)
Platform
Platform
Mobile
Mobile
Overview
Overview
Context
Context
Every week, there are ~200 campaigns running in Tokopedia (or at least 600 campaign per month) from multiple categories with different theme / value propositions for our users. when done properly, campaign can become powerful tools to increase traffic and unique buyers. we need to keep the best experience for user when they exploring campaign on Tokopedia from end to end
Every week, there are ~200 campaigns running in Tokopedia (or at least 600 campaign per month) from multiple categories with different theme / value propositions for our users. when done properly, campaign can become powerful tools to increase traffic and unique buyers. we need to keep the best experience for user when they exploring campaign on Tokopedia from end to end
Scope Project
Scope Project
I was delegated to improve campaign tab festivity. The expected output will be to make shop campaign feel more festive.
I was delegated to improve campaign tab festivity. The expected output will be to make shop campaign feel more festive.
How Might We
How Might We
Improve the festive feels on campaign tab?
Improve the festive feels on campaign tab?
Ideation
Ideation
Utilize Micro Interaction
Utilize Micro Interaction
Confetti Animation
Confetti Animation
Animation Tools
Animation Tools
I used After Effect for creating icon and confetti animation. Afterward, i used lottie plugin to convert the files into (.json) files for handoff to developer.
Icon Exploration
Explore Campaign Tab Icon
Explore Campaign Tab Icon
Micro Interaction Exploration
Micro Interaction Exploration
Micro Interaction Exploration - Campaign Tab Icon
Micro Interaction Exploration - Campaign Tab Icon
Micro Interaction Exploration - Confetti Campaign (1)
Micro Interaction Exploration - Confetti Campaign (1)
Micro Interaction Exploration - Confetti Campaign (2)
Micro Interaction Exploration - Confetti Campaign (2)
Preview with Prototype
Preview with Prototype
Sparkle Burst Confetti
Sparkle Burst Confetti
4 Point Burst Confetti
4 Point Burst Confetti
Burst Confetti
Burst Confetti
Rain Confetti
Rain Confetti
Final Design
Final Design
Again, with voting method and thoughtful consideration. We choose Flipping Icon animation for Campaign tab icon and Rain Confetti Animation for Confetti animation.
Result
Result
Campaign tab launched on 25 August during Tokopedia Anniversary. We also got nice testimonial about confetti animation from user and other team at Tokopedia want to re-use my confetti animation.
Some metric we collected after launched
Campaign tab launched on 25 August during Tokopedia Anniversary. We also got nice testimonial about confetti animation from user and other team at Tokopedia want to re-use my confetti animation.
Some metric we collected after launched
25%
increased Number of Order
increased Number of Order
3.5%
CTR Increase attributed to Campaign Widget
CTR Increase attributed to Campaign Widget
70%
70% uplift net order for campaign
70% uplift net order for campaign
Feel free to reach out for collaboration purposes or just a friendly hello 👋🏻
@ 2023 Randy Varianda
Feel free to reach out for collaboration purposes or just a friendly hello 👋🏻
@ 2023 Randy Varianda
Feel free to reach out for collaboration purposes or just a friendly hello 👋🏻
@ 2023 Randy Varianda