About

Zendo is a meditation app that provides its users with a platform to easily access their desired meditation practices. It gives a clear overview of all the available meditations. Users can browse, play, and save their favorite meditations to their user profile. The target users are 25 to 40 year olds who are having problems with stress and need an easy and convenient tool to unwind and calm their minds after a stressful day.

My Role

UI Designer
Motion Designer

Tools

Adobe XD
Adobe Photoshop
Adobe Illustrator
After Effects

Timeline

3 Weeks

The main goal was to create and animate user interfaces for a meditation application. This included determining three core brand values for the app (as well as developing a style guide based on these values), designing high-fidelity app screens based on four mid-fidelity wireframes provided by a UX designer colleague, and creating storyboards for user interface animations and applying them to the final app screens.

The initial step in the design process was to choose three core brand values and develop a style guide around them. But before I could do that, I needed to do some research on similar apps like Calm and Insight Timer that already existed. I was looking for ideas not only for the graphics, but also for the animations they utilized to convey their brand and key values.The following are the core values I wanted the app to represent:
‍
Soothing, soft and minimal.
‍
I created the color palette, typography, iconography, and illustration style based on these values.

I was provided with four mid-fidelity wireframes by my UX designer colleague, which I transformed into high-fidelity wireframes using the style guide I created.

The final interfaces were built with the goal of being as user-friendly as possible. Because this is a meditation app, I wanted it to be easy to use and not too overwhelming so that users could concentrate on the meditation techniques rather than being flooded with too much information.I wanted to employ motion to keep the user interested and gently guide their attention, therefore I chose a basic and minimal aesthetic for the app.

For my app, I decided to incorporate animations that are going to help guide the user's attention without overwhelming them or making the user experience unpleasant. I chose simple animations, that don't get in the way of the app's main aim, which is meditation and relaxation. The motion is smooth, leisurely, and natural-looking, evoking a sense of tranquility.

Loading

You made it!

Meditation App

Screen Transtitions

Microinteractions

Logo Animation

Final UI Animation