.png)
Design of La Sierra Mental Health Clinic's Website
User Research, UX/UI, Prototyping
La Sierra University Mental Health Clinic, part of a private, non-profit institution in Riverside, California, is dedicated to supporting the mental well-being of its diverse community. It currently lacks an effective online presence. Without a website, students, faculty, and community members face challenges in finding and accessing the mental health resources and support they need, hindering the clinic’s mission to provide comprehensive mental health services.
Figma, Maze, Google Meets
8 weeks
1. Conducted competitive analysis and user interviews to understand user needs and pain points.
2. Synthesized findings with a persona, feature roadmap, and insights.
3. Created information architecture to help users easily find services and resources.
4. Created low and high-fidelity responsive design (desktop, tablet, and mobile).
5. Led usability testing on wireframes and implemented feedback to refine the design.
Understanding the needs of mental health clinic users
I initially spoke with the director of La Sierra University Mental Health Clinic to gather insights on website needs, which helped build a relationship with the client. This discussion led to identifying three key target audience groups. For this project, I focused on the first two groups—adults and parents—as they represent the primary users seeking immediate support and resources from the clinic’s website.
Adults who seek help of mental health issues, including work-related stress, relationship problems, and life transitions like divorce, grief, or retirement.
Parents of children and teenagers dealing with issues such as ADHD, behavioral disorders, or adjustment problems.
Students and future mental health professionals who wish to gain clinical experience while adhering to ethical and professional standards.
Insights from user interviews uncovering pain points
I conducted one-on-one user interviews with seven people who have used mental health services to gain firsthand insights into their pain points and expectations. Their feedback highlighted key issues, such as long waits, inaccurate scheduling, and the desire for more transparency in the care process.
"They don't make me feel they care that I am a sick person that needs help."
-Cynthia
"It's frustrating to seek help, only to face long wait, inaccurate scheduling, and complicated system."
-Symone
"My expectation is for them to be completely transparent with their information."
-Brandon
Mapping out the results from my interview illustrated a key insight: users crave transparency in the information when seeking mental health support.
With that, I wondered...
How might we enhance transparency in the mental health support process to better meet users' needs and expectations?
Understanding the landscape of mental health websites
I reviewed 4 local competitors offering mental health services to identify opportunities and gaps. This analysis helped avoid common pitfalls and guided the design toward a more intuitive, user-friendly experience.
Some competitors excel in providing straightforward navigation and layout, making it easy for users to find necessary information quickly. However, some websites struggle with disorganization or dual navigation bars, leading to potential user confusion.
Prominent features like the "Patient Portal" and the contact forms improve user experience by providing quick access to essential services and support. However, the lack of readily visible pricing information on some sites frustrates users who prioritize transparency.
Text-heavy pages can overwhelm users and detract from the overall experience, highlighting the need for a balance between providing detailed information and maintaining readability.
Displaying staff photos and background information helps create a more personable and welcoming environment, fostering a sense of connection and trust with users.
Feature roadmap & sitemap laid the foundation of design
After synthesizing insights from the competitive analysis and user interviews, I developed a feature roadmap outlining the essential functionalities for the website. This roadmap served as a guiding framework throughout the design process. To ensure alignment, I reviewed it with the client, refining the approach before proceeding.
Next, I created a sitemap to organize the features into a clear and cohesive site layout, establishing the structure for user navigation.
Designing task flows to address key user needs
To create an intuitive user experience, I developed three key task flows based on the needs of the primary persona, the "Culturally Conscious and Proactive Mental Health Seeker." These task flows were carefully chosen to address the most common actions users would need to complete when interacting with the La Sierra University Mental Health Clinic website.
1. Find pricing information
Cost transparency was a major concern for users, so this flow ensures they can quickly and easily access detailed pricing information without frustration.
2. Make an appointment as a new patient
A streamlined process for booking appointments was essential, as users expressed frustration with complex or lengthy scheduling systems. This flow simplifies the process, reducing barriers to seeking care.
3. Find a therapist who speaks specific language (i.e. Spanish)
Many users valued the ability to find therapists who matched their language preferences. This flow allows for efficient filtering, helping users locate the right therapist quickly.
Exploring layouts to prioritize user experience
I began by sketching potential layouts for the four main pages: the homepage, service overview, meet the team, and how things work. My primary focus was on exploring levels of importance for each component, ensuring that the layout aligned with the users' needs and expectations.
To account for responsive design, I took a desktop-first approach. Given the nature of the audience, it’s likely that most people would explore these mental health facilities using desktops, as it offers a more comprehensive browsing experience compared to mobile devices.
I highlighted sections to mock up in higher fidelity.
I positioned the hero image and call-to-action button prominently at the top of the homepage to engage visitors immediately.
The services section was placed next, understanding that visitors are primarily interested in the services offered.
I added a "How It Works" section, outlining four key steps based on client input. These steps were arranged vertically to improve clarity and prevent overcrowding.
The "How Things Work" section is repeated on the service page to reinforce the process and provide clarity on how to engage with the clinic’s services.
I displayed these categories clearly, highlighting the current section while allowing for easy navigation between the others.
A prominent call-to-action button directs visitors to a form for submitting their information, streamlining the process.
A collapsible "Frequently Asked Questions" section was added at the bottom of the page to present extensive information in a compact, user-friendly manner.
I incorporated ample white space, ensuring the content remains easy to read and digest.
Added a filter to allow visitors to sort team members by specialty and language, improving ease of navigation and accessibility.
Opted for a vertical layout on the "Meet our team" page, displaying each clinician’s profile picture alongside their bio for a more personal connection.
Refined layouts and interactions to improve usability, focusing on simplicity and functionality
Moving onto mid-fidelity, I focused on refining the layout and interactions to ensure that finding information and making appointments was straightforward and efficient to users. The goal was to develop a more detailed and functional design that addressed user needs while maintaining simplicity and effectiveness.
Before
After
I added tags for qualifications and languages spoken next to each staff member’s name and title, providing users with relevant information to quickly identify suitable professionals.
I added a dropdown menu for filters in the upper right corner, keeping the interface clean while still providing easy access to additional options.
Before
After
I relocated the "Go to Intake Form" button from the middle of the paragraph to the white space on the right for better visibility and accessibility, and shortened the paragraph to enhance readability.
I updated the common questions section to make it more prominent and added an accordion feature for each topic, allowing easier navigation and access to detailed answers without cluttering the page.
Testing to refine navigation and identify usability issues
Before heading to hi-fidelity wireframes, I decided to conduct usability tests on mid-fidelity wireframes to evaluate how well users can navigate and interact with the design elements before finalizing the visual details. This testing at this stage helps identify any usability issues early on, minimizing costly changes during later development phases.
Moderated tests
Participants dialed into Zoom and screenshared from their laptops.
Identify the service page that addresses specific needs for specialized mental health support
Find a therapist who aligns with specific care preferences and language requirements
Results
Overall, participants were able to locate the service pages they were asked to find. However, 2 out of 5 took indirect routes, exploring other pages before reaching the correct service. This highlighted a potential issue: not all users are familiar with the specific service labels provided by the client. After discussing with both the client and participants, I found that the success of this task heavily depends on the user's familiarity with mental health services. Those familiar with the topic navigated easily, while others took more time. Ultimately, I chose to keep the labels as they are, given that the clinic's primary audience is well-versed in this subject.
Symbolizing growth and renewal through branding
The logo prominently features the letter “L” to represent La Sierra, with a branch growing from it. The branch serves as a symbol of growth, reflecting the clinic’s commitment to guiding individuals through their mental health journeys toward positive, personal development.
The green color palette evokes calmness, renewal, and balance, aligning with the clinic's mission to support mental well-being. Paired with the clean, approachable TeX Gyre Adventor font, the overall design is both professional and welcoming, reflecting the clinic’s commitment to compassionate care.
Before
After
Replaced the “Log in” button at the top with “Get Started” to make the CTA button consistent throughout the website
Removed the "How Things Work" and "Resources" buttons from the navigation bar. The "Get Started" CTA effectively replaces "How Things Work," streamlining the user journey. The "Resources" page is relocated to the footer without cluttering the main navigation.
Adjusted the size and weight of the text in the "How Things Work" section to create a clear visual hierarchy, making it easier to read.
Added icons on each of the service page to increase visual hierarchy.
Updated the description to ensure that the introduction for each service category includes the general symptoms they cover.
Balancing client vision with user empathy for a welcoming design
Throughout the design process for the La Sierra University Mental Health Clinic website, I learned the importance of clear communication with the client to ensure their vision aligns with the needs of the target audience. Regular discussions allowed me to understand the clinic’s priorities and adapt the design to reflect their goals. At the same time, it was crucial to put myself in the shoes of potential users, considering their emotional state and needs for a straightforward, supportive experience. Balancing client feedback with user empathy helped me create a website that feels both welcoming and functional.