Gamifying Colony Collapse Disorder Awareness Through Rehive: A Case Study
Interactive Campaign / Gamification / Web Design / Academic Project
Designed a web-based interactive campaign that incorporates gamification to raise awareness of Colony Collapse Disorder, encouraging learning and engagement through play-based experiences.
Let's Start with the Context
Fact behind the project
Did you know that 2/3 of the world's food production depends on bees? Yeah, neither did we, until we worked on this project and realized just how important they are to our lives.
Our Experimental Design course challenged us to translate that issue into an engaging interactive campaign. Before jumping into the design process, here's a quick look at the project brief, constraints, and goals.
So, How do we achieve that goal?
Although we did not follow a specific design methodology in developing this interactive campaign, the following summarizes the process we went through throughout the project.
This project had a lot of moving parts, but don't worry, I won't make you sit through every single one. Instead, here's the highlight reel: defining the topic, researching our target audience's needs, shaping the campaign's identity, designing the interactive and gamified experience, prototyping, user testing, and polishing everything into the final design.
My role
I spent most of this project juggling two roles: UI/UX Designer and UX Writer. I was responsible for designing the overall website UI, making sure the experience was intuitive, easy to navigate, and user-centered. Beyond the interface itself, I also teamed up with a teammate to create the website animations in Figma and write the campaign's content and UX copy.
P.S. This slide deck took us an embarrassingly long time to make. Please take a look lol.
Defining the Topic
Choosing a topic with meaningful impact
As you might have guessed from the title, we chose Colony Collapse Disorder (CCD) as the focus of our campaign. But it wasn't a random choice. We carefully evaluated several factors, including urgency, potential social impact, creative opportunities, and ethical considerations. As part of the project, we were also encouraged to align our campaign with one of the United Nations Sustainable Development Goals (SDGs). Instead of choosing a goal we were already familiar with, we decided to challenge ourselves by exploring SDG 15: Life on Land, a theme we had never worked with in previous projects. That decision eventually led us to discover the issue of Colony Collapse Disorder.
So, what exactly is Colony Collapse Disorder?
Colony Collapse Disorder (CCD) is a phenomenon in which worker bees suddenly disappear from a colony, leaving behind the hive and its queen. Several factors have been linked to this phenomenon, including pesticide exposure, diseases caused by viruses, fungi, bacteria, insects, and mammals, nutritional deficiencies, electromagnetic fields generated by cell towers, and climate change. These stressors can weaken bee populations and disrupt their behavior, ultimately leading worker bees to abandon their colonies.
But among the many issues related to SDG 15: Life on Land, why did we choose to focus on Colony Collapse Disorder? Because bees play a far more vital role than most people realize.
According to the findings of Singh and Rana (2025) and Khan (2024), Colony Collapse Disorder has far-reaching implications beyond the decline of bee populations, impacting ecosystem health, agricultural productivity, and economic stability. This is because bees are responsible for pollinating approximately 80% of flowering plants, including many crops that support human food systems. As a result, a decline in bee populations can disrupt food production, reduce biodiversity, and create significant economic challenges across agricultural industries.
Source:
Singh, G., & Rana, A. (2025). Honeybees and colony collapse disorder: understanding key drivers and economic implications. Indian National Science Academy, 91(3), 750–766. https://doi.org/10.1007/s43538-025-00399-x
Khan, S. A. (2024). Review of the Role of Bees as ecosystem Engineers in Nature. Science Reviews Biology, 2(4), 1–6. https://doi.org/10.57098/scirevs.biology.2.4.1
Target Needs Research
Listening before designing
Instead of jumping straight into design, we started by having conversations. We ran a series of focus group discussions (FGDs) with our classmates to understand what actually grabs people's attention. From the kind of content they enjoy to the media channels they use most. We also slipped in a few questions about Colony Collapse Disorder (CCD) to see how much they already knew (spoiler: not much). Those conversations helped us uncover key knowledge gaps and identify opportunities to make the campaign more engaging and meaningful.
In a nutshell, the FGD revealed a major knowledge gap, with audiences largely unaware of CCD, which became the foundation for our campaign development.
The discussions generated far more than just that one finding. Every response helped us build empathy maps, user personas, and other UX artifacts that guided our design decisions. My biggest takeaway? Dig as deep as you can. The more detailed the insights, the better you understand your audience's perspective. Don't be afraid to adapt your questions as the conversation unfolds. It can be challenging (and sometimes a little messy), but the quality of insights you gain is absolutely worth the extra effort.
Defining Campaign’s Identity
From idea to identity
With the strategy in place, it was time to give the campaign a personality. Before jumping into the visuals, we organized and synthesized the insights from our FGDs to identify the core message we wanted to communicate. Those insights became the foundation for crafting the campaign's big idea, name, and tagline. Finally, we brought everything together through a stylescape and key visual that created a cohesive visual identity.
Our identity
Big idea: Shared Life
The campaign is built around the idea that humans, bees, and plants are all part of one interconnected ecosystem. When bees disappear due to Colony Collapse Disorder (CCD), the consequences extend beyond a single species, affecting biodiversity, food production, and ultimately our own lives.
Campaign name: Rehive
Inspired by the big idea, we named the campaign Rehive, a combination of "re-" (again) and "hive," with a subtle nod to "revive." The name represents restoring bees to their home while reinforcing the message that rebuilding nature is a shared responsibility.
Tagline: Home among the flowers
"Home Among the Flowers" reminds us that a beehive is more than just a habitat, it's home. Through this tagline, we wanted to foster empathy by encouraging people to protect the homes of other living beings, because protecting their home ultimately means protecting ours.
Our visual concept
Bright, hopeful, and of course, experimental.
Since this was an Experimental Design course, we had the creative freedom to explore visual styles beyond the usual. So, we decided to go all in by combining vibrant 2D illustrations with playful 3D elements to create a world that felt both engaging and memorable. And yes, I was incredibly lucky to have amazingly talented 2D and 3D artists on my team who brought that vision to life.
Of course, every visual decision needed to feel intentional rather than just looking cool. To make sure we were all heading in the same direction, we first translated our ideas into a stylescape that defined the campaign's mood, color palette, typography, and overall visual language. Once the creative direction felt right, we evolved it into the final key visual that became the foundation of the campaign's identity across every touchpoint.
P.S. The stylescape and key visual were developed by my teammates. I’m including it here to showcase our final result.
And just like that, our campaign identity was established. It was time to move on to the next fun part of the process, brainstorming the campaign interactivity and gamification!
Interactivity and Gamification Flow
Designing for engagement and learning
Now for my favorite part. This is where things got both exciting and challenging, because we finally reached the heart of the campaign: the interactive experience. After all, what makes an interactive campaign interactive if people aren't having fun along the way?
But before we jumped into designing the fun stuff, we needed a solid foundation. So, first things first: Information Architecture.
Although it evolved throughout the project, our initial IA helped us prioritize content and decide what users should see first. We went through several iterations, constantly asking ourselves, "If I were a first-time visitor, what would I want to find first?" and "How can we make that information easy to discover?" In the end, we identified three key entry points: the learning content, where users learn about Colony Collapse Disorder (CCD); the donation page, where they can take meaningful action; and the about page, which introduces the campaign and its purpose.
Learning content
According to our FGD findings, the biggest gap we identified was a knowledge gap, most participants had little to no awareness of Colony Collapse Disorder (CCD). Because of this, we decided that educational content should be the first thing users encounter before asking them to take action. We believed that people are far more likely to care about a cause and act on it once they understand why it matters.
The donation page
According to our research, addressing Colony Collapse Disorder (CCD) requires collective action at scale. Since individuals have limited direct influence, we introduced a financial support feature that allows users to contribute to the campaign and its partner organizations, enabling real-world conservation efforts.
The about page
The About section gives users a closer look at the campaign, its mission, and the issue behind it. We also included documentation of real-world campaign activities because according to our FGD people are more inspired by seeing tangible impact than simply reading facts.
Crafting the story
Since educational content would be the first thing users encountered, we knew it couldn't feel like reading a textbook. So, we went back to our FGD findings, where most participants said they were more engaged with campaigns that used storytelling. That insight led us to transform the learning content into a narrative-driven experience, making complex information about Colony Collapse Disorder (CCD) more digestible to explore. That led us to our next challenge: How do we turn educational content into a story that's genuinely fun and keeps people engaged? To answer that question, we used the Freytag Pyramid as the storytelling framework for crafting the main story.
To keep the learning experience digestible, we intentionally designed a light, easy-to-follow story. The conflict was relatable, and the resolution was achievable, making it easier for users to stay engaged while absorbing the key messages about Colony Collapse Disorder.
It is gamification time!
While mapping the story using the Freytag Pyramid, we made a deliberate decision to place the gamification elements during the rising action. This wasn't just a storytelling choice it also helped us fulfill the project brief, which required the campaign to incorporate three game dynamics. Positioning the gameplay in the rising action allowed us to gradually increase engagement while reinforcing the key learning objectives.
After exploring the dynamics, we translated the dynamics into four core gameplay mechanics. The first mechanic introduced players to the story and established the context, while the remaining three were embedded throughout the rising action, where players experienced and addressed the factors contributing to Colony Collapse Disorder (CCD). These are the three game dynamics we incorporated into the campaign.
Roleplaying
Users take on the role of a beekeeper responsible for protecting bee populations while learning about the causes of CCD and how to address them.
Discriminating
Users take an interactive Beekeeper Personality Test to determine their beekeeper type, allowing the game to provide personalized content.
Problem Solving
users complete mini-quests throughout the story to tackle the causes of Colony Collapse Disorder and help rebuild the bee colony.
Problem solving mechanic
Finding the Infected Flower
Users search for fungus-infected flowers across three flower gardens. As a beekeeper, their task is to identify and remove the infected flowers to help protect the bee colony. Neither healthy nor infected flowers are immediately visible; users must hover over the garden to reveal them, with the flowers following the cursor movement as they appear. Once all infected flowers have been found and removed, a success indicator appears, allowing players to continue the story.
Matching Pests to Descriptions
Users explore alternatives to harmful pesticides. The bee suggests seeking help from a ladybug, a natural predator of many common pests. However, the ladybug has specific preferences and will only help if it is provided with the correct pest based on its description. users take part in a multiple-choice challenge, selecting the pest that best matches the clues given by the ladybug. By completing the task, users learn about natural pest control methods and their role in supporting bee populations.
Find the Difference
The bee encourages the beekeeper (users) to learn about biodiversity from another beekeeper’s garden. Users compare the plants in their own garden with those in a neighboring garden and identify the differences between them. By highlighting these differences, users discover the importance of plant diversity in creating a healthier environment for bees and supporting colony resilience.
The action
Remember the financial support feature I mentioned earlier? After a few discussions, we realized that asking users to donate right away could feel a little too direct. So instead of making it feel like a transaction, we turned it into a more meaningful and rewarding experience. Rather than simply donating, users purchase a virtual flower that they can plant in a shared virtual garden. Alongside the flower, their beekeeper avatar also appears in the garden, allowing them to see themselves as part of a growing community of people supporting the same cause. We hoped this would make every contribution feel more personal while visually reinforcing the idea that meaningful change happens through collective action. To make the experience even more personal, the flower each user plants is determined by the result of their Bee Personality Quiz, giving every contribution a meaningful and unique identity.
Prototyping
Turning ideas into tangible product
Before diving into the design, we divided responsibilities so everyone could work in parallel and keep the project moving efficiently.
As the UI/UX Designer and Lead UX Writer, I started by creating the wireframes before collaborating with a teammate to build the design system, while our asset team worked simultaneously on the visual assets. Beyond the interface, my teammate and I also developed the campaign content, UX copy, and microcopy. As the lead UX Writer, I was responsible not only for writing but also for reviewing, quality-checking, and ensuring consistency across all copy throughout the campaign.
P.S. The wireframes underwent some changes during the high-fidelity design phase due to ongoing revisions and design considerations. Additionally, some pages were not wireframed beforehand, as they shared similar layouts with existing screens or were created directly during the design process.
After completing the wireframes and design system, I started building all the web UI using the visual assets developed by the asset team.
Once I finished designing the layouts, I moved on to prototyping and collaborated with my teammate to create the animations. I also experimented with various microinteractions, making this one of the most stressful yet enjoyable parts of the project.
With everything in place, we were finally done...Well, not quite. A design is never truly finished until someone else tries it. So, off we went to the next stage: user testing.
User Testing
Validating the User Experience
To evaluate the experience, we conducted a focus group discussion (FGD) with eight university students from different academic years. Each participant was given the final prototype and asked to explore the campaign from start to finish. No guidance. No hints. Just them and the experience. This allowed us to observe how they naturally navigated the website, understand their thought process, and uncover usability issues, pain points, and moments that stood out to them.
The result
Pain Points
-Participants were confused after completing the Personality Test because the result overlay lacked a clear Next or Close button.
-Some participants did not realize that the third game page was scrollable due to the absence of a visual scroll indicator.
-Participants were unable to cancel purchases in the Virtual Garden because there was no back button or option to close the payment overlay.
-The "Swipe to View" indicator in the Virtual Garden blended too closely with the avatar names, reducing its visibility and discoverability.
Positive Feedbacks
+Participants found the visuals cute, friendly, visually appealing, and highly eye-catching due to the use of bright colors.
+The game difficulty felt well-balanced for the target audience, being neither too easy nor too challenging.
+The storyline was engaging, easy to follow, and enjoyable.
+The combination of storytelling and interactivity kept participants engaged throughout the experience without feeling bored.
Before
After
Added a blinking CTA text to guide users toward the next action after the Personality Test result card appeared.
Before
After
Revised the CTA to clearly indicate that the page could still be scrolled down.
Before
After
Added click-outside feature and supporting instructions to make the overlay easier to dismiss.
Before
After
Added click-outside feature and supporting instructions to make the overlay easier to dismiss.
Design Finalization
The Final Experience
After refining the website based on our user testing feedback, the project was finally complete. Well... almost. I won't show the high-fidelity screens again, you've already seen them in the product showcase. Better yet, why not try the prototype yourself? I promise it won't be boring. I packed it with plenty of microinteractions and experimental touches to keep the experience engaging from start to finish. But that left us with one final challenge: How do we convince people to actually give it a try?
Bringing campaign to life
To wrap up the project, we were asked to present the campaign through a live pitch and a promotional poster. Rather than treating them as separate deliverables, we saw them as extensions of the overall experience. Our guiding principle was simple: Direct. Fun. Short. We kept the pitch concise, approachable, and memorable. Yes... we even showed up wearing bee antenna headbands to reinforce the campaign's playful personality and leave a lasting impression.
The same philosophy carried over to the promotional poster. Since we wanted it to be more than just a static piece of media, my teammate first designed the layout, and I brought it to life by adding AR interactions, motion graphics, and a copyright-free soundtrack from the YouTube Audio Library.
The result
I wish I could show you the presentation itself, but we were so focused on delivering the pitch that we completely forgot to take any photos or videos. Fortunately, the outcome speaks for itself. Out of 32 classmates, 25 gave Rehive a perfect 5/5, while the remaining 7 rated it 4/5, making it the highest-rated project in the class.
As someone who spent weeks thinking through every interaction, every piece of copy, and every little detail, seeing our classmates genuinely connect with the campaign was incredibly rewarding. It wasn't just validation of the final website, it was validation that our idea, our storytelling, and our effort to make learning feel engaging had connected with people.
And just like that, Rehive was complete. Of course, there's a lot that couldn't fit into this case study, so we documented the entire journey in a design document. If you'd like to dive deeper into the process, it's all there.
Reflection
What this taught me about designing an interactive campaign?
This project changed the way I think about awareness campaigns. It showed me that gamification can be a powerful way to help people learn, understand complex issues, and take action, all without making them feel guilty or pressured. One insight from our focus group has stayed with me ever since: "The best campaign is the one that doesn't feel like a campaign." At first, it sounded a little contradictory. But the more I thought about it, the more it made sense. When people enjoy the experience instead of feeling lectured, they're often more open to the message. Of course, this depends on the topic and the urgency, but it's a perspective I'll continue to carry into future projects.
This project also pushed me to become more comfortable with experimentation. not only in interaction design, but also in visual exploration. Although I wasn't responsible for creating the 2D and 3D assets, collaborating closely with my teammates throughout the creative process encouraged me to step outside my usual approach and embrace more experimental design decisions.
Of course, not everything went according to plan. One of our biggest challenges came from the gameplay mechanics. While the final experience worked as intended, several interactions had to be adjusted because of software limitations. It reminded me that good ideas also need to be technically feasible, and that implementation constraints should be considered much earlier in the design process.
But despite all that, I'm incredibly grateful for this project. Beyond the final outcome, it gave me the opportunity to explore unfamiliar ideas, collaborate with an amazing team, and create something that genuinely resonated with others. Winning the highest peer evaluation was certainly rewarding, but the biggest takeaway was realizing that good collaboration can turn a complex topic into an experience people genuinely enjoy.
What others have said about working and solving problems with me
Project Moments <3
Thank you
Thank you
Thank you
Thank you
Thank you