Project Introduction

Project Brief Objectives

Identify core brand values for a meditation app.
Design 3-5 high-fidelity app screens (including color schemes and typography inspired by brand values).
Develop storyboards for user interface animations.
Apply animation to the high-fidelity app screens based on the storyboards. 
Prepare files for stakeholder presentation and handoff.

Project Brief Target Audience

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.

Roles for this Project

Brand Development
UI Design
UI Animation

High Fidelity WireframesHigh Fidelity Wireframes were developed in Adobe XD from mid-fidelity wireframes handed off for the project. The color palette was chosen with Calmly’s brand values in mind: calming, minimal, soft.

High Fidelity Wireframes

High Fidelity Wireframes were developed in Adobe XD from mid-fidelity wireframes handed off for the project. The color palette was chosen with Calmly’s brand values in mind: calming, minimal, soft.

Click Here for InVision High Fidelity Mobile Prototype

Storyboard: TransitionsAnimation was designed in Storyboarding before animating began in Adobe After Effects. Keeping the Calmly brand in mind, transitions focus on a slower, gentle animations for screen transitions to promote calmness in the user.

Storyboard: Transitions

Animation was designed in Storyboarding before animating began in Adobe After Effects. Keeping the Calmly brand in mind, transitions focus on a slower, gentle animations for screen transitions to promote calmness in the user.

Storyboard: TransitionsThe design features feedback for the user, such as, when a user selects the Favorites icon, the icon not only changes to a filled state, but changes color, so the user knows the Favorite screen will load.The TextEvo plugin was used to animate heading text on the Home and Favorites screen to slide in from right to left. The animation brings higher hierarchy to this text.

Storyboard: Transitions

The design features feedback for the user, such as, when a user selects the Favorites icon, the icon not only changes to a filled state, but changes color, so the user knows the Favorite screen will load.

The TextEvo plugin was used to animate heading text on the Home and Favorites screen to slide in from right to left. The animation brings higher hierarchy to this text.

Storyboard: Icon FeedbackThe design features feedback for the user, such as, when a user selects the Favorites icon on a meditation screen, the icon not only changes to a filled state, but also features a wiggle expression in Adobe After Effects, so the user knows the meditation was added to their Favorites.

Storyboard: Icon Feedback

The design features feedback for the user, such as, when a user selects the Favorites icon on a meditation screen, the icon not only changes to a filled state, but also features a wiggle expression in Adobe After Effects, so the user knows the meditation was added to their Favorites.

Storyboard: Logo RevealSince the main brand of Calmly is relaxing, an interesting animation that drew the user’s attention to the brand, needed to be simple and calm. Using an Alpha Matte Mask in Adobe After Effects, the Calmly logo will slowly ascend on the Landing screen out of the yoga pose.

Storyboard: Logo Reveal

Since the main brand of Calmly is relaxing, an interesting animation that drew the user’s attention to the brand, needed to be simple and calm. Using an Alpha Matte Mask in Adobe After Effects, the Calmly logo will slowly ascend on the Landing screen out of the yoga pose.

Retrospective

What Went Well: The final design is how I had initially envisioned the design to look, and effectively conveys the brand’s calming and soft values in color palette and animation. It also features all requirements as listed in the Project Brief.

What Can Be Improved: I want to become more familiar with Adobe After Effects and it’s features, so I plan to focus on some visual courses in the future, such as LinkedIn Learning, and some specific YouTube channels recommended to me from my mentor.