CASE STUDY
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.
Overview
TABLET APP
BACKGROUND
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.
DESIGN GOALS
- 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.
DIRECT CONTRIBUTIONS
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
CONCEPTUAL MAPPING
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.
Reframing the problem
POINT-OF-VIEW STATEMENT
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.
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
STUDENT FOCUS GROUPS
TOTAL OF 56 PARTICIPANTS
20 QUALITATIVE QUESTIONS
2 TYPE OF SURVEYS
1 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.
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.
AFFINITY ASSOCIATIONS
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
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: 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.
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.
Ideation
TOUCH AREAS AND IDEAL RESOLUTION
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'').
DEFINING THE DIALOGUE SCREEN
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.
DEFINING THE STARTING POINT SCREEN
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.
UI STYLE GUIDE
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.
STARTING THE GAME
Home screen: “Instructions,” “Start” and “About.”
SELECTING THE CHARACTER
Start stage: The choice of characters
PLAYING THE GAME
Turning actions into consequences
REQUESTING HELP
Help section: an explanation of each element of the game
Help section: Presentation of the secondary menu
FINAL PROTOTYPE
Implementation
GAMIFIED LEARNING DYNAMICS
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.
USABILITY TESTING
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.
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
GAME INSTRUCTIONS
Instructions Screen: How to help their characters to achieve their goals.
Instructions Screen: How to help their characters to achieve their goals.
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
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.
NEXT
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.
2024 - Marcos Rezende's UX Design Portfolio. Canada © All rights reserved. Privacy policy.