Full site redesign for Plan International Canada

Client: Plan International Canada is the Canadian branch of a global non-profit with a mission of advancing children’s rights and equality for girls

Project: A full site redesign that included a technology re-platform and a total content overhaul.

Project Overview

The Challenge:

  • Taking over from a previous design vendor months into the project

    • The deliverables we inherited lacked context

    • The previous vendor was not eager to collaborate with us given they were let go

    • Plan didn’t want to pay to re-do activities and deliverables

  • The organization was undergoing lots of changes to their programs which created some moving targets for our team

  • Challenges with content migration (they didn’t know how to do one)

High-level goals:

  1. Define timeline, deliverables and activities needed to bring the rest of the project to completion

  2. Unify content, technological constraints, business needs and user needs into a cohesive digital experience.

  3. Design and deliver page templates and components that give direction as well as flexibility for Plan to populate the new site after we hand off the project

Methodologies

Secondary research

Stakeholder interviews

User interviews

Results:

Deliverables

Wireframes

Component library

Information Architecture

Tools

Figma

Confluence

Jira

Research + Discovery

Stakeholder Interviews + Requirements Gathering

With so much to get caught up on, and fast, I organized a weekly team meeting with the Plan product owner and each week we included members of a different stakeholder group within the organization to conduct interviews about the different parts of the site that would be impacted by the redesign.

The information gathered from these early conversations informed the business and functional requirements that I co-authored with our teams business analyst

I conducted UX audit of the Plan website to better understand the current site and what its strengths and weaknesses were

Current Site Analysis

Observations:

  • A lot of compelling content about the different causes they serve

  • Lots of facts and figures that measure the impact Plan makes in the lives of the people they serve

  • A compelling mission statement

  • Very large inventory of components with lots of redundancies

  • An overall lack of visual and structural consistency

  • Lack of visual hierarchy

  • Overwhelming amount of content made the information hard to digest

Competitive/Comparative Analysis

Next, I took a look at the digital experiences of other non-profits, both those that focused on children as well as others, to find inspiration for the new site.

Donation form

Observations:

  • Clean and focused design that limited distractions for the user, including removing the site navigation

  • Toggle for one-time or monthly donations

  • Buttons to easily select different donation amounts, or input custom amount

  • Often paired with a relevant and compelling image

UNICEF

Charity Water

Human Rights Campaign

Paths to donation

The best examples I found had 1 clear, primary call to action in their navigation, which was something the Plan website navigation lacked and contributed to the disorganized feeling of their website.

Research observations

Streamline the paths to donation

  • Create a funnel 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.

  • Reduce visual clutter

Make site content more ingestible

  • Collaborate with the Plan content team around how UX recommendations and content strategy can work together to keep messaging informative but concise

Create more visual consistency

  • Eliminate component redundancies

  • Stop using images in place of components (this was also an accessibility issue)

  • Create a page template strategy

  • The amount of options for donating was overwhelming

  • Easy to get lost in all the different programs and campaigns

  • Site UX didn’t help funnel users to a place where they could easily donate

  • Visually chaotic and it needed both a UX and design solution that prevented the cognitive overload it was currently giving users

  • Lots of good content that needed some refining and some UX constraints to help users focus on what is most important

My recommendations

Strategy and Execution

Templates

Create 15 templates for the site redesign

Unsurprisingly, there was some confusion with the client, and even within our own team at times, on what the difference between a wireframe, a template and a page design was. Some on the Plan team were expecting to see wireframes of specific pages, and our developers were expecting to see templates that they would then create in the CMS. In the end, we needed both. So we landed on creating 15 templates, each with an accompanying wireframe of what a page would look like using that template

There was a lot of discussion on the content team around how to go about creating the templates when their team was still in the thick of the content overhaul. They were new to the idea of a page template and were concerned about the flexibility it would offer them as the specific content for each page would not be created till further down the line.

“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.”
— Mark Boulton

Component audit

I began compiling all of the sites components and grouping them by functionality and purpose to find opportunities to condense.

This work would help us reduce the amount of development work needed to build the site as well as also maintain it down the line.

I created a component library to make sure that we were accounting for all of the functionality needed to meet those needs within the digital experience. This document was used during our functional requirements meetings with the client.

  • Reduce component redundencies

  • Facilitate both UX and design consistency

  • Meet accesibility standards

  • Inform functional requirements

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