Engaging students with Reaction, an e-learning game app

Reaction is a game designed for elementary school students, using behavioral and cognitive studies to teach about conscious consumption in an interactive and educational way.

UX Case Study - Ottawa Canada


Tablet icon



Despite months of environmental education, elementary students have not fully embraced sustainability, remaining focused on basic practices like trash disposal. The educational program requires a redesign to effectively communicate the broader impacts of production and consumption processes, aiming to cultivate deeper understanding and actionable, sustainable habits in students.


  • Encourage the teaching staff and its role as a mediator of access to knowledge, assisting in the teaching-learning process through the dynamics and ease of presenting the content.
  • Stimulate students’ critical sense of sustainability, conscious consumption and well-being.
  • Prototyping, building and experimenting with the e-learning to define a probable creative and practical line to be designed through the research process.


In the e-learning project, I served as the UX/UI Designer and Researcher, handling all the planning, research, and design work. The team also included a Literature and Writing Teacher, who provided educational guidance, a Computer Lab Instructor, ensuring technical implementation, and a Web Developer, responsible for programming. Each member's direct contributions were pivotal to the project's development and success.

User scenarios


The study of the studied concepts and the Teacher and Computer Lab Instructor's educational objectives were elaborated on a conceptual map of the project to guide the segmentation of the content. Based on that, we delimited the segmentation related to Consumption from the study and research of environmental aspects.

Conceptual Mapping - Educational App - UX Case Study

Reframing the problem


To spark creative thinking and shift our perspective on the project, we reframe the problem statement as a question, using the "How might we" statement.

We compiled every team member's ideas on sticky notes, allowing everyone to present and vote on the best concepts. Among these, the most resonant and clearly defined idea emerged as "Encouraging experience with daily life examples," showing a direct correlation with the answers we gathered.

How Might We Statement - Educational App - UX Case Study
HMW - Sticky notes - Educational App - UX Case Study

I gained insights to create a point-of-view from a more in-depth understanding of users, their needs and most essential insights. We provided a broad with enough scope to start thinking about solutions.

After according with this decision, I started developing this e-learning by analyzing the audiovisual material, verifying the steps involved in constructing the content, the type of visual communication, the technology used and the way of approaching the theme.

User Research


User Research - Participants


User Research - Qualitative Questions


User Research - Different surveys


User Research - Elementary School


We apply two types of questionnaires to students during the class period. The surveys involved questions related to habits, customs, communication, and users' visual preferences. The qualitative research result helped us find the answer to the student’s intentions when dealing with e-learning.

User Research - UX Case Study
User Research - UX Case Study
UX Case Study - Menu flow

In our quest to ensure the integrity of our research, we made a crucial move: double-checking the data. This wasn't just about dotting i's and crossing t's. It was key to making sure our e-learning development hit the mark.

We grouped the students' mentioned references, routines, and wishes, setting the stage for a focus group where they could weigh in on their choices. This wasn't just a chat session. It was a strategic step to create affinity associations, leading us to craft user personas that truly resonate.


User Research - Affinity Associations - UX Case Study

Interest groups: Technology (1), Sport (2), Leisure (3), and Style (4)

This approach isn't just about getting insights. It's about getting the right insights and turning them into actionable, effective e-learning tools. From the result of the data collection, we created the characters' actions. Different possibilities for choosing experiences were defined, grouping them based on correlations. The students’ references, routines and desires became a big panel with four major interest groups. The groups were defined from the collected data. It served as a starting point to create the content and the characters of the user personas.

User Personas

Educational App - UX Case Study - User Personas

After students chose the groups, I collected the relevant information from each cluster to create the user personas. The entire process of developing personas has been documented. I considered the needs, the frustrations, the personality and the main activities. The students did not know, but each group chosen was related to a persona. The test then validated that the students represented all personas. With that, we developed the characters of the game based on the main activities of the students.

Characters - Educational App - UX Case Study

Characters: Zeca - sport / Tom - technology / Paty - style / Lana - leisure

Task flows

Our research shows that users connect with content through their personal experiences. With this in mind, we've designed our platform to be intuitive: users select a character that reflects their behavior to access content. This user-focused approach, complete with a detailed task flow, was shared with our web developers to ensure a seamless and relatable user experience.

Educational App - UX Case Study - Task flow

After feedback, I developed version 2.0 with technical details to facilitate understanding and e-learning development. Students could have three different performances in the game: insufficient, low or reasonable. More than assessing who won or lost, the idea is to generate reflections from the research data's stories.



Touch areas on tablet  by Luke Wroblewski

Touch areas on tablet - Luke Wroblewski

