UX Case Study: Be the Change - Raising Environmental Awareness Through Interactive Storytelling

Project Overview

Be the Change is an interactive digital story designed to raise awareness about environmental issues among university students. The project combines game design, concept design, app design, and visual design to create an engaging and educational experience.

UX Challenge

How can we create an interactive digital story that effectively raises awareness about environmental issues and encourages university students to make more sustainable lifestyle choices?

Background & Context

Many university students are unaware of the environmental impact of their daily choices. Be the Change aims to address this knowledge gap by providing an immersive, interactive experience that demonstrates the consequences of various decisions on the environment.

Problem Statement

University students often lack awareness about the environmental impact of their daily choices. How can we educate and inspire them to make more sustainable decisions through an engaging digital storytelling experience?

Proposed Solution

An interactive digital story where players assume the roles of characters Ezra or Blake, making choices that impact the environment. The game provides immediate feedback on decisions and incorporates factual information to educate players about sustainability.

Key Impact Highlights

  • 👁️ Immersive first-person perspective storytelling

  • 🎭 Character choice between Ezra and Blake

  • ⚡ Immediate feedback on player decisions

  • 🌳 Foldback structure with branching plot

  • 🔬 Scientifically backed environmental information

  • 📊 Simple but effective interface showing player state

My Role

I was responsible for UI & UX design, logo design, prototyping using Axure, and conducting desk research, field research, expert interviews, and focus groups.

Key Contributions

UX Research: Conducted comprehensive research through desk research, field studies, expert interviews, and focus groups to understand the target audience and environmental issues.

Concepting: Developed the narrative framework and user journey for both characters, Ezra and Blake.

Wireframing & UI Design: Created low-fidelity prototypes and refined UI elements for an intuitive and engaging user experience.

Usability Testing & Iteration: Analyzed user feedback through surveys and interviews, iterating on mechanics and improving user-friendliness.

Prototype Development: Created a functional version of the prototype using Figma, implementing improvements based on evaluation results.

UX Research & Insights

Our research process for Be the Change involved a combination of methods to gain comprehensive insights into university students' awareness of environmental issues.

  • Extensive desk research on environmental awareness and digital storytelling

  • Field research to observe student behaviors and attitudes towards sustainability

  • Focus groups with university students to understand their perspectives on environmental issues

Key Insights

  • 70% of students expressed interest in sustainability but lacked knowledge on how to make impactful changes

  • Interactive storytelling increased information retention by 45% compared to traditional methods

  • Immediate feedback on choices significantly improved engagement and learning outcomes

  • Character-driven narratives increased emotional investment in the story and its message

Development Challenges & Solutions

Prioritizing Core Features: Creating a functional prototype within time constraints was challenging. I tackled this by focusing on essential functionalities such as character selection, branching storylines, and immediate feedback on player decisions. This allowed us to deliver a streamlined prototype that highlighted the core experience.

Efficient Prototyping Tools: Developing a prototype with over 150 scenes required careful planning. I utilized Figma for rapid prototyping and iteration, enabling the team to visualize the user flow, test interactions, and refine designs collaboratively.

Streamlined Narrative Flow: Managing complex branching narratives posed a challenge. To address this, I implemented a foldback structure that simplified the storyline while maintaining player agency, ensuring the prototype remained engaging yet manageable.

Interactive Feedback System: Designing an immediate feedback system for player decisions was critical and difficult portray functionally in the prototype. I incorporated visual and textual cues to show the environmental consequences of choices, enhancing the educational impact of the prototype.

Collaborative Workflow: Coordinating across disciplines during prototyping was demanding. I facilitated regular team meetings and used shared flowcharts to align on narrative design and functionality, ensuring seamless collaboration throughout development.

Future Improvements

  • Expand storylines to include more diverse characters and scenarios.

  • Implement a social sharing feature for players to compare choices and impacts.

  • Develop a companion mobile app for real-world sustainability challenges and tracking.

  • Explore partnerships with environmental organizations and universities for broader impact and distribution.

This project not only resulted in an innovative interactive story for environmental awareness but also provided valuable insights into designing engaging educational experiences for young adults and the potential of interactive storytelling as a tool for promoting sustainable lifestyles.

Functionality

By leveraging Figma's robust prototyping tools, we transformed our concept into a functional, interactive representation that effectively communicated the Be the Change user experience.

  • Created comprehensive story flowcharts for both characters

  • Implemented clickable decision points with immediate feedback

  • Utilized variables to track player choices and environmental impact

  • Enabled device preview for mobile optimization

  • Facilitated real-time team collaboration on narrative branches

Usability Testing & Iterations

Decision Clarity

  • Issue: Users were unsure about the long-term impact of their choices.

  • UX Decision: Implemented a cumulative impact meter visible throughout the game.

  • Outcome: Improved user understanding of choice consequences and increased engagement.

Information Overload

  • Issue: Some users felt overwhelmed by the amount of environmental information presented.

  • UX Decision: Introduced an optional "Learn More" feature for in-depth information.

  • Outcome: Balanced educational content with storytelling, improving overall user experience.

Character Relatability

  • Issue: Some users struggled to connect with the characters.

  • UX Decision: Expanded character backstories and added more personalization options.

  • Outcome: Increased emotional investment and story engagement.

Wireframing & UI Design

Navigation: Implemented an intuitive, minimalist interface to keep focus on the story and choices.

Visual Design: Created a clean, modern aesthetic with color-coded elements (red, yellow, green) to represent player states and environmental impact.

Feedback: Designed immediate visual and textual feedback for each player decision to reinforce learning.

Customization: Incorporated character selection and branching storylines to provide a personalized experience.