Reaction game: an e-learning app for elementary school students
--
Overview
Reaction, an e-learning project that considers behavioural and cognitive aspects for its development, positively stimulating users’ behaviour, awareness and education about conscious consumption in an elementary school.
Target: Students (male and female, 10 -11 years old)
Client: Elementary School, MG. Brazil.
Tools: Pen & Paper, Post-it Notes, Moqups, Flow Mapp, Coogle Mind Map, Skype, Photoshop and Illustrator.
Timeline: 25 months
Challenge
What would students do with their own decisions when placed in a choice situation, in which every decision, however small, could put the planet’s life at risk? 🤔
Goals
- Provide a didactic resource through instructional design, which aims to contribute to the teaching methodology;
- Encourage the faculty 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.
- Identify the possibility of reuse and expansion for different disciplines, thus providing an opportunity for interdisciplinary work.
Problem statement
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.
Roles and Responsibilities
Professionals involved in this e-learning project:
- UX Designer, Interaction Designer and Researcher (My role)
- Literature and Writing Teacher
- Computer Lab Instructor/Monitor
- Web Developer
The team worked, distributed, and held face-to-face and virtual meetings throughout the project. With the Teacher's help, I planned, conducted, and synthesized the research and did all the Design work.
Design Process
- Empathize — Survey, Focus Group and User Interview.
- Define — User Persona; Benchmark (e-learning, videos and documentaries focused on the theme).
- Ideate — How Might We? Framework, Sketch, Style Guide and Task Flow.
- Build — Wireframe, UI Screens and Prototype.
- Test — Implementation, Usability Testing and Improvements.
Empathize
Research
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 this research, it was possible to define the project.
We delimited the segmentation related to Consumption from the study and research of environmental aspects.
Surveys and User Interviews
On alternate days, we apply two types of questionnaires to students during the class period. The surveys involved 20 qualitative questions related to habits, customs, forms of communication, and users' visual preferences.
Two groups, totalling 56 participants, answered the surveys. The qualitative research result helped us find the answer to the student’s intentions when dealing with e-learning.
We observed, doing the research, that some students do not like to perform small, simple tasks, such as household cleaning, related to group life. It can be assumed that the knowledge of individual actions and attitudes still seems obscure in the students’ minds, as they prioritize fun before responsibility. Many students considered fundamental issues, such as the production of electricity. Still, others lacked reasoning, common sense and questions about consumer goods, a necessary approach for the ecologically correct citizen to start thinking about collective actions.
The biggest complaint of the interviewees was the obligation to carry out school tasks at home, in addition to eating healthy foods. In the interviewees’ conception, parents hardly participate in extra-class activities with them.
From the result of the data collection, it was possible to create 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 of interest, Sport, Leisure, Technology and Style were defined from the collected data. It served as a starting point to create the content and the characters of the user personas.
"The images represent the things I do and the way I think ".— Pedro C. (student)
Data validation
We realized the need to verify the data obtained for the research validation and, consequently, to apply the results in the development of e-learning. The references, routines and desires mentioned in the research were grouped so that the students could be in a focus group giving feedback about their choices. This exercise allowed the creation of affinity associations and then the development of user personas.
Define
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.
To create each of the four user personas, I considered the needs, the frustrations, the personality and the main activities.
User Persona #1: Tom
User Persona #2: Zeca
User Persona #3: Lana
User Persona #4: Paty
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. Zeca (sport), Tom (technology), Paty (style) and Lana (leisure).
Ideate
How Might We…?
To encourage brainstorming and a change of perspective about the project, we try rephrasing the problem statement, using a question by adding “How might we” at the beginning.
User / Point-of-view statement
From my research in this project, I gained insights to create a Point-of-View from a more in-depth understanding of users, their needs and your most essential insights about them.
We provided a broad with enough scope to start thinking about solutions that go beyond the status quo.
The team participated in a brainstorming session to answer the proposed question. We included each member's ideas in the Post-it notes so everyone could vote for the most viable way.
After the brainstorming session, some ideas emerged:
- Encouraging experience with daily life examples.
- Allow students to recognize the examples applied in the game.
- Include local examples.
- Diversify the macro theme.
- Small actions lead to significant results.
Although the answers directly correlate, the concept of “Encouraging experience with daily life examples” was the team's clearest. According to selection and analysis criteria, 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 Interface
Colour palette
Our palette was chosen after analyzing ten child-centric websites focusing on environmental education and sustainable practices. We extracted the dominant colors and their hexadecimal codes to ensure compatibility with modern monitors that support diverse color combinations.
Typography
Rumjanek, in the publication Typography for Children: Legibility Research, synthesized and compiled the conclusions of several researchers with different methodologies in the field of psychology and design, which guided the choice of typography for this project.
Primary Font: Calibri
Rationale: Opted for legibility, sans-serif design with rounded endings suitable for web readability, aligning with psychological and design research that suggests children find sans-serif fonts with clear character differentiation, such as ‘o’, ‘a’, and ‘g’, easier to read.
Design Choice: Calibri’s design caters to on-screen legibility and meets the visual needs of the intended young audience, hence, it’s selected for text blocks.
Secondary Font: Sunday Morning
Style: A playful, asymmetrical font with a hand-drawn quality, enhancing the project’s playful and educational theme.
Function: To complement the primary font by adding a creative and engaging element, particularly in titles or callouts.
The selection of typography and colors is integral to our UI design, ensuring the content is not only engaging but also readable, facilitating an enjoyable learning environment for children.
The “sans serif” text is the fastest to read, the exact opposite when it comes to the printed version.
— JAKOB NIELSEN, Prioritizing Web Usability
Logotype
The keywords that most convert the content and the approach in the user’s first contact with the e-learning to define the visual identity of this e-learning were listed: Time, Cashier; Environment, Consciousness; Consumption, Sustainability; Action, and Reaction. The expressions Action and Reaction were defined by better representation in this project. To simplify the logo, I included the word “Reaction” using the first two syllables, “RE” highlighted meaning “action,” as well.
Proposal #1: I create a time tunnel to represent the future. Thus, I created the proposal using the Souci Sans typography.
Proposal #2: I used a world map illustration for the second alternative. In this alternative, I worked with the Aldo typography. The iconographic arrows representing the idea of recycling are simplified into two arrows, equivalent to action and reaction. The two logo proposals followed the tones of the previously defined colour palette research.
Proposal #3: The third alternative of the logo was a derivation of the second. I used a speech bubble since the user will respond with decisions based on the chosen character's speeches in the questions addressed in action and reaction. It was also concerned with the visual identity protection margin for good readability when applied to different backgrounds. I also used the logo in perspective to remove its rigidity since the characters are also in 2D.
Among the options generated and based on the analysis of this research, the third option was the one that best suited the students’ reality and was, therefore, the one used in this e-learning.
Scenario
As I worked with the environmental theme in the urban context, I sought to reference the representation of a city for the composition of the initial scenario.
I considered a box an essential item for every move to contextualize the content using an idea to put all the action into something.
The purpose of working with the box is to take students playfully to reflect based on a story: What should I put in it so that the next generations can appreciate it? The students answered this question themselves through the development of the game.
Each action will react. Positive or negative. That will be the game's purpose: to show that our choices impact the world.
For the creation and composition of the digital project, manual elements were used to dialogue with the game proposal.
Iconography
From the results obtained through the research, I noted that the use of pictograms was well accepted by the students, who justified their images' choices due to the ease of recognition. Thus, I considered three approaches for infographic development: ecological, economic, and well-being. I saw the need to demonstrate to students the indexes, which varied more or less according to their actions about the challenges proposed in the game, and the goal is to reach a final stage with all three items at a high level.
The “ecology,” “economy,” and “well-being” levels became icons: tree leaf, dollar sign and human doll, respectively. I used more contrast colours than defined in the palettes to increase visibility.
First proposal: levels arranged horizontally and in the shape of a convex rectangle, indicating progression or regression, represented by the greater or lesser presence of colour, respectively.
Second proposal: As the horizontal bar indicates progress or decline, this proposal could confuse students since the indices would fall vertically. In graphical representations, it could represent a fall, which is not the intention. Therefore, I eliminated this alternative.
Third proposal: I tried to simplify creation by focusing on icons, which this time moved around. This alternative intends to take the figures to their destination, the box for the future.
After analyzing the alternatives, I found that the most coherent and complete proposal of iconography presented was the third. It was more evident to users that those actions were being placed inside the box.
Validating the proposals, I identified that this was the time to start creating the game’s interface, gathering all the information from the target audience and the tests done with the visual elements.
Task flow
The fact that users, according to research, have memories of their lived experiences, I assumed that browsing through the content will happen intuitively through the recognition and identification with the stories. To access the content, the user can choose the character related to his behavioural profile.
The task flow with the entire user path was shared with the web developer. After some 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.
Sketch
I needed to develop a screen representing the character’s speech with buttons to choose between options. Also, I had to establish a hierarchy because it was essential always to show the result index (as it was a signal to the user whether he was on the right or wrong path). The seventh draft version met all the prerequisites for the game, so I considered it before starting the screen design step.
Build
Wireframe
It was necessary to develop a hierarchy of the characters' positioning in the game to establish the equal importance of the elements above and balance the arrangement of the features on the screen.
Based on these research references and analyzing the three proposals, I discarded Wireframe 1 and Wireframe 3 because they did not meet or meet the basic requirements. Therefore, the suggestion of Wireframe 2 was an adequate hypothesis, establishing the ideal starting point for the game's development.
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.
UI Screens
The home screen of the e-learning
“Start” screen: The choice of characters
In this stage, the proposal is that the user chooses between four characters that most identify himself to start the game.
Character challenge: Reuse, increase, discard or reduce?
The student could react to his character’s questions, choosing between the options (reuse, increase, discard or reduce). For this, an infographic indicated how the student was doing step by step.
Final screen: Result of the decisions
The user fulfills the mission or not, using other characters or making different choices to include good influences inside the box.
Prototype
Test
Implementation
To evaluate how the game works and how to access it, the Informatics Laboratory Instructor informed the students about the project proposal, connecting the knowledge previously learned in class about sustainability and consumption. This fact allowed them to open new horizons for other perceptions of the subject.
The Instructor, the Teacher and the students used e-learning interdependently. However, the project's construction allows the end-user to experience the digital content sequentially as a programmed study program. Knowledge development occurs precisely in the choices already defined by the research, limited to each user's freedom of navigation. The learning will take place in the Computer Lab in three ways: in volatile groups, fixed groups or individually.
The teachers' feedback evaluated the students' learning, comparing actions and behaviours before and after using the game. The Teacher directed the focus of work based on the students’ choices, giving more importance to the critical points or discrepancies through the result in each stage of the game. Besides, questions and observations inside and outside the classroom also helped in the assessment.
Usability Test
For the usability test, we selected 12 students of different genders, ages and interests in groups of personas.
The selected users passed the test following specific tasks:
Tested functions:
- Understanding of the item “Instruction”;
- Use of the “Help” item;
- Visual recognition of user personas;
- Choose a character and complete the activity.
Outcomes
- Understanding the item “Instruction”: This was how users had the most difficulty reading the proposed instructions. Users 1, 4, 6 and 7 could not immediately see how reactions would occur or how such choices would be counted. At the end of the test, they were asked whether, during the challenge, the questions had been resolved. Everyone understood during their choices what they gained and lost in each decision, monitoring the level of the items: “ecological,” “economical,” and “well-being.”
- Use of the “Help” item: The “Help” item was most used when users had to choose the necessary reactions to the activities. After the first exercise, the majority managed to continue playing without problems.
Users 3, 4, 7 and 10 resorted to the “Help” item and managed to resolve their basic doubts about each situation afterward.
- Visual recognition of user personas: All users who participated in the test could visually identify and recognize the characters without using the “Help” feature.
- Choose a character and complete the activity: The test was satisfactory. In general, the students were okay with understanding how the game worked and what they should do. Some minor implementation problems were observed during the tests that will culminate in future adjustments after this game's beta version.
What could I have done better? (Product improvements)
To facilitate the students’ understanding of the item “Instructions,” I thought of creating a small graphic animation demonstrating the effect that a click can do, changing the choices' levels. As an improvement, make the score resulting from each action selected by the student explicit.
The score could be available when the user asks for help, as it would facilitate decision-making through what matters most (and what counts more or less) at the time of their decision.
Thus, users could have a more significant reliability parameter in their choices, reflecting and analyzing each question, helping with doubts, for example, before clicking the button.
Finally, I will consider a future version of the game to develop the characters' visual stories to make the understanding even more tangible.
What have I learned?
I found that environmental problems are more linked to human actions and closely related to responsible people.
During UX research and UI development, I searched for all forms, references and visual constructions to facilitate the recognition and dynamics of e-learning. The effort to use different references helped me facilitate the student's understanding of the proposal. They felt part of the process, recognizing, experiencing, and analyzing the issues that are now much closer to their realities. Measuring quality by performance can be subjective.
Therefore, to determine the ideal time for the educational project's development evaluation, the Literature and Writing Teacher defined an evaluation parameter based not on the score but on the development analysis of textual reflection during the school year.
Mediated learning and tests with e-learning suggested that users could learn about some sustainability issues through e-learning in a playful way and with easy visual identification.
This is an iterative design project since the problem statement is constantly changing. For this reason, I recognize the importance of gradually thinking about new processes that will add and facilitate the usability of this game through new usability tests, evaluating to extend the reach of the project to a more diverse audience, and considering complementary analyses, such as soft skills, social status and representative diversity of the characters to avoid stereotypes.
Stories can always be the same,what differentiates them is how they are told. — EDITH DERDYK.
