Engaging Update Notification Design for by.U

How a microinteraction turned routine updates into an engaging brand touchpoint.

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.

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.

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.

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.

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

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.

Sometimes, the smallest details like a pop-up can deliver the biggest impact. The secret is:

Align with the brand’s personality.

Add a touch of delightful motion.

Keep the user journey smooth and efficient.

Use storyboards to accelerate motion design feedback and production.

Apply looping animation to keep the experience alive without becoming distracting.

Other Projects