Navigating Healing: A Thoughtful Web Experience for Therapy

Navigating Healing: A Thoughtful Web Experience for Therapy

Navigating Healing: A Thoughtful Web Experience for Therapy

Designing a warm and accessible digital space for trauma-informed care.

Hold down and slide over to compare.

Imagine feeling overwhelmed, desperately seeking mental health support, only to find a sea of confusing websites with no clear answers.

Imagine feeling overwhelmed, desperately seeking mental health support, only to find a sea of confusing websites with no clear answers.

Imagine feeling overwhelmed, desperately seeking mental health support, only to find a sea of confusing websites with no clear answers.

This is where XYZ Therapy (Name Undisclosed) sought to make a difference—a website designed to provide clarity, compassion, and connection.

This is where XYZ Therapy (Name Undisclosed) sought to make a difference—a website designed to provide clarity, compassion, and connection.

This is where XYZ Therapy (Name Undisclosed) sought to make a difference—a website designed to provide clarity, compassion, and connection.

THE CHALLENGE

Navigating mental health websites can feel like a maze—overwhelming, unclear, and impersonal. Many users, already struggling with emotional challenges, face barriers like complex navigation, vague therapist information, and time-consuming appointment booking processes.

Navigating mental health websites can feel like a maze—overwhelming, unclear, and impersonal. Many users, already struggling with emotional challenges, face barriers like complex navigation, vague therapist information, and time-consuming appointment booking processes.

Navigating mental health websites can feel like a maze—overwhelming, unclear, and impersonal. Many users, already struggling with emotional challenges, face barriers like complex navigation, vague therapist information, and time-consuming appointment booking processes.

THE OPPORTUNITY

XYZ Therapy, a trauma-informed practice, is in the process of fully launching its services. They envisioned a user-centered website to simplify access to therapy while fostering trust and warmth. My goal was to design a platform ready to support their mission and resonate with future clients.

XYZ Therapy, a trauma-informed practice, is in the process of fully launching its services. They envisioned a user-centered website to simplify access to therapy while fostering trust and warmth. My goal was to design a platform ready to support their mission and resonate with future clients.

XYZ Therapy, a trauma-informed practice, is in the process of fully launching its services. They envisioned a user-centered website to simplify access to therapy while fostering trust and warmth. My goal was to design a platform ready to support their mission and resonate with future clients.

THE SOLUTION

Create an intuitive, user-centered website for XYZ Therapy that simplifies the process of finding information, builds trust, and streamlines appointment booking.

Create an intuitive, user-centered website for XYZ Therapy that simplifies the process of finding information, builds trust, and streamlines appointment booking.

Create an intuitive, user-centered website for XYZ Therapy that simplifies the process of finding information, builds trust, and streamlines appointment booking.

MY ROLE

As the UX/UI designer, I conducted in-depth research, developed user personas, and led the design process to deliver a solution aligned with the needs of XYZ Therapy’s audience.

As the UX/UI designer, I conducted in-depth research, developed user personas, and led the design process to deliver a solution aligned with the needs of XYZ Therapy’s audience.

As the UX/UI designer, I conducted in-depth research, developed user personas, and led the design process to deliver a solution aligned with the needs of XYZ Therapy’s audience.

Process

Process

Process

Research: Understanding the Users

Research: Understanding the Users

Research: Understanding the Users

To create a website that truly resonates with XYZ Therapy’s audience, the research phase was essential. This stage focused on uncovering the needs, behaviours, and pain points of potential clients.

To create a website that truly resonates with XYZ Therapy’s audience, the research phase was essential. This stage focused on uncovering the needs, behaviours, and pain points of potential clients.

To create a website that truly resonates with XYZ Therapy’s audience, the research phase was essential. This stage focused on uncovering the needs, behaviours, and pain points of potential clients.

User Interviews: Uncovering Pain Points

User Interviews: Uncovering Pain Points

Conducting interviews with individuals seeking therapy revealed a common thread—clients often feel overwhelmed by the process of finding and booking therapy services.

