MentalHealth.gov Realignment

Creating a website experience that's comfortable, intuitive, and informative.

Background

For this project, we were tasked with finding a website that looked outdated and could use major improvements on its user experience. As someone with a passion for psychology and the importance of mental health, I chose to realign MentalHealth.gov. The first most important thing was figuring out what the website was missing and who I was designing for. Who are they? What do they need? How do they feel?

The original website clearly didn’t have enough resources, and it wasn’t easy or intuitive to navigate. For a place where many people were likely to be seeking help, the website needed to be friendly and easy to use. The final website realignment uses language in a more friendly and direct manner, and the final visual design is soft and friendly through its use of color, typography, and imagery so that it doesn’t appear too joyous or clinical. The website is easier and more intuitive to use due to its information hierarchy and grouping of pages and resources.

Overall, I wanted the website to feel comfortable.

Objective

Realign the existing MentalHealth.gov website to create an experience that it helps its users accomplish their needs and make them feel validated.

Project Type

User Experience, Branding, Web Design

Current State | Home Page

View live site

Creative Process

Skip to final project

Step 1

Empathy Maps

Step 2

Step 3

Step 4

Step 5

Breakpoint Planning
Style Tiles
Initial Vis Comps
Grid Planning

Step 1

Empathy Maps

Step 2

Breakpoint Planning

Step 3

Style Tiles

Step 4

Initial Vis Comps

Step 5

Grid Planning

Empathy Maps

Who would be using the site? How do they feel? What do they need?

Breakpoint Planning

How might the new site look on different devices? How can the new site be more accessible?

Style Tiles

How can the new site look softer and feel more welcoming?
Ultimately, I decided to go with the second style tile for a softer, more comforting look. The first one felt too bright and cheery, and the third one felt too clinical.

Initial Vis Comps

Figuring out how to apply the chosen style tile to the look of the website as a whole.
Mobile
Tablet
Desktop

Grid Planning

Planning how the alignment of elements change when moving from mobile to tablet to desktop.
Mobile
Tablet
Desktop

Final Design

Adobe Illustrator, Adobe Indesign, Adobe Photoshop, implemented in HTML5 & CSS3

Home Page

Mobile, Tablet, Desktop

Home - Mobile

Home – Tablet

Home – Desktop

Depression Page

Mobile, Tablet, Desktop

Depression – Mobile

Depression – Tablet

Depression – Desktop

What to Look for Page

Mobile, Tablet, Desktop

What to Look for – Mobile

What to Look for – Tablet

What to Look for – Desktop

Want a more in-depth look at the process?

View full length process book

Want to see a similar project?

Or something a little different?

Back to Top