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 siteCreative Process
Skip to final projectStep 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.
Grid Planning
Planning how the alignment of elements change when moving from mobile to tablet to 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 bookWant to see a similar project?
Or something a little different?