Planet Protector Academy: A Case Study

On this project I acted as team lead and UX researcher, I led a group of user experience designers on a project to help our community partner, Dreamrider Productions, update and expand the capability of their marketing site for Planet Protector Academy, an innovative digital and interactive classroom experience that teaches kids about important environmental issues and empowers them to lead change in their families and communities.


The problem:

How will Planet Protector Academy improve their marketing website to better educate teachers and decision-makers about adopting their product in their municipalities, school districts, and classrooms?


Kicking off the Project

Dreamrider Productions had recently released their revamped Planet Protector Academy product and needed a more robust marketing page to accompany it. The marketing page needed a B2C feel, with a B2B functionality.

The primary issue we were able to identify while speaking with the client was that they needed to engage a multitude of personas at varying levels. These personas included teachers, school districts, municipalities and corporate allies.

Project goals

  • Increase website visitor awareness of the product
  • Increase number of demos booked by municipalities and school districts
  • Increase teacher sign-ups
  • Decrease the website’s bounce rate
  • Effectively communicate the excitement and value of PPA

Research

Over the course of 15 interviews with teachers, municipal decision makers, and district decision makers, we refined our three primary user personas.

Insights

Our research also helped us discover 3 key insights.

  • Young teachers hold influence in schools.
  • Selling and promoting PPA is a bottom-up process in schools.
  • Case studies & testimonials will drive customer conversion.

In order for the website to have both a B2B functionality and B2C feel we identified a few key practices that would inform our design and acknowledge both goals: qualify leads, map out buyer priorities, coax customers through the buying process and gather high quality data.


Planning

As we began the planning phase of this project we started sifting through our research. To kick off the planning and ensure team alignment on the concepts and trends that were emerging, we made an affinity diagram that was followed by a brainstorming session.

Affinity Diagramming

The clarity brought forth by our affinity diagramming helped us greatly as we began to develop other planning deliverables that would serve as the touchstones of our design.

Following an audit of the the existing marketing site we identified what would be necessary in order for our upcoming design — and the clients ongoing ownership of the site—to improve the SEO of the new site.

SEO Tactics, clear and simple

One of the most important deliverables throughout our process was our customer journey map that tracked the progression of the customers emotional state as they engaged with the site in order to identify opportunities to ease discomfort and friction between the user and the product.

Customer Journey Map

Focal Points

From this customer journey map we identified…

  • Searching/Researching
  • Seeing the price of the product
  • Payment consideration

… as the primary points of tension between the user and the product that should be addressed within our design.

During the planning phase our largest major breakthrough was in identifying the method through which we would reach all personas; both the B2C teachers, as well as the B2B school district and municipal users. Since we identified the fact that all personas were positively influenced by understanding the efficacy of PPA to engage students we decided to lead with student engagement, before moving into the information that was best suited for the more strategic and bigger picture oriented decision-makers. Focusing the structure of the primary linear scrolling page first upon student engagement, and THEN, after delivering a Call-To-Action, moving into the data and ROI value propositions of the product. These findings were confirmed with the client by asking them to do a card sorting exercise, which ultimately corroborated the content arrangement we had developed.

We ensured this key tenant would be included by being very intentional with developing our information architecture, progressively disclosing key information, and including CTAs that resonate with all personas so as not to lose anyone at any given point.


Design

The design phase began with low fidelity sketching, but quickly progressed into higher fidelity mock-ups within Sketch and Invision.

Mobile design sketch

Our final design was clean and incorporated strong iconography. We identified colors from the clients existing web properties that could be used in a more buttoned up and professionally facing property. Distinctive solid colored cards played a large part in our design decisions.

Mobile MockUp
Desktop MockUp

Key Design Solutions

Some straightforward design solutions, relative to the existing site and desired content, were incorporated into both the web and mobile design of PPA’s new marketing site.


Conclusion

Upon completion of the project, the client was beyond satisfied with our design solutions and is currently in the process of development for both mobile and web. They also hired me personally for additional contract work to find design solutions for the dashboard and onboarding process of their consumer facing product.

To be continued in… Part II: Dashboard + Onboarding (Coming Soon)