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:
The Busy Professional: Amit, 35
A high-pressure corporate worker seeking convenient, discreet mental health support.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:
The Busy Professional: Amit, 35
A high-pressure corporate worker seeking convenient, discreet mental health support.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:
The Busy Professional: Amit, 35
A high-pressure corporate worker seeking convenient, discreet mental health support.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:
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.Creative Solutions for Limited Resources
Integrating tools like Calendly demonstrated the value of leveraging third-party solutions to deliver practical results.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.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:
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.Creative Solutions for Limited Resources
Integrating tools like Calendly demonstrated the value of leveraging third-party solutions to deliver practical results.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.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:
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.Creative Solutions for Limited Resources
Integrating tools like Calendly demonstrated the value of leveraging third-party solutions to deliver practical results.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.Balancing Aesthetics with Usability
Achieving a cohesive design that feels inviting while ensuring functionality was a key challenge, resolved by prioritising clarity and accessibility.
More Work
More Work
Profile Page Design For Hiring Platform
Profile Page Design For Hiring Platform
Designing MexiCraze: Healthy Meals, Simplified
Designing MexiCraze: Healthy Meals, Simplified
Drooid Interview Assignment - UI Redesign
Drooid Interview Assignment - UI Redesign
