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.
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.
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.
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.
To further identify areas for improvement, I conducted a heuristic evaluation. There were a total of 6 issues:
Summary of our heuristic evaluation based on Nielsen Norman's 10 Usability Heuristics.
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.
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.
Some of the revisions that I made to improve the visual design, information architecture, and credibility include:
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.
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.
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 www.reverie-mh.vercel.app. (Developed design may differ from our wireframes.)
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.
.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}