EcoSchools Redesign

A new product concept to help this nonprofit scale its digital program from provincial to nationwide.

Type of Work

UX Design Consulting

Role

UX Consultant

Timeframe

3 months

Team

  • Justin Carter, co-facilitator, Software Consultant at Grantbook
  • Theresa Ramirez, project manager, Director of Systems & Impact at EcoSchools
  • Tania Cheng, project sponsor, Associate Director at EcoSchools

Outcomes

We turned a tedious annual application form into an engaging year-round experience that successfully launched in Fall 2020.

  • Aligned the EcoSchools team behind a testable, tangible prototype
  • Facilitated user research and usability testing
  • Created prioritized feature specs for their developers to work from
  • Helped EcoSchools with the RFP process to select their developer

Challenge

Context

EcoSchools Canada (formerly Ontario EcoSchools) is a nonprofit that manages an environmental certification program for K-12 schools. This program was delivered through an online application form where teachers submitted information about environmental initiatives they had led at their school.

Problem

EcoSchools' certification platform was a digital version of the original paper form. Likened to a tax audit, it was time-consuming for busy teachers to use and impossible to personalize for different contexts. Teachers often lost data they were inputting or got confused trying to decide what to fill out. Many gave up partway through, resulting in lost impact data. These were risks for user retention and impact reporting - especially if the EcoSchools wanted to scale their provincial program to nationwide.

Project Goals

  • Increase new user retention by making the platform more inclusive
  • Keep a level of exclusivity, so that veteran users still felt like this was an accomplishment
  • Collect data from partial program completion
  • Make both the platform and certification program more flexible to accommodate a wider audience

Solution

A "choose-your-own-adventure" platform that engaged new and veteran participants alike.

Our solution involved redesigning both the digital platform and the business logic of the certification platform to meet the needs of a diverse national audience. Combining staff insights with user feedback, we homed in on a "choose-your-own-adventure" model that recognized participation regardless of certification level.

Customize EcoPlan
The new platform digitalized the old certification scoring rubric. This enabled teachers to add and remove "EcoActions" (environmental initiatives) worth different points from their certification plan, as well as earn points towards certification throughout the year. This core mechanic made the whole program more flexible as well as more engaging throughout the school year.

Suggested EcoPlans
EcoSchools' previous platform required completing a "pre-audit" to gather impact data on initiatives. In the new platform, we simplified the survey and used this as an opportunity to offer schools multiple certification pathways.

Rather than forcing users to save their documents and fill out one online form at the end of the year, the new platform allowed teachers to submit their data on an initiative-by-initiative basis. This helped teachers stay motivated throughout the year, and helped EcoSchols collect data for incomplete certification entries.

The new certification model allowed teachers to "shop around" for initiatives that made sense in their school's context. It also offered an avenue for experienced teachers to request points for their own initiative ideas.

Research showed that teachers often ran these initiatives alongside a team of students. I designed the dashboard to be a place where the whole team could get excited about incremental progress.

Personalization and delight were a priority for the new platform. To further improve engagement, we added personalized avatars, badges and a repertoire of the user's past certifications.

Teachers often complained about how this process was a lot of work and lonely to do. We designed an impact dashboard to show teachers that they were part of a wider eco-community working towards a more sustainable world.

Approach

Here's what we did, and why:

  • Discovery/visioning workshop - to get all stakeholders on the same page about the features they'd like to see in the final product
  • Provisional personascurrent state journey map - to understand current users and product gaps
  • User interviews - added to our budget, to validate our personas & intuitions
  • Future state journey map - to identify key risks & opportunities for the new product
  • Certification process map - to understand the implications that this new product would have on the core program/service
  • User goals & stories - to focus in our design scope
  • Taskflows - to define design specs
  • Medium-fidelity prototype - added to our scope (fomr low-fi), to enable smoother hand-off into the developer RFP process
  • User testing - to validate our product concepts
  • Testing results prioritization - to figure out how to incorporate feedback for v2
  • Prioritized product specs - to help EcoSchools craft a clear RFP for their future developer

Process

Discovery

Working through a pre-mortem
Working through the pre-mortem with the EcoSchools team

To rally the staff and mine their insights, we ran a product visioning workshop to mine their insights and align the team behind a product vision. Focusing on examples from e-learning and personal finance, this resulted in 7 design principles and a list of potential ideas for us to validate against user feedback.

