Back to Home

Campaign Tab Festivity

Role

Interaction designer

Platform

Mobile App

Duration

2 Sprint (4 Weeks)

Discovery

Exploration

Takeaways

@randyvrnd

Discovery

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

Scope Project

I was delegated to improve campaign tab festivity. The expected output will be to make shop campaign feel more festive.

How Might We

Improve the festive feels on campaign tab?

Ideation

Utilize Micro Interaction

Utilize Micro Interaction

Confetti Animation

Confetti Animation

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.

Design Exploration

Explore Campaign Tab Icon

Micro Interaction Exploration - Tab Icon

Micro Interaction Exploration - Confetti Campaign (1)

Micro Interaction Exploration - Confetti Campaign (1)

Preview with Prototype

Sparkle Burst Confetti

4 Point Burst Confetti

Burst Confetti

Rain Confetti

Final Design & TAKEAWAYS

With thoughtful consideration and voting. We choose Flipping Icon animation for Campaign tab icon and Rain Confetti Animation for Confetti animation.

Design Impact

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

3.5%

CTR Increase attributed to Campaign Widget

25%

increased Number of Order

70%

70% uplift net order for campaign

Designed & Developed by Randy Varianda

CASE STUDY INDEX

Back to Home