
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:
Donation details
Contact information
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:
Donation details
Contact information
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.








The new PCFC website is launched at prostatecanada.ca.
This new website not only improved user experience but also contributed to a 20% increase in total donations in 2024 compared to 2023.
The new PCFC website is launched at prostatecanada.ca.
This new website not only improved user experience but also contributed to a 20% increase in total donations in 2024 compared to 2023.


Let’s Connect & Work Together!
@2025 Charlotte Pan Portfolio. ALL RIGHTs RESERVED
Let’s Connect & Work Together!
@2025 Charlotte Pan Portfolio. ALL RIGHTs RESERVED
Let’s Connect & Work Together!
@2025 Charlotte Pan Portfolio. ALL RIGHTs RESERVED