To get context and clarity on the pain points behind this redesign project, we reviewed documentation from the EcoSchools team, including design charette notes, community feedback sessions, user surveys, and internal planning notes. We also asked the staff to provide: a summary of the business goals needed for their scale-up, a high-level journey map of the current certification experience as well as the program changes they envisioned for the future one, and a list of users for us to reach out to for user interviews and user testing.

To get to know the team and align internal stakeholders behind one product vision, we planned and facilitated a product visioning workshop, comprised of the following activities:

  • A design language presentation to get on the same page about navigational and functional interface elements
  • A best-in-class analysis, where we presented an analysis of similar solutions from other sectors to help the team home in on their product vision. These included solutions from e-learning, personal finance, and video games.
  • A pre-mortem to consider worst-case scenarios and highlight risks and opportunities
  • A design principles activity to articulate and guide the product vision

Our design principles, described from the user's perspective, were:

  • Inspire me to act
  • Meet me where I’m at so I can grow
  • Support me through the journey
  • Show me that my contributions are making a difference
  • Show me that I am part of a community
  • Make it personal
  • I want to be here
Best-in-class exercise snapshots
A snapshot from the best-in-class exercise

User Research

Combined staff insights, user interviews and feedback, and secondary research into Canadian teachers, I created and validated personas and journey maps to guide the product's development.

Thanks to a product-minded team, we had many great ideas on how we could implement the new certification platform and program. Next, we needed to validate our assumptions. I researched Canadian teachers, including school systems, how to get certified, and teacher lifestyle content. This informed my interview questions. Then I interviewed four diverse teachers ranging from highly experienced to users who dropped out of the program.

As I integrated my learnings, I developed two personas and journey maps: one for an experienced teacher-user and the other for a brand-new user. I constantly iterated on these as I checked assumptions based on the user interviews.

KEY LEARNINGS:

  • 💪🏻Teachers don't need their hands held - they are persistent, patient, and passionate. They'll work hard at the program even if it's challenging. However, they would appreciate if the program that could accommodate the needs of different schools, skill levels, and student age groups (EcoSchools range from K to Gr. 12!).
  • 👩🏻‍💻Teachers are already using digital tools. Common tools like Pinterest and Google Apps for Schools meant that many teachers were already familiar with common UI/UX patterns, such as autosave, autocomplete, and search/filter functions.
  • 😢 It can be lonely running this program. Often, teachers participating in this program are the only one or two teachers leading everything, including initiatives which can be school-wide. Support can be hard to find, and it can feel like a lot of work without much appreciation during the year... you only get to celebrate at the end.

A user persona for an experienced EcoSchools user
The user journey of a newbie EcoSchools user
A snapshot of the interview analysis
Each row was a takeaway from an interview, and the columns indicated what needed to change for this MVP.

Ideation

Based on the personas and user journeys, we worked with the EcoSchools team to devise a conceptual model for how users could get certified. Then, we identified priority user goals within, from which I built task flows and an overarching process diagram.

The key difference was the user experience of earning points for certification. Rather than checking off all  boxes on one rigid, complex application form, users could pick and choose what actions to complete to earn points. This made the whole system modular and flexible - both for users, who might have different skill levels, curriculums, and resources, as well as for the EcoSchools team to add/edit actions while scaling up their MVP.

Modularity & flexibility to scale up and to accommodate diverse users

We homed in on a conceptual model that echoed the structure of the original certification program but allowed users greater flexibility in terms of how they could work towards certification. The original program was (a) aligned with the school year, (b) gave points for action completion, and (c) rewarded users with certification at different tiers (from Bronze to Platinum). The new system would keep these features for familiarity.


Overall certification journey
A flow chart of the overall certification journey. (Click to expand)

Conceptual models for the EcoSchools program
A sketch of three conceptual models we had for certification. (Click to expand)

User stories to ground user goals

Based on the personas, I devised a series of user goals. With EcoSchools' input, we turned these goals into user stories that tied to specific feature ideas. The basic structure:

  • User Goal: Feel like I'm making an impact.
  • User story: I want/need access to data about how my school is doing and our progress so that I feel like we are getting things done and making an impact.
  • Potential flows & features: View data on progress, past certifications, and environmental impact.

Then, we worked to prioritize which flows and features made sense for us to include in this first MVP, and which we could park for later.

