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. 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 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.
%201.png)
An overview of my design process using the Double Diamond framework.
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:
A summary of the total scores, strengths, and weaknesses of our competitors.
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:
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.
🎯 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.
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.
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 color blocks that were in line with Reverie's branding.
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.
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: 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.
.svg){kind=icon}
.svg){kind=icon}
.svg){kind=icon}