top of page
swift gifts case study (2).jpg

Objective

Design and animate the UI for a meditation app.

mockuuups-samsung-galaxy-s20-mockup-in-the-garden.jpeg

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
Loading screen.png

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
Featured screen.png

Trigger: Click Home Icon

 

Meditations ease in with diagonal staging. Featured items ease in one at a time after meditations appear.

Exercise Screen
exercise screen.png

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

sleepmu.png
mockuuups-woman-holding-iphone-mockup-and-train-tickets.jpeg
mockuuups-mockup-of-smartphone-device-with-a-macbook-on-the-side.jpeg

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. 

bottom of page