(Clickable prototype above.)
Results
A mental health tool that post secondary students can access to:
- Learn about what depression and anxiety is
- Understand the next steps they can take to manage their symptoms
- Take a test to see if they have any anxiety and/or depression symptoms
The Problem
During my years as a college student, I learned that there were post-secondary counselling services that were available to me if I ever needed them. I also learned that there were many students out there who had no idea that this service even existed.
In other words, students struggled with various mental issues that the counselling office could help them with for free. I started thinking: what other solutions were students unaware of? But when I started researching for answers, I realized researching was going to take me longer than any student had time for.
So, why wasn’t there a tool on the internet that could give you solutions for your mental health struggles?
The Solution
Design a website that post secondary students can access to understand what depression and/or anxiety is, learn about possible solutions and be able to take a test to see if they have any symptoms.
Tools Used
Adobe XD (for the final deliverables)
Illustrator (for the illustrations)
Pinterest (for inspiration + moodboard)
Your Approach
The first time I designed Illuminate Your Way, I wanted to design a tool for post-secondary students who didn’t know if they needed to go to counselling. Therefore, the focus was on the quiz section of the website, where students could take a depression/anxiety test for their symptoms.
This time, I focused on designing a tool to help post secondary students navigate their own mental health and inform them of the choices they could make next. On the design aspect, my number one focus was information architecture – the user needed the right content designed the right way. The quiz section was left unchanged except for its overall redesign.
Each Phase of Work & Deliverables
1. Transfer From Previous Version
Since I was approaching this project for the second time, I had to review the first version of Illuminate Your Way and decide what needed to leave or stay. I had experimented with a few versions of the project after I’d designed the first version, but I was not serious about a redesign until I produced a homepage for my Daily UI project (prompt #3).
It was then that I decided the project needed a rebranding and a new resource section, while the quiz component would stay.
2. Research (survey + personas + journey maps)
I took my research from the first version and expanded my knowledge base. Most mental health websites had a resource section that focused on symptoms, lifestyle changes, and treatment options. I interviewed post-secondary students and asked them about their experiences with mental health resources. All of them said they had either anxiety and/or depression and they knew somebody who did. Most said that reading about symptoms would be the first thing they’d look for. Half of the interviewees had never used a mental health resource, while the other half had.
From the interviews, I designed two personas: one for depression, and one for anxiety, then followed that up with two respective journey maps. The thoughts and feelings of a depressed student versus an anxiety student will be different, so examining the problems of each in separate maps helped to define early pain points. The student would already be having symptoms before they found Illuminate Your Way, so the website needed to be as easy as possible to navigate and scan through.
3. Planning (user flow + sketches + wireframes)
The resource section would need five sections: symptoms, tips, recommendations for apps/websites, counselling/therapy, and treatment options. The user flow gave me a visual of how the user would navigate Illuminate Your Way. Everything needed to be clear cut and easy to find for the stressed out user.
In the sketching stage, I quickly created rough sketches. The lightbulb branding and the colour palette from the original project and Daily UI prompt would be kept, so I simply needed to decide a possible layout for the resource pages and the quiz section.
These layouts were defined in the wireframe stage. The quiz was given a new layout: instead of one long questionnaire, each question was given a page. Each page in the resource section had a purposeful layout – what would be the best way to present this information to the user? The ability to scan was key here, as no student would have time to read every single word on each page.
4. Design (visual design + moodboards + details)
Illuminate Your Way v.1’s original branding was about illuminating your way through the darkness of mental illness, hence the lightbulbs. The colour palette consists of dark blues to contrast against the glowing lightbulbs, which was received positively in the test group. The moodboard shows the mood and aesthetic of darkness and lightbulbs illuminating the pathway that I wanted to capture in the website’s design.
Another focal point of the design was the content design. How could I design for lots of content and not overwhelm the user? I used card design so that the user could expand boxes of information while scanning headlines, and divided the information into scannable sections.
I also included small guiding tips into each quiz question. Some users might not immediately click on the resource section, or they may not immediately know anything about depression or anxiety, so each tip was written for the user who might need a little bit more information in order to answer a bit more accurately.
Challenges & Key Learnings
The biggest challenge I faced with this project was information organization.
- Designing For Content: Mental health is a complex and broad subject. It can become very dense very fast, and content heavy websites can run the risk of information overload — too little white space, too many words (with little readability). Card design helped me to organize the information in each page while letting the user quickly scan and expand sections they were interested in. Since dummy text is difficult to design with, I wrote content for the mockups as I could so that the design would be as realistic as possible. All content featured in the mockups is backed up by research.
- Redesigning A Previous Project: Although I loved the first design of Illuminate Your Way, it had many faults: poor information organization, clunky design, the illustrated lightbulbs were sometimes hard to see, and there was not enough content in certain pages. Part of the challenge was choosing what parts to redesign and what parts to leave alone. In the end, the quiz remained unchanged but the website got a new rebranding, and a brand new resource section.
Project Credits
Back Arrow icon icon by Icons8Marker icon icon by Icons8
Journey Map Template by Geunbae “GB” Lee