INDUSTRY

WEB3 / CRYPTO

CLIENT

FINTOPIO

YEAR

2025

SKILLS

MOTION UX, MOTION GRAPHICS, ANIMATION

Adaptive Onboarding Motion System

.about

The Adaptive Onboarding Motion System was created to redesign the first-contact experience inside a messaging-based product. The challenge emerged when stakeholders requested a single, content-heavy animation to introduce the bot's new features. However, Telegram's strict 1MB onboarding limit made delivering a rich explainer inside the bot technically impossible.

Instead of forcing the brief into a constraint, I reframed the solution. I developed a two-part motion system designed around user experience and platform behaviuor: a micro-onboarding animation engineered for instant playback inside the bot (sub-1MB), and an extended promotional animation for social channels and secondary in-bot content.

This structure allowed the onboarding to remain fast, responsive, and clean, while still providing space for deeper product storytelling where appropriate. The final system successfully addressed both the technical constraints and the communication objectives, delivering a flexible, multi-format motion solution that enhances the user experience from the very first interaction.

.my role
Motion Designer | Creative Direction & Implementation

Motion Design:

  • Refined UI assets in Figma for clarity and brand consistency, applying updated brand guidelines from the Art Director

  • Designed and animated two purpose-driven versions optimized for different platforms and user touchpoints

  • Replaced heavy gradients with motion cues and refined pacing to reduce file size while maintaining visual impact

Technical Innovation:

  • Led animation optimization and deployment for the micro-onboarding version inside the Telegram bot

  • Reverse-engineered a new compression and deployment workflow when Telegram removed MP4-to-GIF auto-conversion mid-project

  • Documented the breakthrough workflow internally for future production use

Strategy & Implementation:

  • Proposed and executed the dual-format approach to meet both technical requirements and stakeholder content demands

  • Coordinated delivery of the promotional version for multiple platforms

.challenges & process

Stage 1: Understanding the Constraint Telegram's onboarding GIFs have a strict 1MB size limit, which severely restricted animation length and complexity. Stakeholders wanted a single, content-heavy video to explain features in detail, but delivering this inside the bot was technically impossible. The brief needed to be reconsidered from the ground up.

Stage 2: Strategic Content Split Instead of forcing all content into one compressed piece, I proposed two versions with distinct purposes: a lean micro-onboarding animation for inside the bot and a longer promotional animation for broader use. This reframing allowed each piece to serve its audience without compromise, keeping the in-bot experience instant while enabling richer storytelling elsewhere.

Stage 3: Motion Design Adaptations For the onboarding piece, I replaced heavy gradients with motion cues, refined pacing to reduce file size, and optimized shapes for clean compression. The promotional piece retained richer visuals since it was not subject to the same technical constraints. Every design decision was guided by the technical reality of each delivery format.

Stage 4: Technical Breakthrough Midway through production, Telegram changed its media processing pipeline, removing MP4-to-GIF auto-conversion and breaking the existing upload process. I reverse-engineered a new optimization and compression method to ensure seamless deployment, then documented this workflow internally to prevent future disruption and enable smoother production cycles.

.outcome
  • Delivered a smooth, optimized micro-onboarding animation under 1MB that loads instantly in Telegram, ensuring a friction-free first impression

  • Produced a longer promotional version adaptable to social media and as in-bot support content, meeting stakeholder needs for richer feature explanation

  • Created and documented a new compression workflow for Telegram bot animation deployment, now used internally for future projects

  • Successfully maintained brand consistency and visual quality across both versions despite severe technical constraints

.tools
  • Figma

  • After Effects

  • Telegram BotFather