From Missed Updates to Memorable Moments

📍 Background

by.U is a digital telco app by Telkomsel, designed for Gen Z, fun, energetic, and straightforward. Yet, one recurring problem kept showing up: users often missed new features after app updates.

Not because the features weren’t exciting, but because our way of announcing them… was dull.

• Play Store changelogs? Almost nobody reads them.

• Standard notifications? Usually swiped away without a glance.

We needed something that didn’t just tell users about updates — it had to make them smile and feel curious.

🎯 The Challenge

• Users didn’t notice what changed after an update.

• Old methods like Play Store changelogs and plain notifications weren’t effective.

• We needed an on-brand, interactive way to highlight new features inside the app.

“We didn’t just want to say ‘hey, we updated.’
We wanted to make it a moment worth noticing.”
— by.U Design Team

🛠 Design Process

1. Sketching the Story

I began by exploring different storytelling directions through quick lo-fi sketches:

• Rocket Launch Scene – symbolizing excitement and big changes.

  

  
  

• Character-Driven Layout – featuring a phone mockup displaying the by.U splash screen, paired with a “NEW UPDATE” banner.

  

The aim was to make an app update feel like a mini event rather than just an interruption.

To save production time, I didn’t fully animate every concept at this stage.
Instead, I translated the chosen sketches into storyboards — frame-by-frame breakdowns of motion ideas.
This approach allowed the team to:

• Visualize timing and transitions early.

• Spot any interaction issues without committing to full animation.

• Give quick feedback to lock the direction.

Only after the storyboard was approved did I proceed to the final motion design for the selected concept.

2. Crafting the Motion

We chose the character-driven approach because:

• It felt more personal and friendly.

• Matched by.U’s playful tone of voice.

• Offered more space for fun microinteractions.
  
  

Animations were designed in After Effects and exported as Lottie JSON for:

• Lightweight performance.

• Smooth playback on all devices.

• Easy updates via CMS (both animation and content).
  
  

3. Final Touches

Result lottiefiles

Popup UI Copy was short, cheerful, and actionable:

“Yay! Enjoy the latest version of the app!”

• Instant payment via DANA

• byUnefit 2.0 features

• Help center improvements

Design Specs:

• Size: 308×534px, responsive on multiple devices.

• Animation Duration: ~1.5s for the initial entrance.

• Looping Motion: after the first play, the character switches to a gentle loop, such as a small wave or subtle blink to keep the pop-up visually alive without distracting the user.

• Optional short text version for concise updates.

This looping approach ensured that:

• The animation felt engaging even if users lingered on the pop-up.

• The motion never became repetitive or annoying.

• Brand personality stayed present until the user interacted.