Flow

Meditation App

Overview

The Project

I was tasked to design the UI, branding, and micro-animations for a meditation app. I was provided with low-fidelity wireframes for 5 screens to use in my designs. My role was the sole UI designer and animator on the project. The project timeframe was 1 month.

Target Audience

The target audience for the app was 25-40 year olds who are having issues with stress and want to find smart solutions to use at home and/or at work.

A mockup of the meditation app showing 4 screens

Branding

The first step was to design the branding so I can begin working on the UI Design.

Taking inspiration from similar apps

I looked at similar meditation apps and took inspiration from the designs that worked well. I included nature imagery and a dark background that was easy on eyes. I also found that many meditation apps had long meditations making it difficult for beginners to learn to meditate. This led me to the problem statement that I planned to solve through this app.

Busy people seeking to learn to meditate have a hard time starting because the process seems long and tedious

In an ideal situation, I would also like to have user research to reference but this was out of the scope of this project.

Experimenting with color and composition

I experimented with composition and color and came up with the following logo. The logo had smooth lines and the w of Flow was made slightly irregular to mimimc how nature is not uniform. The idea is to show that meditation does not need to be perfect.

The name of the Flow app surrounded by a dark blue color with a river icon.

A river themed meditation app for busy professionals who don’t typically meditate.

The app provides an on-the-go library of short mediations between 1 and 5 minutes.

Core Values

Relaxing
Nature
Simple

UI Design

I was provided with the following low fidelity wireframes.

Color Scheme

I choose a simple blue monochromatic color scheme to provide a sense of calm and simplicity.

Iconography

Meditation Icons

I decided to use icons for each meditation rather than photos to keep the app simple and maintain the monochromatic color scheme.

A selection of nature based icons in light blue

Special thanks to Tanya Magdieva, Dando, Friedrich Santana, Melissa Schmitt, ruliani08, Humberto Cesar Pornaro, Ker'is, boggu and Aisyah for these icons from the Noun Project.

Menus

I designed menu icons below with smooth lines and a sense of movement. The meditation menus use darker colors to not distract the user during meditations (top row of icons). The home menu icons are brighter so they are visible on the home page (bottom row of icons).

High-Fidelity Wireframes

I used these elements to put together the final screens.

Animations to highlight key features

I used After Effects to design the final animations.

Revealing home page features

Starting out with staging, I designed the reveal animation for each of the screens. The staging guides the user through the layout of each screen. This animation plays only when the app is opened to help users slow down and not be overwhelmed by all the elements on the page.