Apr 28, 2020
Reaction: 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
The school worked for a few months with elementary school students with environmental awareness issues, addressing several subjects, and consuming products and service goods. However, the project needed to be improved, considering its educational methodology. The students are still in the opposite direction concerning sustainability, based on the old teaching discourse about ‘putting the trash in the trash can.’ At the same time, the real theme goes far beyond automatic habits, at a time when the planet frequently receives the actions of the production and consumption processes, in which children are unconsciously involved.
Roles and Responsibilities
Professionals involved in this e-learning project:
- UX Designer and Research (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, synthesized the research, and did all the UX / UI 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…?, Sketch, Style Guide and Task Flow.
- Build — Wireframe, UI Screens and Prototype.
- Test — Implementation, Usability Testing, Improvements, Outcome and Lessons.
Empathize
Research
The study of the studied concepts and the Teacher and Computer Lab Instructor's educational objectives was 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 Interview
On alternate days, we apply two types of questionnaires to students during the class period. The surveys involved 20 qualitative questions related to the habits, customs, forms of communication, and users' visual preferences.
The surveys were answered by two groups, totalling 56 participants. The qualitative research result helped us find the answer to the students’ intention 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, which are 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 actions of the characters. Different possibilities for choosing experiences were defined, grouping them based on correlations between them. 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 validation of the research 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 in a focus group giving feedback about their choices. This exercise allowed creating affinity associations and then developing 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 four user personas, I took into account 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 the 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 that 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 big results.
Although the answers directly correlate, the concept “Encouraging experience with daily life examples” was the team's clearest. According to selection and analysis criteria, I started developing this e-learning from the analysis of 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
The definition of which colour palette was used in the project came from the research field: ten sites with content aimed at children were analyzed, all of them involving subjects such as environment, conscious consumption and sustainability. For each benchmark (e-learning, documentary and video), the most predominant tones were defined by extracting the colours using a selector. Likewise, I obtained the corresponding hexadecimal code for web projects, which accounts for the range of colours compatible with current monitors, as they support a large number of 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. The main points identified by the target audience were:
- Preference for “sans serif” designs and slight inclination;
- The reduction of the body and spacing influences the fluency of reading;
- The use of different typographies does not significantly affect learning;
- The preferential use of typographies whose difference in the characters o, a and g is very evident;
- More informal typography can motivate reading, but children find it easier to read texts that appear more “normal.”
Aller typography is straightforward, well designed and easy to read. On the other hand, it is designed for printed media, with small creases in some of its letters. On the other hand, Calibri has harmonious proportions and rounded endings, which District Pro Medium does not have.
Due to the technical aspects addressed, as it has greater consistency for web projects. Because it is better suited to the target audience's visual needs, the Calibri typography was defined here as the most ideal for developing text blocks. Therefore the typography was chosen for the context of this project.
The “sans serif” text is the fastest to read, the exact opposite when it comes to the printed version.
— JAKOB NIELSEN, Prioritizing Web Usability
I defined Sunday Morning as a secondary font. The typography is playful, it has relief, it is asymmetrical, and it uses the manual style in its line style, referring to the idea of the draft in its hand. The typography adapts fully to the project’s theme, in addition to dialoguing with the game’s proposal.
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 expression Action and Reaction was 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 create the proposal using the Souci Sans typography.
Proposal #2: For the second alternative, I used a world map illustration. In this alternative, I worked with the Aldo typography. The iconographic arrows representing the idea of recycling are simplified into two arrows, which could here be 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, in the questions addressed in action and reaction, the user will respond with decisions based on the chosen character's speeches. 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.
To contextualize the content using an idea to put all the action into something, I considered an essential item for every move: a box.
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 purpose of the game: 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, for the infographic development, I considered three approaches: 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 move around. This alternative intends to take the figures to their destination, which is 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.
After 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 the experiences lived by them, I assumed that browsing through the content will happen intuitively through the recognition and identification with the stories. The user can choose the character related to his behavioural profile to access the content.
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 to develop the e-learning.
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 the buttons to choose between options. Also, I had to establish a hierarchy because it was essential to show the result index at all times (as it was a signal to the user whether he was on the right or lousy path). The seventh draft version met all the prerequisites for the game, and for that reason, 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 development of the game.
With touch-enabled devices, users are very close to the screen and use both thumbs to touch, creating easy touch areas at the bottom of the screen.
I also took into account 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 up 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, which most identifies himself to start the game then.
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 including 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 does not prevent the end-user from experiencing the digital content sequentially as a programmed study program. The development of knowledge takes place 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: by volatile groups, fixed groups or individually.
The students’ learning was evaluated through the teachers' feedback, 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 more critical points or more discrepancy 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 gender, 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,” “economic” 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 had no problems understanding how the game worked and what they should do. Some small 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, to 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 so that the understanding becomes even more tangible.
What have I learned?
I found that environmental problems are more linked to human actions, so they are 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 students’ 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
Thanks for reading!
If you would like to discuss more, share feedback or ask any questions, drop me a line here or connect with me on LinkedIn.