Conducting interviews with individuals seeking therapy revealed a common thread—clients often feel overwhelmed by the process of finding and booking therapy services.

Conducting interviews with individuals seeking therapy revealed a common thread—clients often feel overwhelmed by the process of finding and booking therapy services.

User Interview Insights

User Interview Insights

User Interview Insights

Insights

Insights

The user Interview insights led to the development of questions below that I aimed to answer through design.

The user Interview insights led to the development of questions below that I aimed to answer through design.

The user Interview insights led to the development of questions below that I aimed to answer through design.

How Might We:

How Might We:

How Might We:

  • Simplify the process of finding relevant information about therapy services?

  • Build trust by transparently showcasing the therapist’s credentials and approach?

  • Make scheduling appointments seamless while maintaining a personal touch?

To address these, I decided to integrate Calendly into the website, streamlining the booking process. This choice eliminated email-based back-and-forth, offering users a clear, accessible way to schedule appointments directly.

  • Simplify the process of finding relevant information about therapy services?

  • Build trust by transparently showcasing the therapist’s credentials and approach?

  • Make scheduling appointments seamless while maintaining a personal touch?

To address these, I decided to integrate Calendly into the website, streamlining the booking process. This choice eliminated email-based back-and-forth, offering users a clear, accessible way to schedule appointments directly.

  • Simplify the process of finding relevant information about therapy services?

  • Build trust by transparently showcasing the therapist’s credentials and approach?

  • Make scheduling appointments seamless while maintaining a personal touch?

To address these, I decided to integrate Calendly into the website, streamlining the booking process. This choice eliminated email-based back-and-forth, offering users a clear, accessible way to schedule appointments directly.

User Personas: Shaping the Vision

User Personas: Shaping the Vision

Based on the research findings, I developed two primary personas:

  1. The Busy Professional: Amit, 35
    A high-pressure corporate worker seeking convenient, discreet mental health support.

  2. The Hesitant Seeker: Shweta, 25
    A young professional or student overwhelmed by stigma and unsure where to start, yet in need of a safe, welcoming space.

These personas acted as guiding principles throughout the design process, ensuring the platform was empathetic, accessible, and easy to navigate.

Based on the research findings, I developed two primary personas:

  1. The Busy Professional: Amit, 35
    A high-pressure corporate worker seeking convenient, discreet mental health support.

  2. The Hesitant Seeker: Shweta, 25
    A young professional or student overwhelmed by stigma and unsure where to start, yet in need of a safe, welcoming space.

These personas acted as guiding principles throughout the design process, ensuring the platform was empathetic, accessible, and easy to navigate.

Based on the research findings, I developed two primary personas:

  1. The Busy Professional: Amit, 35
    A high-pressure corporate worker seeking convenient, discreet mental health support.

  2. The Hesitant Seeker: Shweta, 25
    A young professional or student overwhelmed by stigma and unsure where to start, yet in need of a safe, welcoming space.

These personas acted as guiding principles throughout the design process, ensuring the platform was empathetic, accessible, and easy to navigate.

User Personas

User Personas

User Personas

Competitive Analysis: Understanding the Landscape

Competitive Analysis: Understanding the Landscape

To ensure XYZ Therapy’s website would stand out, I analysed competitors in the mental health space. Many therapy websites take a clinical, minimalist approach, often using white, sterile tones that can feel distant and unwelcoming, especially for people in emotional distress.

To ensure XYZ Therapy’s website would stand out, I analysed competitors in the mental health space. Many therapy websites take a clinical, minimalist approach, often using white, sterile tones that can feel distant and unwelcoming, especially for people in emotional distress.

To ensure XYZ Therapy’s website would stand out, I analysed competitors in the mental health space. Many therapy websites take a clinical, minimalist approach, often using white, sterile tones that can feel distant and unwelcoming, especially for people in emotional distress.

