Belmont Pines
Objectives: To improve navigation, enhance user engagement, and ensure that the site effectively communicated the facility's services and values. A client requirement was to emphasize the need to push outpatient programs to the forefront of the website as well as patient testimonials.
Role: UX Designer
Duration: 6 Months
Competitors often employ a soft, welcoming aesthetic with calming colors, friendly imagery, and empathetic language. I chose a similar approach to establish trust and warmth, while distinguishing the brand with a more modern and cohesive visual identity. This included a focus on photography that humanizes outpatient care, showcasing real-world scenarios that users can relate to. Some competitor sites were lacking in accessibility features, such as text contrast, screen reader compatibility, and straightforward language. Given that Belmont Pines serves a diverse audience, I prioritized accessibility, making sure the design adhered to WCAG guidelines.
To better understand the landscape for behavioral health facilities in the area, I conducted a competitive analysis of similar facilities. The analysis focused on several key competitors in the mental health and behavioral health sector, including regional facilities and larger national providers offering similar services.
Competitive Analysis
Research & Discovery
The original website's architecture was confusing, with a lot of pages and dead ends. I wanted to trim it down to the essentials, with focused actions. I ensured there were reasonable content and access to each space necessary for users, while having a natural navigational flow.
Information Architecture
Research & Discovery
I stripped down the color palette to a few hues, giving it a modern, natural, and calming feel. The colors used are pulled from the original palette and adjusted to ensure accessibility and legibility. The typography was chosen with accessibility and legibility in mind. The photography shows a story built on healing and happiness, giving patients, family, and users the idea of hope and health in a stressful time. We also keep developers and software engineers in mind and how to keep the hand-off process efficient we use tools like token studio to ensure that everything handed off will be exactly as we need it to be.
Branding
Research & Discovery
Links and Buttons
#2F4A0B
Default
#274005
Accent
#216E1F
Tint
#DBEBDE
Accent
#4D8055
Since I started with a component based layout re-imagining the design to work for mobile was not too difficult. A lot of the imagery and sections went from being horizontal to stacked vertically. The most important portion is making sure things were scaled down to the right sizing, continued to be accessible, and still have the right order to achieve Belmont Pines goals.
Taking the current site into mind, I created a component based layout giving a general feel to what the new site will look like, keeping a consistent design in mind. The interior pages will contain a similar structure each time and the home page having the majority of the unique layouts.
Wireframes
Design
Now taking the wireframes created we start infusing the branding, imagery, and pre-determined content and creating the mockups for the final site. Keeping in mind accessibility, our end goals, and making the developers lives easier as we piece everything together telling the story of Belmont Pines. We structure the site using the research and information architecture conducted and keeping our goals at the top of mind.
The redesigned site received strong user feedback for its improved navigation and focus on outpatient programs, leading to increased inquiries. Despite facing administrative roadblocks and tight timelines, the project highlighted the value of user-centered design and visual elements in driving engagement, even with limited research. The experience underscored the need for better planning and collaboration between the agency and facility.
Outcome
Conclusion & Reflections