Redesigning the CFP Website
In this case study, discover how I redesigned a website for Camelback Family Planning (CFP), a small clinic specializing in abortion care.
Recognizing the sensitivity of the topic, I carefully redesigned the website to empower users to access and retain critical information effortlessly.
Key design strategies included a mobile-first approach, personalized content visibility, and creating a clear visual hierarchy to guide users effectively.
my contributions
User research, UX design, Webflow development
timeline
June 2021 - January 2022
The team
1 x Product Designer (me)
Stakeholder Team
discovery
By the age of 45, one in every four women has had an abortion. Despite its prevalence, public knowledge remains limited due to the politicalization of the topic, leading to challenges in accessing safe abortion care.
In Phoenix, Arizona, where abortion care access faces unique barriers, Camelback Family Planning (CFP) has been a vital resource since 1999.
Camelback Family Planning Location
Despite its critical role, CFP's previous website fell short in providing essential, easily digestible information, leading to an overload of repetitive inquiries to their front office.
Previous Camelback Family Planning Website
Recognizing this issue, the clinic owner reached out about a redesign. Our goal was not just to revamp the site but to make it a powerful tool for clarity and patient empowerment.
Given Arizona's specific restrictions—like the requirement for two separate appointments at least 24 hours apart—it became imperative that the website communicate regulatory hurdles and care processes clearly and comprehensively. This would help prospective patients better understand what to expect, thereby alleviating some of the logistical and emotional complexities involved in accessing care.
Ideation
User Research
To ensure a user-centric approach, I conducted research that involved first-hand observation and interactions with patients. Over a two-month period, I engaged in phone and in-person interactions, addressing questions, and assisting with check-ins and check-outs. This process revealed that the current website's information was not effectively accessed or absorbed, leading to repetitive inquiries from patients.
To gain first-hand data, I distributed a survey that inquired about how easy information was to find on the previous website. The survey received 91 responses and provided valuable quantitative and qualitative insights. The survey results highlighted areas where users struggled to find vital information, shaping the redesign's direction.
Quantitative Results
Approximately 1 in 2 (51%) struggled to find information about financial assistance.
Approximately 1 in 4 (23%) struggled to find information about the abortion process.
Approximately 2 in 5 (41%) struggled to find information about abortion fees.
Qualitative results
Theme #1
Abortion care is not common knowledge
Theme #2
Information on the current website is either hard to find or outdated
Theme #3
People seek reassurance on the legitimacy of abortion clinics
Theme #4
People have abortions for a variety of reasons
Theme #5
A diverse set of individuals seek abortion services
Content Audit & Inventory
To assess the existing website's design, I conducted a content audit and inventory. Among the 22 pages, 19 contained outdated material, and 10 were not easily discoverable through the main navigation. This audit exposed critical issues with navigation and content organization.
Complex nested secondary navigation made it challenging for users to find certain pages, while excessive text and limited formatting hindered content skimming. Additionally, inadequate whitespace affected visual clarity and readability, detracting from the overall user experience.
Previous Website Site Map
For contrast, below is the redesigned website site map.
Updated Website Site Map
Early Designs & Iteration
Armed with an understanding of the challenges, I embarked on designing a solution that prioritized accessibility and information retention. Low-fidelity designs, sketches, and wireframes were explored to conceptualize the redesigned website's vision. These early-stage designs lay the groundwork for creating an intuitive user experience.
Initial Mobile Wireframes
To validate and refine the design concepts, I organized usability studies with a group of end-users. This feedback-driven process allowed me to identify areas for improvement and fine-tune the website's functionality. By actively involving users in the iterative design process, I ensured that the final product would resonate seamlessly with their needs.
Usability Artifacts: Script, Plan, and Key Observations
Design
The full website can be viewed on the Camelback Family Planning site. Explore the examples below to understand the noteworthy design decisions that were made.
Simplified Navigation
Based on the findings from the content audit and inventory, streamlining the website's navigation was essential to enhancing accessibility. Redesigning the navigation system focused on eliminating unnecessary content, consolidating related topics, and adopting semantic labels for each category.
In the previous version, pages were nested within navigation items, and essential high-traffic pages, such as pricing details, were tucked away in the footer. The new navigation ensures that critical information is front and center for the user.
Redesigned Website Navigation
The new website has a total of 7 pages, compared to the previous site’s 21. Note that the clinic owner requested that two additional pages be added to the website: Miscarriage Management and Fetal Abnormalities.
Previous Website Navigation
Mobile-First Approach
With 85% of users visiting CFP's website from mobile devices, I utilized a mobile-first design strategy. This consisted of starting all of the designs on mobile screen sizes and incorporating drawer components to allow users to customize the content they saw. Additional design decisions were incorporated to improve readability and navigation.
Finalized Mobile Designs
Expandable Content
Despite reducing the content by over half, a significant amount of essential information still remained. However, with limited horizontal space on mobile devices, I wanted to avoid excessively long pages while retaining necessary content. To address this challenge, I introduced a drawer component that allowed users to expand specific content based on their preferences.
Expandable Content
By tapping or clicking a button, users could reveal the container's contents, and when expanded, they could easily compress it, hiding the content. This design empowers users to customize their experience to focus on the details that are most pertinent to them.
Expandable Content GIF
Scannable Design
To ensure users could quickly find and retain essential information, I focused on creating a design that made scanning easy and optimized content accessibility. I incorporated visual elements that established a clear visual hierarchy and attracted attention when necessary.
Warning Boxes
There was certain content on the site that, if missed, could negatively impact the user's experience at the clinic. For this content, I implemented a UI element I refer to as "warning boxes". Warning boxes were yellow containers used to highlight critical content. These were used sparingly to ensure that they were rare and stood out prominently to users.
Warning Box Design
Comment Bubbles
Complementing the warning boxes, comment bubbles served as a subtle yet effective way to draw attention to specific user questions while they navigated the site. The comment bubbles offered valuable clarifications and insights without overwhelming the users.
Comment Bubbles Design