MindfulBody

Project Overview

MindfulBody is a mobile-first website offering personalized health optimization focusing on:
‍
Nutrition: recipes + meal planning
Fitness: workout routines + scheduling
Mindfulness: meditation + breathwork
Sleep: strategies + tracking

I chose to design a website focusing on health optimization because I have been challenged with a number of acute and chronic health conditions and have been inspired to prioritize my own health and well-being.

Problem + Solution

The problem with existing health-focused platforms is that they can be challenging to learn and navigate, and many don’t offer customizable ways to access the features most important to users.

The solution is to design a mobile-first website focusing on health optimization that is easy to use and offers valuable information as well as actionable resources.

Research Goals + Methods

My research goals for this project included:

Explore existing health-related platforms
Understand the range of resources currently offered through these platforms
Discover limitations or gaps among current platforms
Assess how a sample of users currently manage their healthInquire about challenges or pain points of potential users
Evaluate possible features to include in my design

My research methods for this project included:

Competitive analysis
Market analysis
User interviews
User surveys
Card sorting

Competitive Analysis

I analyzed 28 health-related apps and websites based on the type of platform and the features offered.

Affinity Mapping of User Interview Data

Data from user interviews was organized and prioritized, which helped to identify the most important items for development, such as ease of use, simplicity of design, and customization.

Card Sorting

Card sorting reveals insights into how users think about and organize the information that will define the structure of the site.

User Personas

Creating user personas helped me to empathize with and better understand the needs of the user. This helped to inform important design decisions, such as which features to prioritize, how to structure and organize the site, and what the visual design should look and feel like.

Project Goals

It is important to consider how project goals intersect with business and user goals.

Feature Roadmap

The feature roadmap defines and prioritizes the features that will be included in the design.

Sitemap

The project sitemap outlines the information architecture for how the site will be constructed.

Storyboard

Creating a storyboard helps to visualize the needs of the user beyond the scope of the digital product.

User and Task Flows

User and task flows are critical to designing the best possible user experience and define the navigation and structure of the site.

Mood Board

Borrowing from other platforms and nature, I chose a visual design featuring blues and earthtones which represent health and vitality.

Low-fidelity Wireframes

I created low-fidelity designs using Procreate which allowed me to quickly iterate on several ideas before moving forward.

Digital Wireframes

Bringing the design into Figma allowed me to refine layout decisions and create the overall visual structure of the site.

Typography + Color Palette

The typography and color selections represent a vision and design aesthetic that is clean, modern, calming, and natural.

Logo

The logo was inspired by the concept of ikagai, and represents the interconnected elements of health.

Components + UI

Icons and UI components are the building blocks of the visual design.

High-fidelity Wireframes

I continued to refine my design decisions with the development of these high-fidelity screens while also planning for interactive functionality.

High-fidelity Prototypes

Creating prototypes allowed me to test the interactions of the design on a mobile device.

Usability Testing

Data from user testing revealed opportunities for modifying the design of layout and navigation elements to improve usability. The goal of my usability testing was to evaluate the ease with which users are able to navigate the platform.

Final Designs

The final designs incorporated feedback from user testing with changes to layout creating more space, to navigation in simplifying the flow, and in greater consistency with the overall design across all screens.

Conclusion and Learnings

This was a fun and challenging project that was inspired by a personal health challenge and allowed me to learn and grow as a designer.

I really enjoyed the research phase of the project, and appreciated the feedback and insight that participants shared.

The testing and iteration phases of the project are so important in the refinement of the design in both form and function

MindfulBody

MindfulBody

Thanks!

Drop me a line!