Youth & Philanthropy Initiative

Designing a dynamic website and dashboard to reduce time spent on impact reporting by 95%.

Type of Work

Web Design & IT Consulting

Role

Design Consultant

Timeframe

2 months

Team

  • Haifa Staiti, project manager, Philanthropy Solutions Consultant at Grantbook
  • Rachel Paris, project liaison, Youth & Philanthropy Initaitive

Outcomes

Reduced the hours spent on impact reporting by 95%.

  • Our client-side PM, Rachel, reported that an impact report she used to take 2 months to complete was completed in one afternoon, thanks to the new tech stack we'd set her up with
  • Also, Rachel received a promotion to Manager because of this project!
1
Client team member promoted
95%
Reduction in Hours Spent on Website & Impact Report Management
53%
Increase in Time-on-Page

Challenge

Context

The Youth and Philanthropy Initiative Canada (YPI Canada) is a grant-making foundation which runs a program that empowers young people to participate in philanthropy. Teachers enroll their classes into the program, and their students form groups of 4-5 to visit, research, and prepare a presentation on a local charity of their choice. A winning group from each school is awarded $5000 to donate to their chosen charity. The program prioritizes project-based learning and encourages youth to help build more compassionate communities, and also has chapters in Scotland and Northern Ireland.

Problem

The Youth and Philanthropy Initiative (YPI) Canada was scaling up and its Joomla 2.5x website did not reflect its current persona or future vision, and was hard to manage. YPI also wanted to showcase its impact through data storytelling on its website.

Old YPI homepage
The old YPI homepage, run on Joomla 2.5x

Solution

A WordPress website and Google Data Dashboard with user-friendly navigation and easy for YPI's small team to maintain.

Working closely with YPI's Manager of Digital Strategy and Community Engagement, Rachel, I designed and built a WordPress website that was modern and user-friendly for their community of teachers and students, and easy for their small team to maintain. Then, I created a Google Data Studio dashboard prototype to teach Rachel how to create living dashboards to demonstrate their impact.

This involved web design, information architecture, user data migration from the outdated CMS into WordPress, CMS setup, impact reporting, and data visualization.

YPI homepage
The new YPI homepage

Dashboard prototype
A prototype dashboard for YPI Canada

Approach

Process

Strategy & Tech Choice

I started by figuring out how YPI wanted to tell their story - on both the branding and technical side. After a branding workshop and a CMS audit, we settled on voice, messaging, and technology.

CMS comparison
Knowing that YPI's small team (only 4 staff servicing the nation-wide program) did not have a web designer or developer in-house, I decided to implement and train their staff on a WSYWIG WordPress website builder called Elementor. Keeping the plugin's limitations in mind, I designed the website's wireframes based on modules and customizations that would be feasible.


Branding exercise
Outcomes of a branding exercise to figure out what the new YPI website's voice would sound like.


Structure & Design

Working incrementally, I guided the team to visualize the structure and look & feel of their new website.

Style tiles to imagine look & feel

Though YPI had a set of brand colours, a logo, and guidelines around logo usage, there were no comprehensive branding guidelines. Using insights from the branding workshop, I designed style tiles for three potential stylistic directions.


YPI Style Tile 1 - Educator
YPI Style tile 2 - Innovator
YPI Style Tile 3 - Revolutionary

Information architecture to help users find the most useful webpages first

The previous YPI website had a sensible content and navigation structure. However, YPI wanted to prioritize content that showcased their impact. In addition to making the most pertinent information easy for users to find, they also wanted to tell engaging stories about their impact.

I reviewed YPI's existing traffic in Google Analytics to get a sense of which webpages were most accessed by their users (primarily educators and students enrolled in the YPI program). Based on this information, I designed a website structure that was sensible to navigate, combined with a navigation menu that prioritized the most popular pages (info about YPI and resources for those within the program).


YPI structure brainstorming

YPI's new Information Architecture
Click to view the expanded diagram.

Wireframing to structure information

Based on the content structure, I created wireframes for the new website to better showcase YPI's impact, and used subpage navigation to make the longer informational resource webpages easier for users to navigate through.

I also designed interactive "callout" boxes to help YPI point users towards important content and actions - such as program deadlines and important resources.

Teacher portal wireframe

Build & Data Migration

I managed and executed the build and data migration. I created Google Drive folders to manage our process, taught Rachel how to use WordPress, and worked alongside her to build out the website. I also migrated user accounts and blog posts over from the Joomla website.

YPI protected its teacher resources using a login page in Joomla. With the upgrade to a new platform, the easiest way to replicate this was to implement a WordPress user management plugin. As part of this plugin's implementation, I helped craft user information messages.

Moving user accounts from Joomla 2.5 to WordPress required additional technical configuration, as straightforward export/import tools weren't available; the blog posts and user data stored in Joomla were stored on outdated plugins. I downloaded the Joomla tables using SFTP, and used database restoration tools to transfer the SQL tables into WordPress. I manually cleaned up data in between export and import using Visual Studio Code (it wasn't pretty).

Data Visualization & Training

After the website had been built out, I used YPI's old data to create data visualization dashboards in Google Data Studio. I used Google Sheets to manage data analysis and clean-up, and taught the YPI staff how to use both tools to create new the dashboards on their own.

A key part of this website refresh for YPI was to better demonstrate their impact, and make the impact report preparation process more streamlined.

I created a prototype dashboard and process for them using Google Sheets and Google Data Studio. Sheets' implementation of the SQL query function allowed me to create a master datasheet that pulled in survey results from SurveyMonkey exports used in YPI's program impact measurement processes.

A snapshot of the prototype Google Data Studio dashboard I built for YPI

A real-time data dashboard to show off their impact

YPI was a tech-savvy team that knew they could differentiate themselves to external stakeholders by leaning in to digital tools. I worked with the team to prototype a dashboard in Google Data Studio to show them how they could quickly build impact reports that would update in real-time using data sources stored on the cloud. This would significantly cut down on time their team spent downloading data, updating charts, and re-exporting reports.


A snapshot of YPI's prototype dashboard, on their pedagogy approach
A snapshot of YPI's prototype dashboard
Data training agenda

Teaching YPI how to fish

A priority for this project was to enable YPI to manage everything by themselves afterwards. Using the prototype as a  template, I created a training course to help the team learn Google Sheets and Google Data Studio so that they could build and manage dashboards on their own.

Live dashboard
A snapshot of the live dashboard YPI built on their own

Client Testimonial

Working with Maggie felt like working with a close colleague. She took time to deeply understand our work, and designed an exceptional, beautiful website to communicate it. Maggie coached our whole team through an understanding of digital transformation that has opened us up to taking risks and trying new things that have benefitted our work and helped us to keep innovating (& not only in tech).
Rachel Paris
Manager of Digital Strategy & Community Engagement, YPI

Learnings

More Case Studies

Grantbook

Elevating marketing & CX infrastructure to help a consulting startup become a recognized thought leader in its space.

EcoSchools Redesign

A new product concept to help this nonprofit scale its digital program from provincial to nationwide.