MIND OVER MATTER

Overview

Platform: Responsive Website

Design Tools: Sketch, Figma, Usability Hub, Pen & Paper

My Role: Visual Designer

PROJECT SCOPE

Who is Mind over Matter?

Mind over Matter is a non-profit organization that focuses on making mental health resources available to students in need.

Who are the Users?

Mind over Matter focuses on reaching high school and college students who strive for balance in their health and wellness. MoM believes that giving young people access to healthy coping mechanisms for stress and anxiety will have a positive impact on their lifelong mental health. High School and College students are the target audience because they bare a large burden of course work which research has shown causes high levels of stress.

What is the Problem?

Students are stressed and overwhelmed with their school workload. They need an outlet for mental health resources so they can be able to manage their well-being and have a better quality of life.

Design Goals

Make mental health resources accessible for students (ages 13-25)
Design a simple and memorable user interface to help Mind over Matter retain longterm users
Develop a brand that is honest, approachable, and calming in the eyes of community it serves

DEFINING THE BRAND

Assessing the Competition

As I began to explore the mental health resource market, I found that most mental health resource site follow certain UI patterns:

Utilization of white space to keep screens clean and easy to read
Bright color accents that evoke a fun and upbeat tone in the design.
Multistep on-boarding processes that might intimidate users
Premium paid features that might alienate users

Mind Over Matter (OG) .png — **Current Healthcare Sites and Apps**

Luckily, Mind over Matter refuses to charge for its resources, so I wasn’t worried about alienating users with hidden fees. My analysis of the MoM’s competitors showed me successful UI patterns I wished to follow: utilizing white space to organize screen elements and bright colors to accent calls to action. However, I had also learned valuable lessons from our competitors mistakes: I would focus on designing simple, single step ui flows to keep users engaged.

Finding Inspiration

From my analysis of other mental health resource sites and apps, I knew that I wanted to utilize white space to keep Mind over Matter’s content clean and digestible. I wanted to embrace a color palette and typography that would convey a friendly tone and inspire a sense of calm in MoM’s users.

Color

After experimenting with a few color palettes, I decided to go with a blue color palette. While blue does follow the color pattern of most mental health resource sites, I found that other color palettes distracted the user and may confuse the purpose of site. I decided to focus on a blue color palette, but use shades of blue that were subdued and didn’t distract from Mind over Matter’s content.

Cyan, Malibu, and Cloud Burst Blues

In color theory, blues evoke feelings of:

calm, tranquility
trust, honesty
support, stability

Typography

In my analysis of Mind over Matter’s competitors, I found that serif fonts lend themselves to a more formal and antiquated aesthetic. I wanted to convey a more friendly and modern voice and relate to a younger audience, so I decided to find a sans serif font for MoM’s typography.

I also knew that MoM’s text needed a strong, cohesive visual hierarchy across all of its screens, so I stuck with just one font family: Montserrat.

Example of Montserrat Header and Body font. — **Example of Montserrat Header and Body font**

Due to Montserrat’s 18 different font styles, it was easy to find distinct weights and sizings within its font family to create a strong hierarchy between my headlines, subheadings, and body text styles. At the same time, using one font made each section of text feel cohesive within each screen and developed a unified voice across Mind over Matter’s site.

Defining the Style

With my color palette and typography selections in mind, I designed a style tile that defined the exact colors, font size and weights, and images I planned to use to communicate Mind over Matter’s brand to its users. The style tile allowed me to make any final adjustments to my selections before solidifying MoM’s style and beginning work on screen mockups. (Note: I added my Mind over Matter Logo design to my style tile later. See Finding the Mark for background on the logo.)

Making the Mark

Once I had a firm grasp on Mind over Matter’s brand and style, I began work on creating a logo that would mirror the brand I had developed. It needed to be a symbol of MoM’s ideals of peace, honesty, and support.

I decided that a character-based logo would be the most professional approach and would reflect the simplicity of my style tile. I started with the organization’s name: Mind over Matter and realized that the meeting of the lines in “M” looked very similar to people holding hands. Holding hands is a very human symbol of community, support, and love so I ran with it.

Since both Mind and Matter start with “M”, I was able to merge my logo into the start of both words, using a line separation to symbolize “over”. I incorporated the same blue color palette from the style tile so that the logo would feel at home within Mind over Matter’s brand.

My Final Logo

Insights

Consistency is key when developing a brand and style.
Less is more when deciding upon typography: stick to one or two font families, preferably families with many styles.
Experiment, experiment, experiment!
“If it ain’t broke, don’t fix it!” Sometimes a design pattern is a pattern for a reason and not breaking the mold will make your design familiar and trustworthy in the eyes of the user.

BUILDING MOBILE FIRST

Bottoms Up!

I was very lucky that my user experience designer built mobile wireframes before moving on to desktop. It is always easier to start small and scale layouts out from mobile screens to desktop screens than the other way around. Looking at my partner’s screens, I appreciated the use of negative space and card layouts. Each screen appeared very organized and easy to read through. I decided to keep much of her designs intact in my mockups.

UX Designer’s Wireframes

Since content is king in resource site design, I decided to keep Mind over Matter’s user interface subtle by:

Keeping the background and screen headers white and utilize white space
Using color to accent calls to action and emphasize key cards on screen
Rounding edges of cards and buttons for a more friendly and subtle aesthetic

My First Iteration of Mobile Mockups

User Testing

With my first round of mockup screens complete, I needed to test the user interface with users. I conducted a 5 second test and a 1st click test on usability hub to check how my UI choices resonated with users. I needed to know if my screens effectively conveyed Mind over Matter’s purpose and brand.

5 Second Test

The 5 second test results illuminated a few problems with the first iterations of my mockup screens:

The homepage call to action doesn’t convey MoM’s purpose: mental health resources
The homepage hero image should focus on students, not on a school’s campus

1st Click Test

The 1st click test results communicated 2 key issues found across all of my mockup screens:

the hero image is too large and takes up almost all of the mobile viewport.
- Users don’t see the next section of the screen below and don’t realize that they can scroll down for more content.
the call to action in the hero images is too large and leads users to believe it is clickable/tappable

Moving forward, I knew that I would have to revise my hero image and its call to action. I needed to focus more on my audience: students, and less on school health programs. I also needed to resize the hero images and their call’s to action so they took up less real estate and didn’t distract from the rest of the screen’s content.

Final Mockup Iterations

1st Mobile Iteration

Final Mobile Mockup

Taking the user test results into consideration, I made all the hero images smaller so that the next section of content is visible in the mobile viewport and users will know to scroll down on each screen. I also made the hero image text smaller and less bold so the text looks less clickable/tappable and is less distracting on the screen. I changed the homepage call to action so it is very clear that Mind over Matter is a mental health resource site. Each screen’s title now matches the navigation menu links.

Desktop Mockups

PLANNING FOR THE FUTURE

Style Guide

With Mind over Matter focusing on mental health resources, its content will constantly be updated which means screen designs will be iterative. Knowing that I most likely won’t be the last designer to create MoM’s screens, I developed a comprehensive style guide archiving every element of the UI I implemented and explaining MoM’s tone and brand from a designer’s perspective.

Constructing the style guide not only allowed me to build a foundation for future designers and developers, it also validated my design decisions throughout this project. I realized the importance of my research and brand exploration and how much it influenced my mockup designs.