Youth & Philanthropy Initiative
Designing a dynamic website and dashboard to reduce time spent on impact reporting by 95%.
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.
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.
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.
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.
Working incrementally, I guided the team to visualize the structure and look & feel of their new website.
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.
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).
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.
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).
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.
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 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.
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).
