Full site redesign for Plan International Canada
Client: Plan International Canada (PIC) is the Canadian branch of a global non-profit with a mission of advancing children’s right’s and equality for girls
Project: PIC was overdue for a site redesign. Their compelling mission was being seriously hindered by an outdated tech platform, a piece-meal content strategy, outdated branding and a lack of UX strategy. Our team was hired to replatform their website and construct a new approach to UX and design that worked in collaboration with their team’s content overhaul. As the UX lead on the project, I was responsible for both creating and executing the UX strategy.
Project Overview
Site challenges:
The website did not help funnel its different audiences to the appropriate places
The visual identity of the site didn’t live up to the credibility, compassion, and impact of their work.
due to the lack of hierarchy, the many different campaigns and ways to donate were competing for the users attention.
The website structure was not only impeding the user experience, but also the ability for the client’s content team to manage and grow the site efficiently
Project challenges:
PIC was in the midst of a total content overhaul whilst also evolving the foundational programs they offered. This presented moving goal posts as we worked to develop a site structure that made sense while also trying to stay within timeline and budget.
Goals:
Create clear paths to donations and other forms of giving
Design a donation experience that allow for seamless account creation and login
Create a site structure that made sense for their different audiences
Form a UX strategy that would support their content changes and make it easier for PIC to manage and grow the site in the future
Maintain brand consistency and UX/design hierarchy while supporting the many unique campaigns
Role and responsibilities: As the UX lead, I created a UX project roadmap that aligned with the budget and timeline. This meant selecting and conducting all UX activities and research methodologies and frequently presented deliverables to client stakeholders. I worked closely with design, development, business analytics and the client-side product owner to bring this project to life
Methodologies
Secondary research
Stakeholder interviews
User interviews
Results:
By addressing the major pain points of the current donation experience, user abandonment on donation flow decreased by 31%
Digital donations through the website increased by 14%
Deliverables
UX Audit
Templates/Wireframes
Component library
Information Architecture
Tools
Figma
Confluence
Jira
Research + Discovery
Stakeholder Interviews + Requirements Gathering
PIC’s website had a lot of different stakeholder groups. As part of my UX strategy, each week I led a meeting with a different stakeholder group to conduct interviews to learn about the different parts of the site that would be impacted by the redesign. This revealed a lot about the different, and often conflicting goals of each stakeholder group, which prompted us to take steps earlier in the process to push for more clarity on the business priorities for the site. What we learned from these interviews was also foundations to our understanding of the the site’s different user groups, and from them came the first round of business and functional requirements that I helped create alongside our business analyst.
I conducted a UX audit of the PIC website to better understand what its strengths and weaknesses were. It quickly became clear this was a site that had been pieced together over time, and with that came a huge inventory of components, many redundancies, and a lack of consistency when it came to UX, content and design.
Another main concern was the sites mobile experience. Technically the site was responsive but the mobile experience was significantly less user-friendly, which led me to research statistics for online mobile giving in the non-profit industry.
Secondary Research
I learned that in 2021, 28% of all online donations were made on mobile devices, and that mobile donations had more than tripled since 2014, a trend we expected to continue. (Update: as of 2026, 45% of all online giving comes from mobile devices and site with responsive design receive 126% more mobile donations than non-optimized sites.)
Current Site Analysis
User Interviews
We didn’t have a large research budget, but we were able to conduct user interviews for a part of the site experience that was used by PIC’s internal team that took donations over the phone and in-person.
Component audit
I began compiling all of the sites components and grouping them by functionality and purpose in order to:
Understand the needs of the current site so that we didn’t lose any important component functionality in the new build
Reduce component redundancies for better site UX, easier site management, and lower development lift
Assist the design team in improving visual consistency throughout the new site
Identify and flag up accessibility issues to the PIC team
Competitive/Comparative Analysis
Next, I took a look at other reputable non-profit organizations to see how they were approaching some of the key digital experiences on their sites. One of the most valuable takeaways was how these organizations approached their donation form:
Donation form observations
Visually focused moment with minimal distractions
Compelling, relevant image
One-time or monthly donation options
Buttons with pre-set donation amounts
UNICEF
Charity Water
Human Rights Campaign
Paths to donation
I also noticed that the best examples I found had 1 clear, primary call to action in their navigation, which the Plan website navigation lacked. This contributed to the disorganized feeling of their website and the lack of clear direction given to the user.
Findings
Lack of visual hierarchy, particularly at key moments in the user journey
Lack of UX and design consistency
Lack of clear and distinct paths for different user groups
Research observations
Streamline the paths to donation
We needed to create clear and encouraging paths to donation for users at all levels of the journey.
How?
Create a strategy for driving donors to and through the different donation paths
More focused calls to action that help the user start down the appropriate funnel and donate when ready.
Make content more ingestible
Create a UX approach that provides clear guidance on where content should be concise vs more descriptive.
How?
Collaborate with the Plan content team around how UX recommendations and content strategy can work together to keep messaging informative but concise via
Create more visual consistency
Improve consistency between like pages and condense the amount of components being used to build the site
How?
Further audit the site experience to create a component and page template strategy that would help create more visual consistency and an easier site to maintain moving forward
Lack of visual hierarchy at key moments
Lack of UX and design consistency
Lack of clear and distinct paths for different user groups
Streamline the paths to donation
We needed to create clear and encouraging paths to donation for users at all levels of the journey.
Create a strategy for driving donors to and through the different donation paths
More focused calls to action that help the user start down the appropriate funnel and donate when ready.
The Plan website was overwhelming. There were so many different options for donating and it was easy to get lost down a rabbit hole of the different programs and campaigns. The site UX didn’t help funnel users to a place where they could easily donate. It needed both a UX and design solution that prevented the cognitive overload it was currently giving users. There was a lot of compelling content, but the site needed UX guidance and constraints to help limit content in key areas.
My recommendations
Strategy and Execution
Content conundrum
The client’s content team was struggling to make progress on the content overhaul, in part due to shifting priorities of the organization, which meant we were lacking critical information needed to build out the blueprint for the site. Our development team needed us to be in the design phase ASAP so they could start building in order to meet deadline, but the client was understandably worried that what we were designing wouldn’t allow them the content flexibility they needed.
I landed on creating 15 flexible templates that would give the content team the structure and constraints in needed to follow good UX practices, but enough flexibility that they didn’t feel trapped by what we built. Each of those templates would get 1 fully designed page as a proof of concept to the client and so that the development team could start building the components.
This approach ended up being very useful as it allowed our team greater influence over the content that ended up on the site
“You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is.”
Donation and sponsorship flows
There were a lot of different ways to donate to Plan, including cash donations, child sponsorships, and donating gifts. To accommodate this, I had to design a donation experience that was built of versatile components to fit the needs of each of these donation types while accounting for logged-in states, account creation, as well as adding new donations within the donation flow.
Sponsorship flow:
Original navigation:
Observations:
Lack of visual hierarchy in the navigation makes it unclear what the main call to action is for the user
Using the program ‘Because I Am a Girl’ as a main call to action in the navigation could be confusing to some users who are not familiar with the program
It is not clearly indicated what is a button vs what is a drop-down menu
Despite hearing that ‘Sponsor a Child’ is their main program, it is not featured in the main navigation
Updated navigation:
The updated navigation solved the hierarchy issue, placing a clear emphasis one main call to action while still keeping the donation CTA present
Dropdowns vs buttons are clearly indicated
To help consolidate the navigation, the ‘For Sponsors’ content from the original nav is now handled on the Sponsor a Child landing page, which the where the primary blue CTA leads to
I removed the ‘live chat’ in the auxiliary navigation and turned it into an omnipresent floating icon on the page to improve visibility and de-clutter the navigation
I decided to remove the phone number since it was featured on the ‘Contact us’ page
a ‘Cart’ feature was added to the auxiliary navigation to help users return to any interrupted donation flows
Overall, we landed on a sleek, consolidated, and much more user-friendly navigation for the new site
Wireframes almost always depict a specific page, whereas a template can depict the layout of a page type, and many different pages use the template as a guide and a starting point.
What we ended up with was providing them with 15 page templates, and with each template we provided a wireframed example of a specific page that would use that template.