BodyMind Meditation App
Find inner peace
This is my final Student Project for the CareerFoundry UI Animation Course. 
The objective was to design 3-5 main screens for a meditation app based on pre-provided wireframes. 
The target users for the meditation app are young people who're having issues with stress and want to find smart solutions to use at home and/or at work. They are from 25 to 40 years old and avid smartphone users.

Role: UI Designer, Motion Designer
Time frame: 8 weeks
Tools: Figma, Adobe XD, Adobe AfterEffects, LottieFiles
Competitor Analysis
First, I analyzed two competitor apps, "Calm" and "Balance" to understand how motion design contributes to the mood of the app and choose some elements to incorporate into my own animations. 
Calm
In this app, motion design is used to support the calming, soothing feel of the application. Every screen transition is well-staged and the elements seem to float in with very soft easing as if they were in the water. This liquid look is something I would like to emulate in my application, with a similarly fluid staging. I also really like the simple animation for the breathing practice section of the app, where a large ellipse seems to grow and shrink softly, simulating a deep breath. 
I would like to include this in my splash screen, letting the ellipses surrounding the logo grow and shrink as the words “Inhale” and “Exhale” are shown alternatingly.
Balance
Balance also includes some very clever animations that simulate the rise and fall of the chest while breathing. The main screen has several shapes scattered around the center heading, all of which move apart and back together simultaneously in a slow, breath-like pattern. Once a meditation is selected, the app asks you to close your eyes and then an animation makes it look like a large eye is shutting. Finally, during the meditation, soft, wavy lines animate smoothly up and down, which has a calming effect on the viewer. 
I would like to utilize this calming effect by letting the background of my animation screen gently animate between color gradients.
Core Values
Next, I decided on three core values to express the mood of the application and how it should make users feel. 
Style Guide
Before designing the high-fidelity screens, I decided on a basic style guide.
Typography
I decided on two simple, sans-serif fonts that look clean and have high legibility without distracting from the actual content. 
Color Palette
For the color palette, I wanted to stay close to my core values of DELIGHTFUL, PEACEFUL and NATURAL. I wanted a color palette that would be reminiscent of a sunset, so I chose deep purples and blues with a soft coral orange as an accent color for the splash screen and meditation screen. The background of the main screens is a soft gradient from the off-white to the pale blue. 
High Fidelity Screens
Using inspiration from competitor apps and my newly defined core values, I then went about designing the final high-fidelity screens. I first designed the screens in Figma, then redesigned them in Adobe XD in order to facilitate exportation to AfterEffects.
Storyboarding
Before beginning the actual animation, I sketched several storyboards for the page transitions as well as microinteractions, received feedback, and iterated upon the storyboards until I was satisfied. 
Make it feel natural
All elements will move with a soft easing, mostly ease-out when entering the screen and ease-in when exiting. This should mimic the movement of objects in the water, moving against a slight resistance that then gives way. The motion should feel natural and calming.
Set the stage
When the user is entering a new section of the app, the screen elements enter in groups according to their hierarchy. First heading and subheadings appear, then card elements slide in from offscreen according to their importance. All transitions are limited to 0.6 seconds maximum.
Keep orientation
When navigating between top-level screens, the user will understand where they are by the fact that the elements slide onscreen from either the right or the left depending on where the user is navigating to. When opening a meditation, I decided against staging the element as an expanding card because I want to work with a background gradient and it also should feel like the user is in a different experience mode, not simply another, lower-level part of the application.

Working with AfterEffects
Now it was time to start the actual process of bringing my designs to life with motion. 
I worked in Adobe AfterEffects, creating separate compositions for each screen transition as well as for the top bar and tab bar. Finally, I assembled all the elements into one continuous composition. 
Effects and Expressions
Adobe AfterEffects includes many tools that help streamline complex motion design processes. For example, there many precomposed effects and expressions that can be integrated into new compositions. Here are a few that I used in my design: ​​​​​​​​​​​​​​
4point Gradient effect
For the meditation screen, I decided to use the 4point gradient effect to create a smooth transition of colors in the background, flowing into each other in a liquid appearance.
Countdown / Math.floor() 
I chose this expression, which I will now call “Countdown”, to use during the meditation when the second counter keeps on going down. I had previously animated each text layer separately to fade in and out every second and be replaced by another text layer but that was very tedious. 
I searched for a function to help me count down the seconds and found the following code in a youtube tutorial. Using this expression allowed me to link the source text to a slider and set keyframes for that slider at the beginning and end of the composition, thereby manipulating the countdown without having to animate a new text layer every second. ​​​​​​​
LoopOut() 
I was searching for an expression to draw attention to the “mindfulness score” on the Profile Page, but when I tried Wiggle it seemed too random and distracting. So I searched for an expression to make something pulsate and found a suggestion using the LoopOut() expression to pulse between two keyframes, either higher and lower opacity or - in my case - a larger or smaller scale. I think that this pulsing animation is useful for catching the user’s eye without being overly distracting or causing discomfort as it doesn’t have such high animacy. 
3D Animation
To add some more depth to the animation, I chose to add a 3D animation for the transition between the two different tab bars. This animation occurs when the user clicks on a meditation card and the meditation screen opens up. 
The tab bar then flips along the X-axis, rotating to show the alternate tab bar with meditation-screen-specific tab items. This animation makes it clear that this is still a tab bar but differentiates it from the one on the main screen while showing their relationship to each other.
Logo Animation
Now it was time to animate my logo. 
I chose to begin with the brand name, BodyMind, have the dot over the i lift up and drop down, as if into a pool of water, sending out ripples.
It then bounces back up and turns into the head, arms and legs of the meditating person. 
The water metaphor (dripping into ripples) will convey the core brand values natural and peaceful, whereas the surprise of having the little ellipse morph into the full logo - looking like a seated person - will convey the value delightfulness.
External Tools
Animation Composer 
I used the Animation Composer plugin mostly to simplify my workflow. I used the Keyframe Wingman tool to smooth out all the easing for my screen transitions, especially when it comes to elements entering or exiting the screen. I also employed the transition shifter to smoothly stagger the entrance and exits of card elements on my homescreen as well as the appearance and animation of the growing and shrinking ellipses on the splash screen. Then, on the meditation screen, I made use of the transition presets (Gaussian blur) to further smooth out the transition of the various elements entering the screen. 
Textevo2 
I used the Textevo2 plugin to animate the entrance and exit of the text layer on the splash screen, the one that reads “inhale” or “exhale”. The animation stays the same, but this time I am using the anchor point parameter instead of the position parameter to let the text layer move up and down. I have also added a slight skew to the letters upon entrance and exit.
Retrospective
This project was a very valuable learning experience for me. I got to explore many different features of Adobe AfterEffects while learning about effective motion design techniques and how to employ them in my projects. I feel that I have now have a new understanding of how motion affects user experience and can have a big impact on how enjoyable a product is to use. 
One of the most challenging aspects of this process was the logo animation. I chose a rather complex motion design to bring the logo to life and went through many iterations before I was satisfied with the outcome. In the future, I would probably choose a more simple logo animation that is easier to design to perfection, making use of AfterEffect's many preexisting effects and presets. 
Another thing I will do differently next time is to break down the design into it's smaller compositions straight from the beginning. For example, I realized several weeks into this project that it would be more useful to design the screen transitions separately from the tab bar and top bar. Once I separated these sections into distinct compositions, the workflow became a lot more manageable.

You may also like

Back to Top