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.
View Website
Open in New Tab Icon
my contributions
User research, UX design, Webflow development
June 2021 - January 2022
The team
1 x Product Designer (me)
Stakeholder Team


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.
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.


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.

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.
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.


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.

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.

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.
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.

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.

Comment Bubbles