design case study2 weeks

Animated Onboarding Illustrations

I helped transform static onboarding visuals into animation-led storytelling moments that introduced the platform with more clarity and energy.

My role

Interaction designer, motion scripting, animation direction, iteration, design-system alignment

Case study

Welcome

Consult

Shop

Community

Motion storyboard

Role

Interaction designer

Duration

2 weeks

Motion set

4 animations

System

Man Matters

Starting point

Static screens needed more energy.

The onboarding screens already had research and final UI direction in place. My focus was to enhance the experience through animated illustrations that could explain the platform purpose, communicate benefits quickly, and create a stronger first impression.

Problem

The existing static visuals were not doing enough work. They risked feeling dated, were less engaging, and could not demonstrate the app's value as clearly as motion-led onboarding could.

Motion objective

Capture attention during the first few onboarding seconds.

Make each product benefit easier to understand through motion.

Keep every animation aligned with the existing Man Matters design language.

Execution loop

Script, create, return, refine.

Script

Wrote concise motion scripts for each onboarding moment.

Creation

Shared the script, explanation, and references with the animation specialist.

Return

Reviewed the raw animations and adjusted them to fit the product system.

Iterations

Refined timing, clarity, tone, and visual consistency across versions.

Animation library

Four motion moments for the onboarding flow.

Onboarding

Introduces the platform and the main wellness categories.

Consult

Explains access to specialists and customized treatment guidance.

Commerce

Frames product discovery and wellness shopping as part of the journey.

Community

Shows safe, topic-based participation inside the app community.

Outcome

Motion with a clear product job.

A set of animation-ready onboarding moments across core product benefits.
A clearer collaboration loop between UX scripting, animation creation, and design-system refinement.
A more expressive onboarding experience designed to create a stronger first impression.

Reflection

This project reinforced that motion works best when it has a job. The animation was not added as decoration; it helped each onboarding screen explain what the platform offered and why users should continue.