Zoe Folts
UX/UI Design Development
Therapy website Redesign
Role: Research UX/UI
Tools: Figma & Figjam
Design process
Discovery
research
Debrief
Design
User Testing
Present
Discovery
OVERVIEW
Zoe Folts is a seasoned local therapist with over 20 years of experience. While Zoe already had a website, my task was to undertake a complete redesign. Retaining the existing content, my challenge was to reorganize it in a more intuitive and aesthetically pleasing manner, ensuring a seamless blend of functionality and visual appeal.
website before redesign:
Research
Competitor analysis
As I embarked on the project, my first step involved a comprehensive analysis of competing therapy websites. Given the nature of therapy, where the therapist is inherently intertwined with the service they provide, it was challenging to separate the evaluation of the websites from the portrayal of the therapists themselves. My focus during this analysis extended beyond the layout and structure of these sites; I delved into how each platform effectively conveyed the essence of the therapist's service. By examining the interplay between design and the portrayal of services, I aimed to draw insights that would inform the thoughtful redesign of Zoe Folts' website.
In my analysis of various therapy websites, I focused on the layout and how they effectively portrayed their services. Key insights emerged during this examination:
-
Branding Significance:
-
Emphasizing the importance of branding, successful websites conveyed their intended message through a harmonious blend of color schemes, carefully chosen wording, distinctive logos, and impactful photography.
-
-
Simplicity is Key:
-
Simplicity was a recurring theme; a user-friendly design was prioritized. Crucial elements included easy appointment booking from any page and clear emphasis on the top three priorities identified by the therapist.
-
-
Personal Connection:
-
Websites that provided insights into the therapist's personality and included a photo were perceived as more trustworthy. Establishing a personal connection with visitors was deemed crucial.
-
-
Demonstrating Care:
-
Websites that offered valuable, free resources conveyed a genuine concern for people's mental health. This not only showcased expertise but also demonstrated a commitment to the well-being of visitors beyond client acquisition.
-
-
Contrast for Accessibility:
-
High contrast between background and text elements was highlighted for user-friendliness. Important buttons needed to stand out, ensuring easy navigation and a seamless user experience."
-
​
user Interviews
As part of my research process, I conducted interviews with five individuals who have firsthand experience with therapy. The focus of these interviews was to understand their approach to booking appointments, particularly if they utilized a therapy website. Gathering insights directly from users provided valuable perspectives on their navigation preferences, user experience, and any noteworthy aspects of the booking process. This qualitative data serves as a foundation for making informed design decisions in creating a more user-centric and accessible appointment booking system for Zoe Folts' website redesign. Here are some quotes that stood out:
"I went to her website and just called her immediately just because that seemed easiest"
"I like to see a picture of them before booking an appointment so I can see who I'm speaking to"
"A website is important to me, it shows they can keep up with the times and are aware of todays world "
AFFINITY MAPPING
To distill insights from my interviews and identify common themes and pain points, I created an affinity map. This visual representation allowed me to gain a comprehensive understanding of user experiences and discern the elements that contribute to an effective therapy website. You can view the full affinity map on Figma by clicking the photo below.
Key Insights from Affinity Map:
-
Specific Therapy Initiatives:
-
Users commonly began therapy for specific reasons, emphasizing the importance of addressing targeted needs in therapy website content.
-
-
Therapist's Approach Matters:
-
Users are interested in the therapist's approach, highlighting the significance of providing information about the therapeutic methods used.
-
-
Same-Gender Preferences:
-
Many patients prefer therapists of the same gender, showcasing the importance of personal comfort in the therapeutic relationship.
-
-
Clarity Overload:
-
Information overload on therapy websites led to confusion for users, reinforcing the need for clear and concise content.
-
-
Consistent Website Vibe:
-
Users appreciate websites that match the therapist's personality, emphasizing the importance of cohesive branding.
-
-
Desire for Therapist Visuals:
-
A majority of users prefer to see a photo of the therapist, fostering trust and connection through a visual representation.
-
-
Accessible Booking Focus:
-
The primary website goal should be easily accessible throughout, streamlining the user experience, with a focus on the main action of booking sessions.
-
-
Insurance Information Request:
-
Users want clear information on whether the therapist accepts insurance, addressing a practical consideration for potential clients.
-
-
Phone Calls Preferred:
-
Many individuals prefer making the first appointment via a phone call, valuing the ease and personal connection achieved by hearing the therapist's voice."
-
​
User Persona
Based off the user interviews and Affinity map, I created a person that would potentially find my app useful. Teresa is a CEO and looking to hire.
Debrief
I proposed a redesign project for the existing website of Zoe Folts, a local therapist with over 20 years of experience. The objective was to enhance the website's visual appeal, user experience, and organizational structure while retaining the core content. Through this project, I aimed to create a more inviting and accessible online platform for Zoe Folts, aligning with her therapeutic approach and fostering a positive connection with potential clients
PROPOSAL
PROJECT GOALS
After making a clear proposal and goal, I had to make sure my business goals, technical considerations and user goals aligned.
After gaining a comprehensive understanding of my project goals, the next step was to prioritize the essential features. Given that this project involves redesigning an existing website, the priorities remained largely unchanged. One notable decision was to de-prioritize the extensive list of links provided by my client, Zoe Folts, the therapist, as it was determined to be less crucial for the redesign.
PROJECT GOALS
The primary focus of the entire website was to facilitate either booking a free consultation or contacting Zoe. Ensuring ease of access to these key actions, I incorporated them seamlessly into the user flow. Recognizing potential challenges for users in navigating links and resources, I incorporated this into the user flow, allowing for testing and adjustments as needed.
Design
Low-Fi Frames
This was a swift phase in the process, aimed at ensuring a comprehensive roadmap before delving into the final product. I designed the home page to feature everything, giving prominence to the consultation and contact options. Additionally, the side hamburger menu was reserved for specific sections, enhancing overall navigation clarity.
Hi-FI wireframes
After conducting initial user testing on my low-fi frames, the positive feedback indicated that individuals found the app/website process to be intuitive and enjoyable. Encouraged by this response, I proceeded to develop my high-fidelity frames. If you click on the frame below, it will direct you to the complete Figma file for a more in-depth exploration
User Testing
two specific tasks for usability testing:
-
Task 1: "Schedule a free consultation with Zoe, then go back to the home page."
-
This task assesses the user's ability to navigate and utilize the scheduling feature while also evaluating the ease of returning to the home page.
-
-
Task 2: "There are two ways to get to links and resources; can you please navigate to them."
-
This task evaluates the user's understanding and proficiency in accessing links and resources through both available pathways, providing insights into the effectiveness of the navigation structure.
-
These tasks cover key aspects of the user experience, including functionality, navigation, and the ability to perform essential actions on the website. After users complete these tasks, their feedback can guide further improvements to enhance usability.
-
All five testers successfully completed both tasks effortlessly without encountering any issues.
-
Jeff highlighted that the website tends to be verbose, suggesting the need to break up certain sections of text for improved readability.
ITERATIONS
After user testing :
​
Change 1:
​The laptop version of Zoe's website features a single extensive homepage with limited subpages. Clicking on a section directs users to the relevant part of the page. However, for the phone version, this approach isn't as practical due to the smaller screen size. Implementing the same scrolling mechanism could be cumbersome and potentially confusing for users. Therefore, my decision was to create a comprehensive homepage incorporating all elements, accompanied by a hamburger menu facilitating direct navigation to specific sections on separate pages.
Before :
​
​
After :
​
​
Change 2:
Following user testing, an interviewer highlighted the length of my paragraph, suggesting that it could benefit from being split into more digestible segments. Additionally, I aimed to incorporate more design elements into the content.
Before :
​
​
After :
​
​
Present
Before Redesign :
​
​
After Redesign :
​
​
Final prototype
You can click on the blue button to view my prototype : )
TakeAWAYS
Collaborating closely with a therapist on this project provided a unique perspective. The process of redesigning an existing website and actualizing someone else's vision presented a distinct challenge compared to conceiving an entirely new app. Witnessing the transformation and, even more satisfyingly, seeing my client derive joy from the end result was truly rewarding. This project not only expanded my skill set but also deepened my appreciation for the collaborative nature of design, where translating a vision into a tangible digital experience creates meaningful impact.