Reverie Mental Health Website Redesign

I worked in a team of 2 Product Designers and 1 Product Manager to redesign the website experience for Reverie Mental Health, a mental health clinic.

My Role

Research, UX Design, UI Design, Content Design

Miro, Figma, Coda, Google Meet, Google Doc, Loom

Aug 2023 - Nov 2023
8 weeks

The challenge

Elevating Reverie’s online platform

Through stakeholder interviews, we learned that Reverie Mental Health had received negative feedback regarding their website. Reverie sought to improve their website experience to increase conversion rates, and attract new clientele.

My role was to craft a compelling and user-friendly digital experience for prospective patients.

Example comparisons of the original home page with our redesigned screens.

Competitive Analysis

Research to understand the mental health landscape

We conducted an in-depth competitive analysis to gather insights regarding best practices and industry trends that Reverie’s competitors were utilizing. The analysis scored competitors on categories such as usability, navigation, features, service offerings, etc. and noted any recurring patterns that our redesign should consider.

A summary of the total scores, strengths, and weaknesses of our competitors. 

User research

Conducting contextual inquiries to observe user needs and pain points

I also conducted contextual inquiries with users within our target group (primarily women of all ages) and distilled common themes into affinity maps. In general, users had similar opinions regarding Reverie's existing website. Major pain points include:

Users also expressed a desire to establish a deeper emotional connection with the therapist, as mental health can be a sensitive topic.

Common themes of user needs and pain points distilled into an affinity map.

heuristic evaluation

Identifying potential usability issues with Reverie's website

To further identify areas for improvement, I conducted a heuristic evaluation. There were a total of 6 issues:

  1. Users were not given appropriate feedback when navigating through pages.
  2. Information overload and medical jargon increased cognitive load on users. 
  3. Certain actions, such as expanding a question in the FAQ section, did not have an undo.
  4. CTA buttons and branding were inconsistent through screens. 
  5. There was too much irrelevant text, little to no images, and too much white space. 
  6. Users may find it difficult to contact Reverie or find information due to unclear navigation.

Summary of our heuristic evaluation based on Nielsen Norman's 10 Usability Heuristics.

opportunities for improvement

Improving content, usability, and visual design

With the insights gathered from our research, we moved onto defining the problems to target on Reverie’s website. 

🎯 Refining Content Design: By utilizing more personable/simplified language and streamlining the information that users receive, we can establish trust with users.

🎯 Optimizing Usability: To create a more seamless user experience, we can improve navigation, clarify the structure, and further develop intuitive interactions.

🎯 Enhancing Visual Design: Incorporating ambient images, colors, and appropriate graphic elements can create a more visually stimulating experience that resonates with Reverie's target audience. 

Lofi wireframes (v1)

Communicating layout and content priority

Our team presented low-fidelity wireframes to our stakeholders to show the intended layout and content priority, incorporating any feedback they had. By simplifying the large amounts of text and adding relevant eye-catching headers, we aimed to improve the parsing ability of users. Additionally, we wanted to utilize more image placement and balanced white space.

Lofi wireframes (v2)

Revisions to enhance aesthetics, navigation, and trust

Some of the revisions that I made to improve the visual design, information architecture, and credibility include:


Adding brand identity to bring our designs to life

We took our lo-fi wireframes and turned them into detailed, higher-fidelity mockups, adding colors, ambient imagery, and visual elements that were in line with Reverie's branding. I conducted an additional check to make sure all text was legible in accordance with WCAG guidelines and provided alt-text for images.

Refining a design system

Providing clarity for the developers

Once we received approval from stakeholders for our final designs, we established a design system to ensure consistency across the website, incorporating elements such as typography, button states, colors, color accessibility, measurements, and use cases. This system was provided to their developers to streamline the implementation phase.


Improvements in qualitative data—positive feedback from our stakeholders and their clients

The result was a more visually appealing and consistent website that accurately reflected Reverie's intended branding. Our clients at Reverie Mental Health have received numerous compliments from their clients and friends. Below are some testimonies of our work, with certain names changed to protect patient privacy.

You can view the full website at (Developed design may differ from our wireframes.)

"Just had a few people this week compliment the website, which is a testament to the work! Thank you again. We appreciate you!"

— MacKenzie K. (Founder)

"There were many things we didn't consider when building the original website. The improvement in accessibility, visuals, and overall feel is amazing."

— Evan D. (Stakeholder)

"I think the new website looks great! I would feel more comfortable booking an appointment through this website than the previous one."

— Hailey J. (Prospective Patient)

"The updated website gives me a feeling of calmness and looks professional. "

— Alex N. (Prospective Patient)


Moving forward

Things we did right: Starting with a strong research foundation allowed us to make data-driven design decisions. It's crucial to gather insights and define focus areas before jumping into the design phase. Additionally, working in a sprint format and having weekly check-ins with our stakeholders allowed us to align business goals with our designs.

Next steps: If we had more time and had access to the original website's metrics, I would have liked to conduct usability testing to validate our design decisions. It's crucial to iterate on products and continually incorporate feedback gathered from users.