What's the Deal With Bees?

Interactive Story

July, 2020
HTML, CSS, JS, P5.js

This is an image

Anna is an entrepreneur and activist based in Paris, France. She is building a company that supports the bee population across her city. Learn with Anna about the importance of bees in this interactive story.

The Project

Users can click through pages in Anna’s story using the “Next” and “Back” buttons.

This is an image

To understand why bees are so important to their ecosystem, a user can click on her garden to add and remove bees and see the effect on the ecosystem.

This is an image

Users can play short games to try solutions to Anna’s problem.

This is an image

At the end of the story, users can find her website along with additional resources for what they can do to help bees.

This is an image

Read and interact with this story here.


The Process

  1. Identify learning problem
    • How might we help young people learn about ways to help the environment?
  2. Brainstorm solutions with learning theories in mind
    • Learn by doing
    • Self-efficacy
    • Learn through storytelling
  3. Prototype
    • I created rough prototypes just with HTML and CSS.
  4. User test
    • User tests gave me insight into which parts were confusing or unnecessary and which were effective.
  5. Iterate
    • Added more creative interaction
    • Removed unnecessary longform text pieces
  6. User test and gather data
    • 97% of users reported learning
    • 93% of users reported an intention to take action for to support the bee population in their own communities