// Portfolio

Youth and Philanthropy Initiative

To help the youth-focused nonprofit, Youth and Philanthropy Initiative (YPI) Canada scale up and modernize their look-and-feel, I designed and built a WordPress website for them that would be easy-to-use for their community of teachers and easy-to-maintain for their lean staff. I also designed a an interactive dashboard prototype in Google Data Studio and trained their team to use the tool to build their own.

Summary

Client

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.

Project

The Youth and Philanthropy Initiative (YPI) Canada was scaling up and its Joomla 2.5 website did not reflect its current persona or future vision. While at Grantbook, I worked with YPI's Manager of Digital Strategy and Community Engagement, Rachel, to design and build a WordPress website that was modern and user-friendly for their community of teachers and students, and easy for their small team to maintain.

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

Skills & Tools

Web Design
Data Visualization
Information Architecture
Data Migration
Technology Consulting
Technology Training
Google Data Studio
WordPress
Elementor
Joomla

Visit the YPI Website »

New Platform, New Possibilities

YPI's previous website was hosted on Joomla version 2.5 and reflected a dated look-and-feel. In addition, it wasn't easy for their staff to manage as the outdated content management system instance was not well-supported and made it frustrating to draft and update content. With a website refresh, YPI wanted to choose a new content management system that allowed for a more modern end-user experience as well as more intuitive web administration.

Previous YPI Website: Homepage

To make this possible, I guide them through a CMS audit and decision-making process to land on WordPress as the platform of choice.

No-Code: Designing within Elementor's Limitations

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 Workshop & Style Tiles

Though YPI had a set of brand colours, a logo, and guidelines around logo usage, there were no comprehensive branding guidelines. I took the team through a branding workshop, which I used to design style tiles for three potential stylistics directions for their new website.

YPI Website Style Tile: "Educator"

YPI Website Style Tile: "Innovator"

YPI Website Style Tile: "Revolutionary"

Content Structure

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.

The previous structure:

  • About Us
  • Our Approach
  • Students
  • Educators
  • Charities
  • Get Involved
  • Blog
  • Media
  • FAQ
  • Contact Us

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):

  • About
    • What is YPI?
    • How is YPI Funded?
    • Our Approach
    • Our Team
  • Resources
    • For Students
    • For Teachers (Teacher Portal)
    • For Charities
    • FAQ
  • Impact
    • Impact Dashboard
    • Overview
  • News
  • Contact
  • Get Involved

YPI Website Architecture

(Detailed diagram avilable for private demonstration.)

Wireframing

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.

Resource Page Wireframe

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 with Callout Elements

Teacher Portal: UX Writing & Data Migration

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 database restoration tools to transfer the SQL tables into WordPress, manually cleaning up data in between export and import.

Impact Reporting & Data Visualization

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

A process that used to take me 2 full months working full time now only took me one afternoon.

  • Rachel Paris, Manager, Digital Strategy & Community Engagement, YPI Canada

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 Impact Dashboard Prototype

(Prototype available for private demonstration.)

Client Training: WordPress, Google Sheets, Google Data Studio, & Web SEO Best Practices

Aftr designing and building skeleton pages for the website, and developing the impact dashboard prototype, I trained YPI's team on how to maintain and build new creations with these tools on their own.

Training encompassed:

  • WordPress Administration Basics (setup, user permissions, interface, plugins & updates, content management, security basics)
  • Using Elementor Website Builder (templates, block types, styling tips & tricks)
  • SiteGround Web Administration (backups, version control)
  • Google Sheets & Google Data Studio (setting up sheets, QUERY and other functions, creating data sources, building dashboards)
  • Basic Web & SEO Best Practices (accessibility basics, metadata, responsive page structures)

Client Independence

One of the highlights of this project was how adept and digitally-intuitive the YPI team was. During the build phase, their Manager of Digital Strategy and Community Engagement, Rachel, took on the task of building out new pages and editing content on her own. She also built a brand new impact dashboard, now live on their website, and is now the primary web administrator on their website. They no longer need a web agency to help manage their website.

View the YPI Impact Dashboard »