With touch-enabled devices, users are very close to the screen and use both thumbs to touch, creating accessible touch areas at the bottom. I also considered the touch areas, which would help in the game's performance and handling. Based on the information collected, I adapted the chosen wireframe and the definition of the other screens from the drafts. I set the resolution to 1024 × 768 pixels using the net main layout to optimize the content for a satisfactory view (iPad mini 7.9'').


UX Case Study - Tablet app - Sketches

For the main screen, I crafted a layout showcasing the character's dialogue alongside interactive buttons for option selection. Establishing a clear hierarchy was crucial, particularly for displaying the result index, guiding users to understand if they're on the right track. After iterating through six drafts, the seventh version successfully met all game requirements, setting the stage for the next phase of screen design.


UX Case Study - Tablet app - Wireframes

We prioritized the strategic positioning of characters to balance the game's visual elements. After evaluating three proposals, Wireframe 2 emerged as the best choice, providing an ideal foundation for balanced and engaging game development.


UX Case Study - UI Style Guide - Reaction App

Among several proposals, the logotype option, featuring a speech bubble symbolizing the game's decision-based narrative, was chosen for its relevance to the students' reality. The logotype was crafted to reflect key concepts like "Time," "Environment," and "Action and Reaction."

Our color palette derived from ten child-centric environmental websites. We chose dominant colors and their hex codes for optimal monitor compatibility.

For typography, we defined Calibre as the primary font, prioritizing legibility based on psychological and design research. It's a sans-serif font with rounded endings, ideal for web readability, especially for children. Our alternative font, Sunday Morning, adds a playful, hand-drawn touch for the project's educational theme.

In creating the initial scenario, we depicted an urban city context, incorporating a box symbolizing the impact of students' decisions on the planet. This approach aims to encourage thoughtful reflection on sustainability.

For the progress bar, we used pictograms for easy recognition, focusing on "ecological," "economic," and "well-being" aspects. These were represented by distinct icons - a tree leaf, a dollar sign, and a human figure, respectively, using contrasting colors for visibility.

User Interfaces

In this step, design principles and educational needs come together, a result of thoughtful planning and creative execution in our user interfaces.





In the Informatics Lab, the Instructor introduced a game linked to the students' sustainability studies, deepening their understanding. Both the Instructor and Teacher guided the e-learning, with the game's sequential content acting like a structured study program.

Learning occurred in three modes: dynamic, stable groups, or solo, based on our research. This approach tailored the experience to individual preferences and learning styles. Teachers assessed the game's impact by comparing student behaviors before and after gameplay and analyzing their in-game decisions. Classroom discussions and observations supplemented this evaluation, offering a comprehensive view of the educational outcomes.


For the usability test, we selected a group of 12 students from different classes with diverse demographics, representing different user personas. The selected users passed for 4 testing functionalities.

UX Case Study - Usability Testing - Reaction App

The "Help" section, although utilized by three users to determine the appropriate responses to activities, did not indicate a failure to complete the tasks. Once they accessed the "Help" section and understood the mechanics, all three were able to proceed with the game smoothly.

The fact that four users initially struggled to understand the reaction mechanisms and scoring of choices raised a red flag for potential improvement for the Instructions screen. However, by the end of the test, these users had gained clarity. When asked, they confirmed understanding the outcomes of their decisions, including what they gained or lost, and how it affected their levels in "ecological," "economical," and "well-being" aspects. This feedback was fundamental in refining the game's design and increasing the user's initial understanding.

Improvement opportunities


To improve students' understanding of "Instructions," I plan to introduce a graphic animation showing the effect of their clicks on choice levels. Also, making scores from each action visible, especially in the 'Help' section, will aid in decision-making. In future game versions, I aim to develop characters' visual stories for a more tangible understanding.

Lessons learned

UX Case Study - Improvements - Educational app

I discovered that environmental issues are deeply tied to human actions. In my UX research and UI design, I explored various methods and visual elements to make e-learning more accessible and engaging. This approach helped students better understand and feel connected to the game, making environmental issues more relevant to them. However, gauging quality by performance can be subjective. Therefore, the Literature and Writing Teacher established a benchmark based on students' reflective writing throughout the year to assess the project's effectiveness.

Our e-learning tests showed that users can learn about sustainability in a fun and visually intuitive manner. Recognizing the evolving nature of this project, I plan to continuously refine the game, conducting further usability tests, reaching a broader audience, and incorporating diverse perspectives to improve the game's relevance and avoid stereotypes.


T&D International: enabling user insights through collaborative remote UX workshops

Feel free to hit me up. I'm looking forward to hearing from you.

Behance (Portfolio) - Marcos Rezende
Medium - Marcos Rezende
Gumroad - Marcos Rezende
Linkedin - Marcos Rezende

2024 - Marcos Rezende's UX Design Portfolio. Canada © All rights reserved. Privacy policy.