.jpg)
Objective
Design and animate the UI for a meditation app.
The Problem It Solves
Allows users to perform exercises that alleviate stress, free negativity, improve sleep and increase productivity.
Approach
Before designing and animating the app, I performed a competitive analysis to gain insight as to what other meditation apps had in common, what differentiated themselves and what they lacked. I determined that most did not focus on connecting with the user’s inner harmony. That’s where the name and app slogan came into play.
I used calming colors (soft purple and green) to reflect wisdom, spirituality, peace, support and well-paced energy. The animation speed is at a slower pace, invoking a steady, relaxing atmosphere.
Screen Animations
Loading Screen
Once Younity is opened, an animated loading screen sets a relaxing scene, preparing the user for a calming mediative journey.
Home Screen
Select a featured or meditative exercise to perform.
Exercise Screen
The scenic screen provides a soothing animation and atmosphere while users conduct their meditative exercise.
Library Screen
View recently completed or favorite exercises. Click on an image or icon to display more detailed options for a specific category. Once a favorite exercise is selected, a modal swiftly, slowly zooms in from right to left to provide detailed information about the category, and gives the user additional activities they can perform.
Storyboard
How the animations were drafted
Loading Screen
Trigger: Open App
Human figure and circle move up and down in opposite directions, but then come together in their original position at the end.
Bushes/plants slowly fade in once figure is done moving and put into position. The leaves will wave in the background.
Once the middle figure animation is complete, the YOU from the logo will swipe in from the left first. Then the Nity will swipe in from the right.
Slogan slowly fades in from left to right, setting the mood for the app.
Featured Screen
Trigger: Click Home Icon
Meditations ease in with diagonal staging. Featured items ease in one at a time after meditations appear.
Exercise Screen
Trigger: Click Play Button
Once exercise starts, and the play button is clicked, a circle will move in a wave motion at a steady pace.
Favorites Screen
When a category is selected from the favorites screen, a modal will perform 3D swipe in and flip from right to left.
Trigger: Tap on Favorites Icon
Meditations ease in with diagonal staging. Featured items ease in one at a time after meditations appear.
Trigger: Tap on Specific Category
When a category is selected from the favorites screen, a modal will perform 3D swipe in and flip from right to left.
Final Animation
How it all came together
Mockups
Retrospective
The biggest challenge I faced was patience. Animation requires a lot of trial and error, so I needed to be patient with myself, take breaks from time to time and regroup before testing and perfecting the animation. One instance where my patience was tested was when I discovered that I needed to separate design layers to pursue the animation I envisioned, specifically on the loading screen.
This project was my most challenging one to date. Every section included somewhat unfamiliar territory -- from adding timing expressions and extensions to creating 3D animations and LottieFiles. Even though I struggled to grasp the animation techniques early on in the achievement, I persevered and eventually created a project I am incredibly proud of.
For my next animation assignment, I would invest more time in examining tutorials and researching organization methods. This will save me a lot of time.