Mental Health Kokua (MHK), a nonprofit that provides mental health services to individuals in Hawaii, celebrated their 50th anniversary in October 2023. To commemorate this milestone and better serve its users, they sought to revamp their their outdated website.
Originally a student project with DesignLab's UX Academy, I collaborated with their Director of Information Technology to design a responsive website for MHK based on their needs and goals.
After my school project was completed, I was invited to continue working with MHK to implement the designs into a live website on Wix.
At first glance, it was easy to see that the website is old. However, an in-depth stakeholder interview with the Director of IT and UX audit of their old website revealed the following issues:
It was hard to get a sense of where things are when looking for a service.
Their website had a LOT of important but redundant information.
There was no sense of hierarchy so you didn't know where to look first.
How might we streamline the MHK website to efficiently guide users looking for specific mental health services?
I conducted a closed, unmoderated card sorting activity with 15 users to see how they would organize the categories from the old website. The results helped me develop the website's new information architecture.
.png)
To commemorate their 50th anniversary, I strategically used colors and fonts to develop MHK's brand identity.
.png)
The original MHK colors were the two shades of green above which they wanted to keep. Green fits their brand as it symbolizes good health and new beginnings for their patients.
I incorporated complementary shades of blue to convey feelings of calm, trust, and peace for their users. The brighter blue colors also celebrates their milestone, infusing a fresh and inviting atmosphere to their website.
.png)
In terms of the font, the original website used a handful of of different fonts. To streamline consistency, I opted for just two: Montserrat for headings, chosen for its readability, and Lato for body text, selected to convey a blend of friendliness and professionalism.
Pulling it all together, I drafted wireframes to begin organizing the content and user flows in the new website. This facilitated quick iterations after receiving feedback from MHK. Once the the final wireframes were approved by MHK, I moved on to the high fidelity designs.
It was hard to source pictures for the website so I spent hours scouring through their social media photos and even other news photos to get eye-catching images that showcase MHK's work throughout the years. Even though they are not quality photos, they do provide a glimpse into the impact they've hard on the community.
In addition, because they were celebrating their 50th anniversary, I wanted to use numbers to provide concrete examples of their work via statistics in the homepage and important years in their About Us page.
I did extensive changes to the old website in terms of colors, navigation, headings, placements, fonts, and overall feel. It's hard to pinpoint what changes were made because I did a huge overhaul of their old website.
Check out the new website here.
If I had more time, I would like to do a usability study on the mobile version of the website. I realize that individuals accessing mental health services may primarily use mobile devices rather than computers so this study will provide valuable insights into the user's mobile experiences. By prioritizing mobile usability, I can help to ensure that the website effectively provides to the diverse needs of its users, regardless of their preferred device.
Following the approval of the final designs and the conclusion of my design project, my collaboration with MHK extended to the implementation phase where I transferred the designs to the Wix platform. I also took charge of setting up the domain and enhancing the website's SEO to maximize its online visibility. Finally, I optimized the website for mobile devices, ensuring a seamless user experience across all platforms. With these done, I handed off the website to the Director of IT, who will oversee its ongoing updates and maintenance.
Collaborating with a real organization for this website redesign presented a valuable opportunity to navigate a tight timeline. I actually contacted MHK in July 2022 prepare for this project. However, due to their ongoing audit and preparations for their 50th anniversary, our collaboration window was limited to just one month in 2023. Given the quick turnaround, I regrettably could not accommodate all of the additional features they requested.
I had the privilege of collaborating closely with Cherry on a demanding project of redesigning our website. Her outstanding problem-solving abilities and meticulous attention to detail played a pivotal role in its accomplishment. Throughout our partnership, she consistently exhibited remarkable communication skills, excelling in both written and verbal forms. Her capacity to articulate intricate concepts clearly and concisely left a strong impression. I wholeheartedly endorse Cherry for her unwavering commitment, professionalism, and capacity to produce exceptional results.
