Making Electricity, Energy & Safety Easier to Teach ⚡️

Making electricity, energy & safety easier to teach ⚡️

BC Hydro's Power Smart for Schools (PSFS) is an educational hub, providing resources and curriculum-friendly activities related to topics in conservation, electricity, energy, safety, and sustainability for students from K to 12. Did I mention that it's all for free?!

Educators are able to peruse and search through a variety of activity types, from games and quizzes to discussion prompts and videos. They're given everything they need for each individual activity including teachings that fully meet curriculum requirements, instructions for the exercise, supplementary files and worksheets, and additional ideas to modify the activity that would best suit different learning styles.

Below, I've highlighted a couple of features that I was responsible for leading and designing on this platform.

(Pictured above in the hero, are papercraft images I created with good ol' construction paper, hot glue, and tape to promote the annual Electrical Safety Day event activities for 2019.)

A quiz with a multi-player mode

Multi-player Quiz Mode 🎮

Multi-player mode is a recent addition to our quizzes. This feature allows students to participate on their devices, and allows educators to track scores easily in real-time, troubleshoot, and maintain full control and pacing of the quiz.

When multi-player mode is activated, students can access the quiz through a link and a special class code (similar to how Jackbox Games works). Prompts throughout the experience ensures that students are doing the right things at the right time. For instance, notifying whether students need to look up from their devices at their teacher's projected screen (e.g. to watch a video), and providing more opportunities to learn something new (for those who are quick to answer and are waiting for the next question).

After students have submitted their answers to a question, overall class results are shared; bar graphs are shown of answers that were chosen, how many answered them (as a percentage), and what is actually correct. This allows teachers to get a sense of what concepts their students are(n't) understanding. While this is happening – in the student view – personal results are shown in private on their devices, and then counted towards their final score. Ideally, this gives students an immediate understanding of what they need to study for their next evaluation.

As a team, we took a lot of time user testing this feature to ensure we covered all use cases across the spectrum, and hashed out all types of connection issue scenarios that could occur for both students and teachers to minimize friction. With this, we're stoked that we can provide teachers another activity option to enhance their lesson plans and increase engagement in their classroom.

A snapshot of possible team mascots on the PSFS platform

Team Mascot Design System 🐻

Every October is Conservation Month. Classrooms around the province are given the chance to show off their "power smarts" to win prizes by competing against others. To up the ante, we launched a leaderboard in 2018 which allowed classes to create their own team mascot from a defined set of colours (blue, navy, green, dark green, coral, peach) and critters (fish, squid, crab, beetle, bird, whale).

The problem was that most teams chose the same combination for their mascot: a blue whale. For 2019, we came up with a solution that allowed for more variety while keeping the UI manageable and simple to use. For a more detailed account of the mascot design system, read my blog post. For some stats on how well our updated features performed, keep scrollin'.

Nested symbols in Sketch are a godsend. Look how many creatures we were able to make with just a few clicks! 🐾

Results page of the team mascot quiz
Mapping example of mascot accessories and mascot name


Mascot Possibilities 🐳 
from 36 in 2018


Total Users 👤
from 12,672 in 2018



More Page Views 👀
from 33,072 in 2018

Please note: these numbers are based on site performance analytics comparing 2019 with 2018's Conservation Month. 

Power Up Blog on PSFS

"Power Up" Blog & Events 🗓

During the initial launch in 2017, the blog wasn't getting much traffic because there wasn't a content strategy in place. So they looked to us to reframe their blog in a way that makes sense with their educator audience. We saw an opportunity to inject as much fun into the blog as we do on the rest of the site through a "micro rebranding". We called it the Power Up Blog, which plays on their Power Smart branding, and animated the header as if the text was "charging up". We also provided content guidelines to include posts in three topics:

  • Classroom Delighters 🍎 – Ideas and resources that offer high-level support to topics of existing activities on the site. One blog post example might be, "Field Trip Ideas in [Your Neighbourhood] that Make Learning About Energy Fun".
  • Teacher Support 👩🏻‍🏫 – These posts are focused less on the kids and more on the educators, and how to set them up for success to teach particular subjects and/or grades (e.g. "Why Electricity & Safety Should Be Taught to Kindergarteners").
  • Community Updates 🌳 – For news updates from BC Hydro and their partners, serves as a bulletin board for local events, and where contest winner announcements can be made.


More Blog Views 📖
from previous average of 200 views per month

Accolades  🏆

Accolades  🏆

RGD So(cial) Good Design Award 2020: Government Winner
Vancouver UX Awards 2018
: UX for Good Winner

RGD So(cial) Good Design Award 2020: Government Winner
Vancouver UX Awards 2018
: UX for Good Winner

RGD So(cial) Good Design Award 2020: Government Winner
Vancouver UX Awards 2018: UX for Good Winner

Homepage of Power Smart For Schools website

Lessons Learned 👩🏻‍🏫

1) Nothing is perfect nor truly finished 😭

It's fortunate that we have a client as dedicated as we are so that this isn't just a legacy project. Since its launch in 2017, we've found opportunities to build upon this platform so that kids around the province are always learning something new. Even today with COVID-19, parents are using our platform for homeschooling and we've made it easier for parents to know which activities are "home friendly".

2) Futureproof your design system 🦾

Though I'm not the first and only designer to have worked on this, we were able to build upon it freely due to a strong design foundation that was set up from the get-go. In keeping the integrity of the design system and adapting where necessary for new features, passing the torch onto the next team has been a seamless transition. And it only keeps getting better!

3) Data-driven design is king/queen 👑

Working at a fast-paced digital agency, we're not always able (or given permission) to track KPIs and user behavioural patterns on all the projects we ship. However, with our partnership with BC Hydro, we've been able to see this data on a bi-monthly basis. This enables us to take the next best steps and see a bird's eye view of which features to prioritize. It's never a dull day working on Power Smart For Schools!

Skills & Tools 🧰

  • Creative Conceptualization, UI, Design System, Illustration, Motion, Prototyping, Content Strategy, User Testing
  • Sketch, Adobe CC (Lightroom, Photoshop, After Effects), Crafting (paper, scissors, glue)

My Role ✨

My Role ✨

My Role ✨

My Role ✨

My Role ✨

Lead Designer for 2018-2019 implementing, improving, and testing all the features mentioned above.

View Other Projects

Ocean Wise 🌊Interaction Design for Flexible Storytelling

Great Canadian Shoreline Cleanup 🚮Interaction Design for Environmental Leadership

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina

© 2020 Gracelle Mesina