A mobile app for meditation and mindfulness

UI Animation for a mobile app

Tranquil project hero image

How can animations help engage and guide people through a meditation app?


Tranquil is a meditation app for all occasions. Most people associate meditation with relaxation, but it can also help you focus, energize, and motivate. Meditation can take many forms, and Tranquil allows users to explore to find guides that match their taste and needs.

View the Behance version of this case study here.

Target Audience

Target users are young people who are having issues with stress and want to find smart solutions to use at home and/or at work. They are typically 25 to 40 years old and are avid smartphone users.

Needs and Goals
  • Clear overview of available meditations
  • Find and add new meditations
  • Find already played and favorited meditations

UI Animation Designer


July - October 2022


Adobe XD and After Effects

Project Type

CareerFoundry student project

  • Identify core brand values
  • Design high fidelity app screens from mid-fidelity wireframes
  • Develop storyboards for UI animations
  • Create animations based on storyboards
  • Prepare files for stakeholder presentation and handoff
The Process


Brand Values and Style Guide

I identified the core brand values of the app, then developed a style guide that would express those values.

Relaxing | Focused | Mindful


Tranquil's logo is combination of a water droplet and a lotus flower bud. Both imagery have associations with meditation and align with the calm mood of the brand.

illustration - dream scenes
illustration - forest sounds
illustration - letting go
illustration - good vibes
illustration - breath
illustration - success
illustration - foundations
illustration - tidal waves


Logo - Baskerville Display PT Bold


Headings: Cambria


Body: Proxima Nova

Color Palette
Midnight Blue


Gray Blue


Cool White









Mid to High Fidelity Designs

I was provided with four mid-fidelity wireframes and applied the style guide to create the high fidelity screens shown below.

Mid Fidelity Wireframes
mid fidelity wireframe for preloader screen


mid fidelity wireframe for home screen


mid fidelity wireframe for guided meditation play screen

Guide play

mid fidelity wireframe for favorites screen


High Fidelity Screens
high fidelity design for preloader screen


high fidelity design for home screen


high fidelity design for guided meditation play screen

Guide play

high fidelity design for favorites screen



User Experience Narrative

Before jumping into animating the high-fidelity designs, I created a user experience narrative to demonstrate how the UI animations would help the brand portray its values through the user experience.

It is narrated from the point of view of Eva, a woman in her mid-twenties using the app to destress at the end of her long work day.


Opening the app

When Eva opens Tranquil, a preloader screen greets her with a nicely paced (but concise) logo animation. The slow animation has clear intentional movements and acts as a preview of the meditation guides that the app has to offer.


Home Screen

The preloader screen transitions to the home screen, welcoming Eva back, and showing her a variety of featured and recent meditation guides. The guides are listed with a title, short description, and duration, allowing her to quickly skim to see if any of them call out to her that day.


Favorites screen

Finding that nothing catches her eye, she taps the "Favorites" icon on the bottom navigation menu to open her saved library. Her saved guides are accompanied by a related graphic so she can easily find and select the one she has in mind.


Playing the meditation guide

Her selected meditation begins, showing a slow animation with an auditory guide. She can also play, pause, rewind, or fast forward with the play controls at the bottom of the screen. She finishes her session feeling refreshed and relaxed.



Preloader Animation
the final preloader animation
Preloader Storyboard
storyboard for the preloader animation

Click image to enlarge

Open Guide Animation
Final open meditation guide animation
Storyboard for Home staging and opening meditation guide
storyboard for home staging and opening the meditation guide

Click image to enlarge

Play Guide Animation
Final meditation guide playing animation
Storyboard for playing and exiting meditation guide
storyboard for playing then exiting a meditation guide

Click image to enlarge

Micro Animations

Storyboards were created for each micro interaction to create continuity between icon states. An example is shown below.

Final Add to Favorites Micro Animation
the final icon animation for 'add to favorites'
Micro Animation Storyboard: Add to Favorites
Micro animation storyboard for 'add to favorites'

Click image to enlarge


Final Implementation

I implemented the storyboards by exporting the high fidelity wireframes from Adobe XD into After Effects. I played around with the timing of each animation to create an atmosphere worthy of a meditation app.

Timing: Calming vs Frustrating

For this particular app, the timing of the animations would play a large role. I had to walk a fine line between animations that were calming and annoyingly slow. The animations were to contribute to the Tranquil branding without interfering with the user experience. I did not want users to feel as if they were waiting, but at the same time, the pacing had to be noticeably slower than industry standard to feel gentle and soothing.

In the example below, I show how I tweaked the timing of the animation for opening a meditation guide. The original animation is based off the recommended speed in Material Design. However, as this is a meditation app, I slowed the speed down by about half to achieve the desired feeling.

original timing for opening a meditation guide

Original timing

revised slower timing for opening a meditation guide

Revised timing


Effects and Plugins

I limited the effects and plugins to those that would contribute positively to the overall user experience without distracting the user from their goals.

Text effects

Most of the additional effects were used in the preloader animation, where I could more freely express the brand values without interrupting the user during a task. I started with some simple text effects where the characters of the logotype and tagline fade in and scale up in sequence.

gif of preloader with text effects
Preloader animation with text effects

The second part of the preloader animation only occurs when the app requires more time to load. This animation shows the lotus bud logo swaying in a breeze while glowing orbs float by.

Bending effect

I used is the CC Bend It effect to make the lotus bud logo look like it is swaying in a breeze.

Wiggling path

A slow random wiggling effect was applied to the glowing orbs that float across the screen for more natural looking movement.

Flickering text

To pair with the orbs, I also added a text layer effect from the Animation Composer 3 plugin called "Wiggly Fade Characters" which adds a flickering effect on the logotype characters.

gif of preloader with bending, wiggle, and text effects
Preloader animation with text effects
Four-point gradient

Finally, I used a four-point gradient animation as the main visual animation playing during the meditation guide. The movement is slow but not uniform, which lends a natural and organic calmness. The blurry quality does not allow the user to focus too much on the animation, and instead encourages them to focus on the meditation guide itself.

To signal the beginning of the guide, text fades in and out. This effect was implemented via the TextEvo plugin.

gif of 4 point gradient animation while meditation guide plays
Meditation guide playing animation

By selectively using these effects, I could refine the UI animation and make it more fully align with the branding values and overall vibe.


The Final Design

Once I finalized the UI animation for the app, I compiled it together with some 3D camera work into the presentation video below.


What went well?

  • Helpful to use Material Design's guide to motion as starting point for choreographing standard elements, then tweaking the timing to fit a meditation app.
  • Detailed storyboards created a road map and allowed for a more efficient workflow

What could be better?

  • Plugins were not introduced until later into the course. Certain tasks and effects could have been achieved more quickly with plugins.




Coming soon!