Design Inspiration & Analysis
I looked to successful examples of warm and approachable designs from various industries, including:

  • Calm.com – Known for its soft, inviting tones and user-centric design.

  • BetterHelp – Focuses on clear, easily accessible therapist information, with an inviting, colorful palette.

  • Headspace – Uses soft pastel colours and playful visuals to create a welcoming atmosphere that contrasts with more clinical, corporate designs.

Design Inspiration & Analysis
I looked to successful examples of warm and approachable designs from various industries, including:

  • Calm.com – Known for its soft, inviting tones and user-centric design.

  • BetterHelp – Focuses on clear, easily accessible therapist information, with an inviting, colorful palette.

  • Headspace – Uses soft pastel colours and playful visuals to create a welcoming atmosphere that contrasts with more clinical, corporate designs.

Design Inspiration & Analysis
I looked to successful examples of warm and approachable designs from various industries, including:

  • Calm.com – Known for its soft, inviting tones and user-centric design.

  • BetterHelp – Focuses on clear, easily accessible therapist information, with an inviting, colorful palette.

  • Headspace – Uses soft pastel colours and playful visuals to create a welcoming atmosphere that contrasts with more clinical, corporate designs.

Why a Warm, Colourful Design?
A warm-toned, colourful design would not only align with the therapy practice's mission but also cater to users’ emotional needs, ensuring that the website felt like a safe space for users to navigate.

Why a Warm, Colourful Design?
A warm-toned, colourful design would not only align with the therapy practice's mission but also cater to users’ emotional needs, ensuring that the website felt like a safe space for users to navigate.

Why a Warm, Colourful Design?
A warm-toned, colourful design would not only align with the therapy practice's mission but also cater to users’ emotional needs, ensuring that the website felt like a safe space for users to navigate.

Design Inspiration & Analysis

Design Inspiration & Analysis

Design Inspiration & Analysis

Creating the Sitemap

Creating the Sitemap

To ensure the website structure was both user-centric and aligned with XYZ Therapy's goals, I created a sitemap early in the design process. This step was crucial to define the information architecture and establish a clear flow of content. The sitemap laid the foundation for an intuitive and seamless user experience.

To ensure the website structure was both user-centric and aligned with XYZ Therapy's goals, I created a sitemap early in the design process. This step was crucial to define the information architecture and establish a clear flow of content. The sitemap laid the foundation for an intuitive and seamless user experience.

To ensure the website structure was both user-centric and aligned with XYZ Therapy's goals, I created a sitemap early in the design process. This step was crucial to define the information architecture and establish a clear flow of content. The sitemap laid the foundation for an intuitive and seamless user experience.

Key Considerations:

  • The target audience—busy professionals and hesitant seekers—needed easy access to information with minimal cognitive load.

  • Most marketing traffic was expected to come from social media, which often entails users with shorter attention spans.

Key Considerations:

  • The target audience—busy professionals and hesitant seekers—needed easy access to information with minimal cognitive load.

  • Most marketing traffic was expected to come from social media, which often entails users with shorter attention spans.

Key Considerations:

  • The target audience—busy professionals and hesitant seekers—needed easy access to information with minimal cognitive load.

  • Most marketing traffic was expected to come from social media, which often entails users with shorter attention spans.

Strategic Decision:
To address these needs, I opted for a long landing page with anchor navigation at the top.

Why this approach?

  • A long landing page reduces the number of clicks required to access essential information.

  • The navigation bar allows users to jump directly to sections like “About Us,” “Resources,” or “Book an Appointment.”

  • This layout aligns with social media traffic behaviour, where users often prefer scrolling through content rather than navigating multiple pages.

Strategic Decision:
To address these needs, I opted for a long landing page with anchor navigation at the top.

Why this approach?

  • A long landing page reduces the number of clicks required to access essential information.

  • The navigation bar allows users to jump directly to sections like “About Us,” “Resources,” or “Book an Appointment.”

  • This layout aligns with social media traffic behaviour, where users often prefer scrolling through content rather than navigating multiple pages.

Strategic Decision:
To address these needs, I opted for a long landing page with anchor navigation at the top.

