Screenshots of the YPI website

Youth & Philanthropy Initiative

Web Design & Data Visualization
By designing and building a new website and live dashboard, I helped YPI showcase their impact more effectively and efficiently - in a way that their small team could manage 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).

Rachel Paris, Manager, Digital Strategy & Community Engagement

Youth & Philanthropy Initiative Canada

My Role
Web & data designer

Designed and built their new website, prototyped their dynamic impact report, and trained their staff

team
Haifa Staiti, project manager
Grantbook
Rachel Paris, client-side project lead
YPI
TOOLS

WordPress, Google Data Studio, Sketch, LucidChart, G Suite, Visual Studio Code, Joomla 2.5x, SFTP

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.
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.
Old YPI homepage

The old YPI homepage, run on Joomla 2.5x

SOLUTION
Using WordPress and Google Data Studio, I designed and built a modern website and impact dashboard that was user-friendly for their teacher, student & funder users and easy for their 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

Process

Strategy & Tech

  • CMS audit and selection
  • Branding workshop

Structure & Design

  • Style tiles
  • Information architecture
  • Wireframing

Build & Data Migration

  • CMS procurement
  • WordPress build using Elementor
  • Data migration of user credentials
  • Login portal build

Data Design

  • Prototype dashboard in Google Data Studio
  • Data analysis in Google Sheets

Training

  • Google Data Studio
  • Google Sheets & Functions
  • WordPress & Elementor

Strategy & Tech

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

Settling on right-sized tools

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

Finding the right voice

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 - EducatorYPI Style tile 2 - InnovatorYPI 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 brainstormingYPI's new Information Architecture

Click to view the expanded diagram.

Wireframing to highlight important 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 approachA snapshot of YPI's prototype dashboardData 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

View Other Projects

Environmental Certification Platform
UX Design
Office Coffee Solutions
Web Development

Want to get in touch?
Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.