back

to top

project overview
project overview

Formerly known as Prostate Cancer Foundation BC (PCFBC), PCFC is a grassroots nonprofit established in 1997 by prostate cancer patients. It plays a vital role in providing leadership and resources for prostate cancer support, awareness, and research across Canada.

In 2023, PCFC underwent a significant rebrand—expanding its scope nationally and unifying three previously distinct subgroups. As a result, a complete redesign and redevelopment of its website was required to reflect the new brand and integrated services.

Formerly known as Prostate Cancer Foundation BC (PCFBC), PCFC is a grassroots nonprofit established in 1997 by prostate cancer patients. It plays a vital role in providing leadership and resources for prostate cancer support, awareness, and research across Canada.

In 2023, PCFC underwent a significant rebrand—expanding its scope nationally and unifying three previously distinct subgroups. As a result, a complete redesign and redevelopment of its website was required to reflect the new brand and integrated services.

goal
goal
  • Restructure and reorganize content for better navigation and easier access to critical resources.

  • Improve the donation experience to encourage engagement and reduce drop-offs.

  • Create a user-friendly interface tailored to the needs of patients, families, healthcare professionals, donors, and researchers.

  • Restructure and reorganize content for better navigation and easier access to critical resources.

  • Improve the donation experience to encourage engagement and reduce drop-offs.

  • Create a user-friendly interface tailored to the needs of patients, families, healthcare professionals, donors, and researchers.

my role
my role

graphic and ux designer

graphic and ux designer

timeline
timeline

6 months

6 months

tools
tools

Figma, Adobe Creative Suite, Corel Draw

Figma, Adobe Creative Suite, Corel Draw

challenge 1: Inefficient Navigation
challenge 1: Inefficient Navigation

Problem:

The previous site had a main header bar and separate in-text submenu tabs on each page, leading to a clunky and unintuitive navigation experience.

Problem:

The previous site had a main header bar and separate in-text submenu tabs on each page, leading to a clunky and unintuitive navigation experience.

Solutions:

We created a unified 3-level dropdown menu within the main header for desktop and tablet. For mobile, we implemented a sliding 3-level menu from the left side, providing a more intuitive and accessible navigation structure.

Solutions:

We created a unified 3-level dropdown menu within the main header for desktop and tablet. For mobile, we implemented a sliding 3-level menu from the left side, providing a more intuitive and accessible navigation structure.

challenge 2: Limited Resource Accessibility
challenge 2: Limited Resource Accessibility

Problem:

The Facts & Resources section offered minimal information, forcing users to contact support or search externally for details.

Problem:

The Facts & Resources section offered minimal information, forcing users to contact support or search externally for details.

Solutions:

We expanded the section with in-depth content including articles, videos, and guides. Key improvements included:

  • A search bar in the top-right header for site-wide keyword search.

  • Expandable content toggles within resource pages, allowing users to easily scan and access relevant sections.

  • A dropdown filter in the video library to help users find content quickly without excessive scrolling.

Solutions:

We expanded the section with in-depth content including articles, videos, and guides. Key improvements included:

  • A search bar in the top-right header for site-wide keyword search.

  • Expandable content toggles within resource pages, allowing users to easily scan and access relevant sections.

  • A dropdown filter in the video library to help users find content quickly without excessive scrolling.

challenge 3: Friction in Donation Flow
challenge 3: Friction in Donation Flow

Problem:

The donation form was a long, single page—especially cumbersome on mobile. There was no dedicated Thank You page, which could leave users uncertain about whether their donation was successful.

Problem:

The donation form was a long, single page—especially cumbersome on mobile. There was no dedicated Thank You page, which could leave users uncertain about whether their donation was successful.

Solutions:

We redesigned the donation flow into a clear 3-step process:

  1. Donation details

  2. Contact information

  3. Payment information

We also introduced a dedicated Thank You page, giving users immediate confirmation and a sense of appreciation for their contribution.

Solutions:

We redesigned the donation flow into a clear 3-step process:

  1. Donation details

  2. Contact information

  3. Payment information

We also introduced a dedicated Thank You page, giving users immediate confirmation and a sense of appreciation for their contribution.

usability testing: tasks
usability testing: tasks

We conducted usability testing comparing the old website with the redesigned prototype. Participants were asked to complete key tasks:

  • Make a one-time donation as a gift and send a thank-you email.

  • Find information on nutrition for prostate cancer patients.

  • Locate a support group in Kelowna.

  • Identify the process to apply for a cancer research grant.

  • Look up details on upcoming events.

We conducted usability testing comparing the old website with the redesigned prototype. Participants were asked to complete key tasks:

  • Make a one-time donation as a gift and send a thank-you email.

  • Find information on nutrition for prostate cancer patients.

  • Locate a support group in Kelowna.

  • Identify the process to apply for a cancer research grant.

  • Look up details on upcoming events.

usability testing: insights
usability testing: insights
  • All users reported significantly improved navigation.

  • The new multi-step donation form was clearer and more user-friendly.

  • Some still found the donation process too long.

  • Many wanted to review donation amounts before submitting.

  • The gift donation option was hard to find for some users.

  • Users wanted more detailed event information before registering.

  • All users reported significantly improved navigation.

  • The new multi-step donation form was clearer and more user-friendly.

  • Some still found the donation process too long.

  • Many wanted to review donation amounts before submitting.

  • The gift donation option was hard to find for some users.

  • Users wanted more detailed event information before registering.

Iterations on donation section Based on Feedback
Iterations on donation section Based on Feedback
  • The original donation flow was split further, creating a dedicated "Gift Details" step, making this option more visible and the overall process easier to follow.

  • A donation summary with an "Edit" option was added at the top of each step, allowing users to quickly review or change their donation.

  • The "Next" and "Submit" buttons were changed to solid orange for stronger visual emphasis and clearer guidance.

  • The original donation flow was split further, creating a dedicated "Gift Details" step, making this option more visible and the overall process easier to follow.

  • A donation summary with an "Edit" option was added at the top of each step, allowing users to quickly review or change their donation.

  • The "Next" and "Submit" buttons were changed to solid orange for stronger visual emphasis and clearer guidance.

@2025 Charlotte Pan Portfolio. ALL RIGHTs RESERVED

@2025 Charlotte Pan Portfolio. ALL RIGHTs RESERVED

@2025 Charlotte Pan Portfolio. ALL RIGHTs RESERVED