Bee A Hero

My fourth project at General Assembly was a passion project. My partner and I spent time thinking about what will drive us both, and what we wanted to learn along the way. I couldn’t be happier to say that we decided to tackle a project around raising awareness about Colony Collapse Disorder. If you’ve never heard about it before, CCD is a collection of conditions that are destroying entire honeybee hives at an alarming rate. We wanted to teach people about this problem in a way that would make them spread the word or engage in helping the cause themselves.

Part of the assignment was to select a brand that would have an appropriate opportunity to benefit from our design while leveraging their existing style. National Geographic was the top contender for us; they have a very prominent branding as an authority on environmental education and social good. We decided that they would benefit from taking on a project like this to promote the health of the earth globally because their media products heavily rely on a continuous and beautiful earth.

Learning how to teach

We first needed to understand some fundamental questions before we could even get a sense of the problem. We used a survey to provide this perspective. Some results are below when asking about the declining bee population.

Top questions people would askabout CCD: “How to help?” and “What’s the cause?”

From this we learned our design would need to be a responsive website; most people expect to learn through the web. Next, we wanted an understanding of how Nat Geo stacks up against some other authorities in the field. (see table 1 below). Nat Geo had high scores across the board so we knew we could lean on a lot of their branding and site patterns.

We also made some site map comparisons and content comparisons across these and several other websites. We wanted to see how people would be used to navigating an educational site; after all, education site patterns could vary greatly from patterns in other kinds of websites.

Interviews provided some guidance as well. We asked about people’s learning styles and environmental caring capacity. The responses largely indicated that people felt bees were important but still weren’t very motivated to help until they learned what kind of impact it would have on them personally. From our interviews we created two personas to help in our design. They can be seen below.

Greg is our main persona when considering users in our design, and Aswathi is our secondary persona.

Our general conclusion was that learning on the internet is typically boring. People often relied on video or other visual content to engage them. Certainly there is a lot of information crammed into educational sites, but they do not inspire action. We were faced with a challenge of following this structured pattern while still encouraging engagement with the site along with the cause. My project partner found some great inspiration from the sites below as we moved into ideation.

Visual storytelling examples

Testing for emotion

Our design started out with a parallax effect of bees fading from the hive as you scroll past facts about bee’s disappearing. (see below) This was expressed to be ‘good story telling’ during our four user tests of this iteration, but it also did not inspire the action we were looking for. So our next iteration included a full “choose your own adventure” with more calls to action through the main story on the home page.

Parallax effect can be seen as beehive images fade on the left as you scroll past the pictures and facts on the right
Some paths in our choose your own adventure game

We planned out the entire adventure map because we wanted to understand how each ending state would to link back to ‘how to help.’ If our users could see the ‘how to help’ call to action right as they were emotionally engaged with their own story’s outcome, then we hoped that would inspire motivation to help the cause.

All four testers in this final iteration were emotionally reacting to their adventure. Everyone also would opt to ‘play again’ to be able to learn more facts about bees through their journey. Both of these indicated to us we were on the right track.

Something else we learned through testing was that users were much most willing to share something that they created themselves. (This came from an idea of adopting a customized virtual bee that did not make it into the final design). A next key next step would be to incorporate this customization into the site somehow. This would tackle the problem of getting users to spread the word even when they aren’t typically sharing educational content.

It is easy to say my favorite aspect of this project was working with my super star project partner, Sam. Check out her medium as well!

We built out prototypes for tablet and mobile versions of the site also to ensure we were designing responsively. To learn more about the bees in our prototype (mobile version) and play the game yourself, click the link below:

National Geographic: The Bee Project

Note: No pictures in our prototype are our own. They are mostly from National Geographic’s website, and used simply as placeholders for the real content that would be produced for the theoretical website.

Note: No pictures in our prototype are our own. They are mostly from National Geographic’s website, and used simply as placeholders for the real content that would be produced for the theoretical website.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.