Redesigning a mental health clinic’s website experience

DIA Design Guild Staff -

DIA Design Guild is a community-led non-profit organization dedicated to helping new designers by giving them real-world experiences to work with actual stakeholders and project requirements. We provide them a safe space to practice their skills in and a team under the guidance of a mentor to collaborate with.  We recently got the opportunity to work with Reverie Mental Health, a mental health practice based out of Minnesota. 

Business Need - Redesigning a website

Reverie Mental Health asked DIA to redesign their existing website to help them build brand awareness, attract a larger prospective patient base, and drive organic traffic. 

They were developing the website on their own and were looking for a UX partner to give recommendations for improving the site’s visual design and to advise on building an online presence. The ideal design would help establish professionalism, safety, and trustworthiness. We also provided supporting documentation for development. 

Reverie’s website after the developer began migrating to a different platform. They struggled to apply their brand assets and wanted to ensure the content and user experience complemented each other.

Reverie wanted to provide potential clients with a welcoming and intuitive website experience that would help them learn more about the clinic. Their primary users are women and individuals with a uterus who require tailored psychiatry for mental health needs stemming from their bodies’ unique biology. 

Our process

DIA Design Guild approaches every project with personalized designs tailored to specific client needs and timeline. As with all client work, we selected services and generated deliverables that met the criteria for project completion while accounting for the then-current business situation. 

Conducting a competitive analysis to understand the mental health landscape

Our design audit revealed that Reverie's current website design needed improvements in visual appeal and navigation usability to enhance conversion rates among potential patients. To gain insights and inspiration for the redesign, we conducted a thorough competitive analysis of Reverie's website against its competitors. This analysis helped us identify areas where the current design fell short and provided valuable recommendations for future design and content strategies. At the same time, the competitive analysis helped the team's understanding of the mental healthcare domain, providing crucial context for the redesign process.

Our analysis scored competitors on categories such as usability, navigation, features, service offerings, etc. and noted anything Reverie should incorporate. 

Our competitive analysis ranked competitors in various categories, making note of features to include in Reverie’s redesign. 

Drafting lo-fi wireframes to show content priority

Our team presented low-fidelity wireframes to show the intended content priority. These wireframes helped us involve the client’s input to better match their intended vision for the website. 

Lo-fi wireframes visualizing the website’s layout. Pictured are the Patient Scheduling and Patient Portal pages which were later consolidated into the main Patients page. 

Revising wireframes into hi-fi mockups

We took our simple, lo-fi wireframes and turned them into detailed, higher-fidelity mockups to bring our vision for the new website to life for the developer and client. Our team refined the existing components while revising the wireframes by:

  • applying the brand’s style guide, 
  • inserting ambient and relevant photo assets, and
  • making any changes noted by the clients. 

The mockups we came up with included:

  • colors, fonts, and logos that convey the business’s identity, 
  • graphic assets that made a suitable impression on each page, and
  • adjustments reflecting our clients’ perspectives. 
Hi-fi mockup of the new Patients page. The previous Patient Scheduling and Patient Portal lo-fi wireframes were combined into a single page to reduce needless friction for users. 

Refining a design system

To ensure the website’s final visual appearance was consistent across its pages, we started a design system for the client’s developer to reference during the implementation phase. 

Based on the existing brand style guide, we added to it by defining additional parts such as guidelines for accessible color contrast for users with limited vision.

The results of color contrast tests we ran using the palette from Reverie’s style guide. Green/lighter numbers indicate the color combination passes WCAG AA criteria, while red/darker numbers indicate the combination fails. 

We handed off a design system to the developer that included visual references for each component of the designs we made as well as documentation explaining how to apply them. 

Documentation for the developer explaining the website’s button states and their purpose. Four states for standard web interaction are shown for primary and secondary style buttons.

Tool stack

  • Miro (Project kickoff)
  • Figma (Wireframes)
  • Coda (Documentation)
  • Google Doc (Business proposal)
  • Google Meet (User interviews)
  • Loom (For hosting videos)

What we delivered

  • Competitive Analysis Insights
  • Website Copy Document
  • Design Mockups

Measuring our work’s impact on the clinic’s business

The website launched in December 2023. MacKenzie, the owner, and Evan, the developer, have already received compliments from their clients and friends that the website looks great. 

Just had a few people this week compliment the website, which is a testament to the work! Thank you again, Grace (and team, obviously). We appreciate you!

~ MacKenzie Kampa

While we don’t have metrics yet to show whether our changes to content has had any impact to SEO or improve Reverie Mental Health’s search ranking, we’re happy to share that DIA was a successful partner and that MacKenzie and Evan are pleased with the outcomes:

  • We helped them design a website that they’re pleased with
  • We helped clear up some of the message architecture of the site so that it’s welcoming, approachable, and familiar.
  • They have a stronger understanding of how content and design help with patient experience

Impact for our apprentices

Meet Jenny and Justin, the DIA apprentices who worked on this project. 

Our apprentices who worked on this project also learned important lessons from their experience designing and research for Reverie’s new website:

  • Maintaining regular check-ins let us communicate expectations with the client so our team could collect and incorporate feedback. 
  • It’s great that the clients had an idea of what they wanted. Their feedback helped give our team a clear idea of the solutions their problems needed. 

This was a fulfilling project for all of us and we thank Reverie Mental Health for trusting us to partner with them in redesigning their website. 

To partner with DIA on your own design-related projects, contact us using the button below or fill out this form! 

Ready?

Whether to set up an apprentice program or talk about a new project or consulting, contact DIA Design Guild to get started.

Email Us