Why this approach?

  • A long landing page reduces the number of clicks required to access essential information.

  • The navigation bar allows users to jump directly to sections like “About Us,” “Resources,” or “Book an Appointment.”

  • This layout aligns with social media traffic behaviour, where users often prefer scrolling through content rather than navigating multiple pages.

Sitemap

Sitemap

Sitemap

Design Process

Design Process

Design Process

With a deep understanding of the challenges and insights uncovered during the research phase, the design journey for XYZ Therapy began. Every step was a deliberate effort to align the visual and functional aspects of the website with the needs of both Amit and Shweta, creating a platform that felt approachable, trustworthy, and seamless to use.

With a deep understanding of the challenges and insights uncovered during the research phase, the design journey for XYZ Therapy began. Every step was a deliberate effort to align the visual and functional aspects of the website with the needs of both Amit and Shweta, creating a platform that felt approachable, trustworthy, and seamless to use.

With a deep understanding of the challenges and insights uncovered during the research phase, the design journey for XYZ Therapy began. Every step was a deliberate effort to align the visual and functional aspects of the website with the needs of both Amit and Shweta, creating a platform that felt approachable, trustworthy, and seamless to use.

1. Ideation: Sketching the Foundation

1. Ideation: Sketching the Foundation

1. Ideation: Sketching the Foundation

The ideation process started with rough sketches and brainstorming multiple concepts. These sketches were not just about visualising the design but also about considering the flow of the user experience.

Focus Points:

  • How might we ensure an intuitive booking process?

  • What design elements convey warmth and professionalism simultaneously?

The ideation process started with rough sketches and brainstorming multiple concepts. These sketches were not just about visualising the design but also about considering the flow of the user experience.

Focus Points:

  • How might we ensure an intuitive booking process?

  • What design elements convey warmth and professionalism simultaneously?

The ideation process started with rough sketches and brainstorming multiple concepts. These sketches were not just about visualising the design but also about considering the flow of the user experience.

Focus Points:

  • How might we ensure an intuitive booking process?

  • What design elements convey warmth and professionalism simultaneously?

Ideation Sketches

Ideation Sketches

Ideation Sketches

2. Wireframing: Structuring the Experience

2. Wireframing: Structuring the Experience

2. Wireframing: Structuring the Experience

The wireframing phase was crucial in translating initial ideas into tangible layouts that prioritised user needs.

Using low-fidelity wireframes, I outlined the structure of the website to ensure it was intuitive, accessible, and focused on delivering a seamless user experience. These wireframes represented the skeletal framework, focusing on spatial relationships and flow without delving into visual design details.

The wireframing phase was crucial in translating initial ideas into tangible layouts that prioritised user needs.

Using low-fidelity wireframes, I outlined the structure of the website to ensure it was intuitive, accessible, and focused on delivering a seamless user experience. These wireframes represented the skeletal framework, focusing on spatial relationships and flow without delving into visual design details.

The wireframing phase was crucial in translating initial ideas into tangible layouts that prioritised user needs.

Using low-fidelity wireframes, I outlined the structure of the website to ensure it was intuitive, accessible, and focused on delivering a seamless user experience. These wireframes represented the skeletal framework, focusing on spatial relationships and flow without delving into visual design details.

Low-fidelity Wireframes

Low-fidelity Wireframes

Low-fidelity Wireframes

3. Visual Design: Establishing a Warm Identity

3. Visual Design: Establishing a Warm Identity

3. Visual Design: Establishing a Warm Identity

With the structure solidified through wireframes, the next step was to breathe life into the design. The visual design phase focused on crafting an aesthetic that resonated with XYZ Therapy’s core values: warmth, approachability, and trust.

With the structure solidified through wireframes, the next step was to breathe life into the design. The visual design phase focused on crafting an aesthetic that resonated with XYZ Therapy’s core values: warmth, approachability, and trust.

With the structure solidified through wireframes, the next step was to breathe life into the design. The visual design phase focused on crafting an aesthetic that resonated with XYZ Therapy’s core values: warmth, approachability, and trust.

