Meditation App UI Case Study | UI Designer: Melissa Lam | Mentor: Sherman Wellons

Objective

To create an avenue for users to gain a better understanding of themselves, find inner peace, and destress through an easily accessible native mobile app.

Overview

The goal is to create a friendly and relaxing experience for the user through the implementation of UI Animation. This was a personal project for the Career Foundry UI Course.

Hypothesis

In the current economic climate, there has been an ever increasing amount expectations for potential employees as well as from an individual’s parents to meet specific standards. With inflation, unemployment rates, family circumstances, and more, there is not one person that is invulnerable to stress. Many succumb high levels of stress, anxiety, and even depression. Studies show through mindful meditation results in general wellness, improved energy, and higher memory/concentration. Meditation app easily provides a hub to cater to those issues.

Cramer, H., Hall, H., Leach, M., Frawley, J., Zhang, Y., Leung, B., Adams, J., & Lauche, R. (2016). Prevalence, patterns, and predictors of meditation use among US adults: A nationally representative survey. Scientific Reports, 6, Article 36760. https://doi.org/10.1038/srep36760

Core Values

Mindfulness | Relaxed | Empowering

Storyboarding

After the initial drafts of the animation storyboards, 5 individuals were asked to give their feedback on their understanding of what each animation was to accomplish and whether it was suitable for a meditation app. Missing keyframes led to confusion on 1-2 storyboards, therefore revisions were redrawn and reevaluated by the same individuals.

A1 Revision made: Logo remains stagnant and the loader now bounces back and forth.

A2 Revision made: The staging was quick and displaced a large distance. Meditation cards now scale up a small percentage to be subtle and relaxing,

A3 Revision made: Search button now flips to give the user feedback.

A4 Revision made: Heart now rotates side to side with a confetti splash to make the animation more noticeable to the user.

A5 Revision made: Duration was increased to match the voice of the app [relaxed].

A6 Comments: Easy to understand and makes sense.

Typography

Color Palette

Techniques Utilized

Don't get in the Way | To ensure the app isn't taking away from the experience of the app. The duration of animations are minimal but fast enough to make it look smooth and not alarm any user that would take away from the values of a meditation app. This was done so that users don't wait too long before they can proceed through the app yet still be guided through the app in where to look and how to navigate through the app.

Make it Feel Natural | All animations are manipulated to not be linear to make a pleasant soothing experience to users that are hoping to relax and unwind.

  • Easing: Majority of animations will utilize easing in and out.

  • Anticipation: Used for the splash screen to show that the app is loading and that the app will soon move forward to the next frame.

  • Stretch & Squash: Stretch will be used for the transitions between frames to give a unique and appealing interaction that isn't time consuming.

  • Arcs: Were not utilized as the quick motion doesn't suit the values of a meditation app that should all be soft and calm.

Setting the Stage | Used to establish a hierarchy on each frame to make it easy to digest for the user.

  • Staging: Used on the favorites page and home page to break down the page into easy to identify parts.

Keep Continuity | Utilized for the search bar so the screen is not too cluttered by manipulating other elements to fit in a search function.

  • Transformation: The search bar will expand to provide the user a place to type keywords for their desired meditation.

Keep Orientation | Only scroll and overlay were used to make a clear distinction in the relationship between the screens and to fit more elements onto the screen. Minimal scrolling is used for accessibility reasons to not cause any dizziness and headaches.

Guide Attention | Awaring is not utilized as it would be alarming to the user when that is not the purpose of the app. The purpose of the minimalistic design with pleasant pastel background is to not overwhelm the user.

Thank you for stopping by!