Wise@Work

Motion Design Case Study

OVERVIEW

Wise@Work is a mobile app that delivers science-backed mindfulness content to support employee well-being and performance. As the app evolved to include more interactive and personalized experiences, we identified the need for a cohesive motion design system that could enhance clarity, support navigation, and reinforce the brand’s calming, intentional tone.

I led the creation of this motion system to ensure that transitions, interactions, and feedback animations felt consistent, purposeful, and emotionally aligned with the app’s wellness-focused mission. The goal was to define motion principles, establish reusable patterns, and prototype key animations that elevate both usability and user delight across the product.

01 – Challenge

As Wise@Work expanded its feature set and user base, the app began to rely more heavily on dynamic interfaces — from guided session flows to personalized recommendations and content transitions. However, without a unified approach to motion, interactions across the app felt disjointed, inconsistent, or even distracting at times.

We faced several key challenges:

LACK OF CONSISTENCY

Different transitions and animations were being implemented ad-hoc, resulting in a fragmented user experience.

EMOTIONAL TONE MISMATCH

Some animations felt too abrupt or mechanical, clashing with the app’s calming, mindful identity.

UNCLEAR INTERACTION FEEDBACK

Users didn’t always receive visual cues that confirmed their actions, especially in key moments like starting a session or navigating between screens.

SCALABILITY CONCERNS

As the team scaled, we needed a shared system to ensure future interactions followed the same design language.

02 – Motion Principles

To create a cohesive and emotionally aligned motion language for Wise@Work, I defined a set of motion principles rooted in mindfulness, clarity, and usability. These principles guided every animation decision — from large screen transitions to subtle microinteractions.

INTENTIONALITY

Every motion serves a purpose. Whether guiding attention, providing feedback, or signaling a change in state, animations are used thoughtfully and sparingly to support user understanding — never as decoration.

EASING

Inspired by natural movements, we use smooth easing curves such as ease-in-out to reinforce the app’s tranquil tone. Abrupt or linear motion was avoided to maintain a sense of flow.

RHYTHM

Motion throughout the app follows a consistent rhythm — transitions begin and end cleanly, with no jarring starts or unfinished exits. This helps create a sense of continuity and calm.

TIMING

Motion should reflect a calm and deliberate pace. Animations typically fall between 200–600ms, with faster transitions used for feedback (e.g., taps, confirmations), and slower ones for major navigational shifts (e.g., opening a session).

FEEDBACK

Users receive clear visual feedback for every action. Whether tapping a button, starting a meditation, or completing a task, motion reinforces interaction and system status in a subtle but reassuring way.

Goal was to create a cohesive and emotionally aligned motion language for Wise@Work, I defined a set of motion principles rooted in mindfulness, clarity, and usability.
These principles guided every animation decision — from large screen transitions to subtle microinteractions.

03 – Key Patterns & Components

With our motion principles in place, I focused on defining reusable motion patterns that could scale across the app. These animations not only improved usability but also reinforced the app’s mindful tone through subtle, intuitive motion.

CONTAINER TRANSFORM FOR SESSION TRANSITIONS – MAIN CARD

When a user taps a session card on the home screen, we use a container transform to morph the card into a full-screen session view. This technique helps preserve spatial continuity and reinforces the user’s mental model — they’re not jumping to a new screen; they’re diving deeper into the same context.

Purpose: 
Reduce cognitive load by visually linking origin and destination.

Duration:
 ~350–450ms with ease-in-out.

Effect: 
Smooth expansion, maintaining user focus on content.

CONTAINER TRANSFORM FOR SESSION TRANSITIONS – MINI CARD

When a user taps a session card on the home screen, we use a container transform to morph the card into a full-screen session view. This technique helps preserve spatial continuity and reinforces the user’s mental model — they’re not jumping to a new screen; they’re diving deeper into the same context.

Purpose: 
Reduce cognitive load by visually linking origin and destination.

Duration:
 ~350–450ms with ease-in-out.

Effect: 
Smooth expansion, maintaining user focus on content.

FORWARD & BACKWARD NAVIGATION TRANSITIONS

For deep navigation paths, such as exploring a series of screens (e.g., onboarding, profile setup, or content flows), we applied directional motion to distinguish forward progress from returning.

Purpose: 
Visually communicate movement through hierarchy and support user orientation.

Forward Motion:
Slide-in from right (new screen), slide-out to left (previous screen).

Backward Motion:
Reverse direction — slide-in from left, slide-out to right.

Duration:
300–400ms, ease-in-out.

Effect:
Predictable, spatial navigation that aligns with mobile OS conventions while maintaining a mindful pace.

LATERAL CAROUSEL NAVIGATION

Used for browsing mindfulness categories or scrolling through session options, this lateral transition relies purely on horizontal motion without any scaling to keep the experience minimal and calm

Purpose: 
Allow users to browse horizontally without introducing motion complexity or visual hierarchy shifts.

Duration:
~250–300ms with ease-in-out.

Effect: 
Smooth, predictable navigation that supports exploration while preserving a grounded and distraction-free experience.

BOTTOM MENU INTERACTION

The bottom navigation enables instant switching between core sections of the app (e.g., Home, Sessions, Profile). To maintain clarity and responsiveness, we focused motion on the navigation bar elements, while screens themselves change immediately without transitional animation.

Purpose: 
Provide immediate feedback for taps while visually reinforcing the active section.

Effect: 
A snappy, minimal interaction that preserves flow and focus — users receive just enough feedback to stay oriented without any visual delay.

SKELETON LOADER

To improve perceived performance and reduce user anxiety during loading states (e.g., session feed, profile data), we implemented a calm skeleton loader that visually indicates content is on the way — without relying on spinners or abrupt transitions.

Purpose: 
Provide visual reassurance during data loading, while maintaining the app’s calm and mindful tone.

Effect: 
A gentle, pulsing shimmer that conveys activity without urgency — designed to be felt more than noticed, keeping the experience smooth and reassuring.

Impact & Takeaways

Introducing a motion design system to Wise@Work elevated the app’s overall user experience — not just visually, but functionally and emotionally.

Impact Highlights:

  • Improved clarity and navigation:
    Animations like the container transform and lateral carousel helped users better understand context shifts and screen hierarchy, reducing cognitive friction.

  • More consistent UI behavior:
     Standardized durations, easing, and feedback patterns created a smoother, more unified experience across the product.

  • Enhanced emotional tone:
    Calming, purposeful motion reinforced the app’s brand identity, making interactions feel more aligned with its wellness mission.

  • Faster development cycles:
    Having a shared motion library and clear specs allowed developers to implement animations more efficiently and confidently.

Key Learnings:

  • Start with principles:
    Defining a clear philosophy early on helped maintain coherence throughout the system and served as a north star during decision-making.

  • Prototyping is essential:
    Tools like ProtoPie allowed me to test and refine motion behavior in context before handing off to developers, avoiding misinterpretations.

  • Motion is more than aesthetics: Thoughtful animation improves usability, accessibility, and emotional engagement — when done right, it becomes an integral part of the UX.