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

UX Design, UI Design, Product Design

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

8 weeks (Aug. - Nov. 2023)


Understanding Business Needs - Elevating Reverie’s online platform

Through stakeholder interviews, we learned that Reverie Mental Health had received negative feedback regarding their website. Users thought their website looked unfinished and unprofessional, causing low trust in their company. Reverie sought to improve their website experience to increase conversion rate and expand their 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.

My design process

Discover, Define, Develop, Deliver

My team and I utilized the double diamond method, starting with collaborative meetings to understand stakeholder goals and project timelines. Once business needs were established, we conducted research through competitive analysis and heuristic evaluations. Clear objectives were defined, and through iterative wireframing and mockups, we translated them into tangible design solutions.

The result was a visually appealing and consistent website that earned positive feedback from our stakeholders and their clients.

An overview of my design process using the Double Diamond framework.

Competitive Analysis

Research to understand the mental health landscape

A team member and I 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 anything our redesign should incorporate. We found several key insights:

  • The strongest websites focused on being personable, credible, and transparent to establish trust with their consumers.
  • Most competitors utilized ambient images and prominent call to action buttons spaced throughout all pages.
  • Although our competitors focused on mental health and therapy spaces, most companies did not consider accessibility in their design. 

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

heuristic evaluation

Identifying potential usability issues with Reverie's website

I also conducted a heuristic evaluation to assess the usability of Reverie’s own website, aiming to identify areas for improvement. There were a total of 6 issues:

  • Users were not given appropriate feedback when navigating through pages.
  • Information overload and medical jargon increased cognitive load on users. 
  • Certain actions, such as expanding a question in the FAQ section, did not have an undo.
  • CTA buttons and branding were inconsistent through screens. 
  • There was too much irrelevant text, little to no images, and too much white space. 
  • Users may find it difficult to contact Reverie, causing a sense of frustration.

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

Identifying opportunities

Improving visual design, usability, and brand identity

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

🎯 Visual Design Enhancement: The existing design lacked engaging visual elements and was overly reliant on text. By incorporating ambient images and appropriate graphic elements, we aimed to create a more visually stimulating experience that resonated with Reverie's target audience. 

🎯 Usability Optimization: Addressing the usability issues present from the heuristic evaluation were key priorities in our redesign strategy. Improving navigation, providing clearer feedback for user actions, reducing cognitive load by simplifying content, and streamlining the user experience were crucial in improving the usability of the website. 

🎯 Building Consistent Brand Identity: There were many inconsistencies in branding elements, such as logo usage, color schemes, button styles, and typography, which detracted from the professional image Reverie aimed to convey. We can reinforce Reverie’s brand identity by standardizing branding usage, fostering trust and familiarity among users. 

LOW Fidelity (lo-fi) wireframes

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 medical jargon present in the original website, we aimed to improve the parsing ability of users. Additionally, we wanted to utilize more image placement and balanced white space.

An interactive overview of our low fidelity wireframes.

Iterations & Improvements

Revisions to enhance aesthetics, content navigation, and trust

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

  • Modernizing the hero headers to foster a more positive and influential initial impact
  • Merging pages to streamline user navigation, reduce clutter in the navigation bar, and lower cognitive load
  • Creating a table of contents and organizing questions on the FAQ page to improve accessibility and enhance the efficiency of users parsing information
  • Added testimonials in relevant pages increase credibility and trust


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 color blocks that were in line with Reverie's branding.

Refining a design system

Providing clarity for the developers

Once we incorporated all of the feedback, 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: Presenting designs to stakeholders in a weekly meeting was extremely helpful in making sure our designs were aligned with their business goals and were feasible to develop. Additionally, we did a lot of research with competitors and identified areas to tackle, which gave us a better informed design strategy.

Things to improve on: 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. Some things that I would have liked to compare include bounce rates, conversion rates, and task completion rates.