Visual Design

Visual Design

Visual Design

4. First Design Concept: Bringing Ideas to Life

4. First Design Concept: Bringing Ideas to Life

4. First Design Concept: Bringing Ideas to Life

The first high-fidelity draft included two versions of the landing page, each designed to reflect the brand’s focus on providing a safe and welcoming space while addressing user needs.

The first high-fidelity draft included two versions of the landing page, each designed to reflect the brand’s focus on providing a safe and welcoming space while addressing user needs.

The first high-fidelity draft included two versions of the landing page, each designed to reflect the brand’s focus on providing a safe and welcoming space while addressing user needs.

Version 1:

  • Featured a gradient hero section with a central blur and a prominent “Learn More” CTA.

  • Focused heavily on textual information, presenting detailed content upfront about services and therapist details.

  • Aimed for a modern yet calming aesthetic with soft gradient transitions.

Version 1:

  • Featured a gradient hero section with a central blur and a prominent “Learn More” CTA.

  • Focused heavily on textual information, presenting detailed content upfront about services and therapist details.

  • Aimed for a modern yet calming aesthetic with soft gradient transitions.

Version 1:

  • Featured a gradient hero section with a central blur and a prominent “Learn More” CTA.

  • Focused heavily on textual information, presenting detailed content upfront about services and therapist details.

  • Aimed for a modern yet calming aesthetic with soft gradient transitions.

Version 2:

  • Featured an illustrated hero section with direct CTAs like “Start Your Journey” and “See How It Works.”

  • Incorporated cards and icons to visually highlight services and features, making the layout easier to navigate.

  • Used a subtle gradient background throughout, creating a cohesive and calming design.

Version 2:

  • Featured an illustrated hero section with direct CTAs like “Start Your Journey” and “See How It Works.”

  • Incorporated cards and icons to visually highlight services and features, making the layout easier to navigate.

  • Used a subtle gradient background throughout, creating a cohesive and calming design.

Version 2:

  • Featured an illustrated hero section with direct CTAs like “Start Your Journey” and “See How It Works.”

  • Incorporated cards and icons to visually highlight services and features, making the layout easier to navigate.

  • Used a subtle gradient background throughout, creating a cohesive and calming design.

User Testing and Feedback

These versions were tested with users to gather their impressions:

User Feedback on Version 1:

  • Users appreciated the professional appearance but found the central blur in the hero section distracting.

  • The heavier focus on text made the layout feel overwhelming, which hindered quick scanning of information.

User Feedback on Version 2:

  • Users preferred the subtle gradient background over the central blur in Version 1, describing it as less distracting and more polished.

  • They appreciated the clean layout and visual hierarchy, which made it easier to explore key sections like services and how the process works.

  • The use of visual elements such as icons and service cards made the design feel approachable and engaging.

Based on user feedback, Version 2 was selected as the foundation for the website's design as its balanced use of visuals and content effectively aligned with user preferences and expectations.

These versions were tested with users to gather their impressions:

User Feedback on Version 1:

  • Users appreciated the professional appearance but found the central blur in the hero section distracting.

  • The heavier focus on text made the layout feel overwhelming, which hindered quick scanning of information.

User Feedback on Version 2:

  • Users preferred the subtle gradient background over the central blur in Version 1, describing it as less distracting and more polished.

  • They appreciated the clean layout and visual hierarchy, which made it easier to explore key sections like services and how the process works.

  • The use of visual elements such as icons and service cards made the design feel approachable and engaging.

Based on user feedback, Version 2 was selected as the foundation for the website's design as its balanced use of visuals and content effectively aligned with user preferences and expectations.

These versions were tested with users to gather their impressions:

User Feedback on Version 1:

  • Users appreciated the professional appearance but found the central blur in the hero section distracting.

  • The heavier focus on text made the layout feel overwhelming, which hindered quick scanning of information.

