Vibe — Mobile Design

Wisler Altidor
7 min readOct 21, 2023

--

The Challenge

The tool can be focused in any category that relates to personal wellbeing, such as (but not limited to: exercise and fitness, and meditation).
The only requirement is that it tracks the user’s progress and pushes them to commit to a healthier lifestyle.
The UI should reflect a fresh, updated image.

Client

The National Wellness Institute is an organization founded in 1977 with the mission of providing health promotion and wellness professionals unparalleled resources and services that fuel professional and personal growth.

My Team

Wisler Altidor — UX UI Designer • Ageliki Key — UX UI Designer

Duration

4 weeks

Tools

Figma, Maze, Coolors, Photoshop.

The Problem

Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle. I was required to conduct user research to understand people’s relationship with mental, physical, and emotional well-being in order to develop a tool that will drive them to action.

The Solution

We build a product that will motivate users to consistently meditate through celebrity guest to lead sessions and leveling system. Users will gain XP by using the app, following their routine, challenging other users, and partake in live sessions. User will be rewarded through leveling, and they can complete different challenges to earn awesome titles to display on their profile. Vibe will push users to come back to the app, whether it’s not to lose their steak, lose a challenge, or a quick workout users will be stay on top of their mental health.

Interviews

To initiate our project The team brainstormed on what our main focus would be. After analyzing different ideas, we agreed on creating an App that would focus on meditation with a twist. We wanted to create a meditation environment where users would be happy, proud, and motivated to be in. We decided our app would focus on meditation and celebrities. This case study will show the process, our thinking behind our design and what’s next.

Affinity Diagram

We had a lot of information from our interviews, we decided to break it all down and organize everything to be more digestible. We found several pain points, Lack of knowledge hands on help, meditation apps don’t work for her and low energy or problems sleeping.

Feature Comparison Analysis

Comparing each website’s features helped us think of functionalities our product must have and opportunities for new features. We looked at Headspace, Calm, InsightTimer, and Clubhouse

Brand Comparison Analysis

We created a brand comparison analysis to understand out competitors and how they occupied the market.

Market Research

Next, we looked at the market to see where we want to be and who would be out biggest competitor. We are the blue dot.

Personas

Meet Stacy, she is our persona for this project. She is a designer, she is constantly working, she a spiritualist, she has a lot of stress to deal with, and she wants to find a reliable and intreating way to decompress. She is frustrated because she has been Feeling down, not able to concentrate, low energy and have problems sleeping. She need learn how to take better care of her mental health.

User Journey Map

Our user journey map shows a day in Stacy’s shoes. What are some of her needs and what action she would take. We had several opportunities in which our app can help.

Moscow Mothed

We created a Moscow mothed to focus on primary feature that would motivate our users to meditate and create a routine.

Problem Statement & Hypothesis

Vibe was designed to help users establish a mental health routine. We observed that the wellness apps are not helping users consistently prioritize their mental health which is causing less people to nurture their mental health. How might we improve Vibe so that our customers are more successful.

How Might We

Next, we create out how might we statements to look at possible solution for our problem.

MVP

The VIBE app is the ideal full-service app for mental and physical wellness. From first time meditators to veteran meditators. Create mental health routines via self-guided and pre-corded sessions. The more you meditate the more in tune you are with yourself and the more XP you earn. After each session you are that much closer to becoming your own mental health guru where you can lead meditation sessions like the celebrities!

Value Proposition

We used this methodology to help us understand how our product is tackling our user’s pain points. What will keep them coming back to keep a health routine.

Jobs to Be Done

This is our product theory.

User Flow

We created 2 user flows to out line the focus of our app. The first flow would be for a user to join a live session. The last one is for a user to create a weekly routine.

UI Design

Low-fi Wireframes

The team stared our designs with some concept sketch. They are a valuable process to product building, they will put your team on the same page, the yare fast and easy to change.

Mid-fi Wireframes

After agreeing on a design, we build our mid-fi wireframe. The reason we moved to mid-fi so quickly is because our deadline was getting close, really close. We decided the mid-fi test results would be more valuable. We tested out mid-fi through Maze for quantitative data and we did in person testing for qualitative data. We outlined the changes we made in red.

Mid-fi Test

After testing our mid-fi, we got a lot of feedback on some functionalities that were hard to find, like the settings. We review our feedbacks and brainstorm on how to implement the changes.

Branding

We did Visual Competitive Analysis for our 2 biggest compactors. We looked at key features and elements they used, if it is something that would be viable in our app, we would build our own take on it.

Moodboard

After that, we put our Moodboard together for desirability testing and our color palette.

Style Tile

We created this style tile using our color palette and the fonts we will be using throughout the app. When we were choosing our fonts, we wanted to use 2 fonts that would be easy to read and compliment or style. We use Monoton for our logo and Roboto for text to compliment it.

Design Systems

Hi-fi Prototype

Building this App was an amazing achievement for me and my partner. We had to push ourselves beyond our limitations. We build a product that will motivate users to consistently meditate through celebrity guest to lead sessions and leveling system. Users will gain XP by using the app, following their routine, challenging other users, and partake in live sessions. User will be rewarded through leveling, and they can complete different challenges to earn awesome titles to display on their profile. Vibe will push users to come back to the app, whether it’s not to lose their steak, lose a challenge, or a quick workout users will be stay on top of their mental health.

Test it yourself!

You can test the prototype yourself via this link.

Next Steps

Do more user testing!
Dark Mode!
Update our emojis
Add wave feature

Thank you for your time.

--

--

No responses yet