Prioritizing user stories
A series of sample task flows. (Click to expand)

User flows to guide interface design

From the user stories, I created a series of flowcharts depicting click paths, user input points, and UX dialogs.

Task flow sample
A series of sample task flows. (Click to expand)

Prototyping & Iteration

Choosing a medium-fidelity prototype allowed me to truly concretize EcoSchools' vision without spending too much time on visual polish. Two cycles of user testing and iteration gave us the confidence that this product design was headed in the right direction.

The original scope called for a low-fidelity prototype, using paper or simple wireframes, but I quickly realized that this wouldn't be enough to help EcoSchools get to the next phase of their redesign. To ensure they had the best possible MVP going into the development phase, I created a "medium-fidelity" prototype with more fulsome UX writing and visual polish. I retained a simple greyscale palette to lighten cognitive load (less resources on choosing or getting distracted by colours), and worked with the staff to write copy that was clear and relevant for users.

To test the prototype, I developed a testing script with tasks that demonstrated core functions of each part of this prototype. Then, with staff support to take notes, I facilitated user testing with a range of s: internal sta (including leadership) the nonprofit's user advisory committee, teachers who were new to the program, and teachers who'd been running EcoSchools for years.

Finally, I worked with the team to document, triage, and implement changes to the MVP, prioritizing core features and saving the rest for the next phase of EcoSchools' product pipeline.


Snapshot of the testing script

Chunking out the work

I broke the prototype up into three core sections: onboarding , making progress in the new EcoPlan model, and showcasing the different dashboards/core screens. My user testing script followed this breakdown as well.

A snapshot of the product pipeline from user feedback

Right-sizing iteration for this MVP

I categorized user feedback based on priority, source (user or staff), and assigned a status based on whether it would be implemented for this MVP, discussed, or saved for the next version.

Client Testimonial

Here's what we did, and why:

  • Discovery/visioning workshop - to get all stakeholders on the same page about the features they'd like to see in the final product
  • Provisional personascurrent state journey map - to understand current users and product gaps
  • User interviews - added to our budget, to validate our personas & intuitions
  • Future state journey map - to identify key risks & opportunities for the new product
  • Certification process map - to understand the implications that this new product would have on the core program/service
  • User goals & stories - to focus in our design scope
  • Taskflows - to define design specs
  • Medium-fidelity prototype - added to our scope (fomr low-fi), to enable smoother hand-off into the developer RFP process
  • User testing - to validate our product concepts
  • Testing results prioritization - to figure out how to incorporate feedback for v2
  • Prioritized product specs - to help EcoSchools craft a clear RFP for their future developer
I had the pleasure of working with Maggie during EcoSchools Canada's redesign of its environmental certification platform and education program for schools, and I can't say enough good things! Maggie's expertise in UX strategy and design thinking added tremendous value to the project and was pivotal to its success. Maggie has an intuition for asking the right questions at the right time (i.e. generative questions) and a knack for distilling data into insights.
Tania Cheng
Associate Director, EcoSchools

Learnings

  • Never underestimate the power of user delight. Many features that we thought would be an afterthought (e.g. badges and customizable avatars) wound up becoming core features because users liked them so much in user testing. We realized that lightness and fun could be just as important for users as core functional features.
  • You can't qualify assumptions without adequate research. Due to budget constraints, our original scope didn't account for the need to do user interviews. However, these interviews proved invaluable for checking our assumptions and getting at the core of why teachers weren't engaging with the platform thoughout the school year.
  • Take a right-sized approach and be nimble. I was lucky to be working with a brilliant, tech-savvy team EcoSchools. This allowed us to operate a lean UX project by changing deliverables when it became clear that they weren't delivering adequate value for their level of effort. Rather than doing a low-fi wireframing step and then a prototyping step, we went straight to a medium-fidelity prototype that could be designed and prototyped in Figma. Not only did this save us time in initial design, but I could iterate rapidly after each user test.
  • Lorem ipsum doesn't cut it. Rather than delivering Lorem ipsum, it was important to me that users and staff could understand the purpose of different interface elements. Especially since one key user flow was onboarding, UX writing was critical for getting the point across.

More Case Studies

Grantbook

Elevating marketing & CX infrastructure to help a consulting startup become a recognized thought leader in its space.

Youth & Philanthropy Initiative

Designing a dynamic website and dashboard to reduce time spent on impact reporting by 95%.