User Feedback on Version 2:

  • Users preferred the subtle gradient background over the central blur in Version 1, describing it as less distracting and more polished.

  • They appreciated the clean layout and visual hierarchy, which made it easier to explore key sections like services and how the process works.

  • The use of visual elements such as icons and service cards made the design feel approachable and engaging.

Based on user feedback, Version 2 was selected as the foundation for the website's design as its balanced use of visuals and content effectively aligned with user preferences and expectations.

Landing Page : Initial Design and Feedback

Landing Page : Initial Design and Feedback

Landing Page : Initial Design and Feedback

5. Iterations: Refining Based on Insights

5. Iterations: Refining Based on Insights

5. Iterations: Refining Based on Insights

High-Fidelity Mockups: Showcasing the Core Experience

High-Fidelity Mockups: Showcasing the Core Experience

High-Fidelity Mockups: Showcasing the Core Experience

The high-fidelity mockups reflect a user-centered design approach, focusing on clarity, functionality, and trust-building. Each screen was thoughtfully crafted to address user needs.

The high-fidelity mockups reflect a user-centered design approach, focusing on clarity, functionality, and trust-building. Each screen was thoughtfully crafted to address user needs.

The high-fidelity mockups reflect a user-centered design approach, focusing on clarity, functionality, and trust-building. Each screen was thoughtfully crafted to address user needs.

Hi-fidelity Mockups - All Screens

Hi-fidelity Mockups - All Screens

Hi-fidelity Mockups - All Screens

User-Driven Refinements

User-Driven Refinements

After the initial design was tested with users, several refinements were made to enhance the user experience and align the website more closely with user needs.

After the initial design was tested with users, several refinements were made to enhance the user experience and align the website more closely with user needs.

After the initial design was tested with users, several refinements were made to enhance the user experience and align the website more closely with user needs.

Refined Iterations based on User Feedback

Refined Iterations based on User Feedback

Refined Iterations based on User Feedback

Final Screens

Final Screens

Final Screens

Learnings

Learnings

Learnings

This project offered valuable lessons in designing for empathy and functionality within constraints:

  1. User Feedback Shapes Better Outcomes
    Iterative testing revealed actionable insights, leading to features like scrollable therapist profiles and streamlined navigation that directly addressed user needs.


  2. Creative Solutions for Limited Resources
    Integrating tools like Calendly demonstrated the value of leveraging third-party solutions to deliver practical results.


  3. Empathy at the Core
    Every design decision, from calming visuals to culturally sensitive content, was guided by the goal of creating a safe and welcoming space for users.


  4. Balancing Aesthetics with Usability
    Achieving a cohesive design that feels inviting while ensuring functionality was a key challenge, resolved by prioritising clarity and accessibility.

This project offered valuable lessons in designing for empathy and functionality within constraints:

  1. User Feedback Shapes Better Outcomes
    Iterative testing revealed actionable insights, leading to features like scrollable therapist profiles and streamlined navigation that directly addressed user needs.


  2. Creative Solutions for Limited Resources
    Integrating tools like Calendly demonstrated the value of leveraging third-party solutions to deliver practical results.


  3. Empathy at the Core
    Every design decision, from calming visuals to culturally sensitive content, was guided by the goal of creating a safe and welcoming space for users.


  4. Balancing Aesthetics with Usability
    Achieving a cohesive design that feels inviting while ensuring functionality was a key challenge, resolved by prioritising clarity and accessibility.

This project offered valuable lessons in designing for empathy and functionality within constraints:

  1. User Feedback Shapes Better Outcomes
    Iterative testing revealed actionable insights, leading to features like scrollable therapist profiles and streamlined navigation that directly addressed user needs.


  2. Creative Solutions for Limited Resources
    Integrating tools like Calendly demonstrated the value of leveraging third-party solutions to deliver practical results.


  3. Empathy at the Core
    Every design decision, from calming visuals to culturally sensitive content, was guided by the goal of creating a safe and welcoming space for users.


  4. Balancing Aesthetics with Usability
    Achieving a cohesive design that feels inviting while ensuring functionality was a key challenge, resolved by prioritising clarity and accessibility.