How a smart design system helped drive increased personalization for students.

Every designer knows that good design is made with three things: sugar, spice, and everything nice. To make it great, however, you have to add Chemical X... Yes, this is a metaphor for what this case study is all about, but if you’re still confused, it’s probably because you haven’t watched The Powerpuff Girls.

It all started when a good friend of mine invited me to Powerpuff myself. Through an online avatar builder, you can make a Powerpuff likeness of yourself as if you were in the cartoon. It’s a two-step process: (1) create your character using a comprehensive library of parts and accessories, and (2) determine what your ”Powfactor” or superpower is by taking a multiple-choice quiz. I had so much fun that I made a bunch of my friends do it too. As my friends showed me their Powerpuff’d selves, I was most impressed that all of our outcomes were totally unique. It turns out, the agency behind it all created over 500 assets capable of a whopping 178 quadrillion unique combinations.

Powerpuff Yourself is impressive to me because, as a millennial, it was nostalgic of Dollz Mania. Dollz Mania was a digital paper doll platform with one of the most comprehensive libraries of outfits and accessories I’ve seen. The differences between that and Powerpuff Yourself are that it required a healthy dial-up connection, lots of patience to let each fashionable pixel load in, and tons of scrolling and dragging around parts. Considering how far we’ve come along with optimization and performance, there is no way I would ever put myself through an experience like that again.

I’ve also had my fair share of video games with avatar-building UIs to know what determines a bad experience:

• Not enough parts to build something truly unique

• Too many parts which can be overwhelming and/or take too much time

• UI is finicky or lacks immediate feedback, making the building experience less enjoyable

Powerpuff Yourself addresses all these issues in smart ways by providing a comprehensive and inclusive set of customizable elements with interchangeable parts and a super simple UI for avatar-building. Allowing users to “discover” their Powfactor piques curiosity, adds another level of delight, and alleviates any cause of analysis paralysis (if they were to pick superpowers from a long list). So, this was a huge part of what set the bar for us in terms of best practices for our own avatar-creation project.

Cup of Sugar: A Sweeter Foundation

Every year in October, BC Hydro’s Power Smart For Schools facilitates a month-long competition called “Boost Your Power Smarts.” Classrooms— of students in grades 4 to 7 throughout the province of British Columbia— test their IQ and try to outsmart each other by participating in weekly quizzes about energy and conservation. In its second year, the dedicated Power Smart For Schools team (Engine Digital x BC Hydro) came up with several ways to improve the platform, with avatar creation or "mascots", as BC Hydro calls them, being one of them.

The first part of the experience has each class create their own team name and mascot to track themselves on the leaderboard. As shown above, the existing mascot picker was a preset of six brand colours and six adorable critters for teams to choose from, which allowed 36 different possibilities for mascots.

Although we anticipated duplicates, we did not realize how popular a particular combination would be, as 70% of the teams chose the same pairing: a light-blue whale. We don’t blame or discourage the kids because it is a fantastic combination. Still, as the leaderboard filled up with more and more blue whales, we knew we had to increase opportunities for variety this year.

Our solution to afford more characterization, detail, and flexibility for this year’s critter line-up was to change the visual style, which relies on a simple, yet adaptable base shape. In designing the library of facial features, this ambiguous little "mound" served as a strong foundation for layering and consistency between all parts. Rather than making an entirely new set of traits for each animal, it was easy to reuse and remix recurring characteristics like ears, noses and contouring. For instance, the pair of pointy ears is a characteristic in four different creatures, and a set of whiskers can be seen on six. Thanks to the reusability of the parts, we needed less time, and our output was double what we had initially anticipated. How’s that for “sweet”?

Dash of Spice: Accessorizing for Zest

For a level of distinction and delight, we added various accessories such as sunglasses and an assortment of hats. The impact is exponential; we went from hundreds to thousands of possible mascot combinations. Initially, this was a daunting task from an asset production perspective. Using the base shape as a foundation, however, resulted in 70% of the accessories being interchangeable across all creatures — with little-to-no editing of the original design. The other 30% of accessories required only minor tweaks to generate alternate versions that accommodate special animal traits, such as horns, fins, or antlers. Implementation of the alternatives was also easily handled in development.

The accessories solve our blue whale problem. Even if multiple teams receive the same red bear, an add-on like a monocle or party hat easily distinguishes one red bear from the next.

“Everything Nice”: The User-Friendly Ingredient

Even before Power Smart For Schools existed, we knew that teachers value saving time and engaging their students with digital tools. To satisfy these two objectives, we wanted to change how teams created their mascots. The process needed to be easy for teachers to guide their class through the activity. An elaborate "drag-and-drop" system or extensive libraries of parts to pick and choose from would leave less time for learning and participating in the actual quizzes.

Our “everything nice” solution delivers a custom mascot to each team through a quick but interactive “classroom personality” quiz. Teams answer three multiple-choice questions that incrementally build out their mascot (animal, background colour, and accessory) with each element distributed in a semi-random way.

At the end of the quiz, when a curtain reveals a team’s official mascot, we give the mascot a name as an added touch. We hope that if teams are struggling to name themselves, they can find inspiration in their personal mascot.

Chemical X: What’s Happening Behind-the-Scenes

Thanks to the remarkable work done by Engine Digital’s front-end engineers, we built the mascot tool in a highly efficient manner. In fact, we completed the entire mascot quiz in five days; two days in design and three in development. Yet, given the lean approach, we still managed to maximize the outputs through strategic design and development decisions. For example, this redesign gives us a total of 3,360 possibilities despite the total number of assets designed and exported from Sketch — including the accessory variants — being only 47 total. The mixing and matching of these components are all done in code through SVG layering, simple asset mapping, and semi-randomization.

Although this project had a lot of moving parts, the monumental design and engineering legacy of the previous Power Smart For Schools platform enabled us to successfully evolve the experience. It goes to show that with a strong foundation and concept, it's much easier to improve and evolve a digital experience over time by understanding user needs and focusing on the solutions that provide the audience with greater enjoyment.

It’s great to think that with thoughtful design and illustration, we went from having a world of only three Powerpuff Girls to millions of unique Powerpuff People. Adopting that same mindset, we grew from 36 avatars to well over 3,000. It’s been wonderful to see all the different mascots and creative team names on the leaderboard during the “Boost Your Power Smarts” competition. We can’t wait to expand on this platform for next year!