Reaction: an e-learning app for elementary school students



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? 🤔


  1. Provide a didactic resource, through instructional design, which aims to contribute to the teaching methodology;
  2. 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.
  3. Stimulate students’ critical sense of sustainability, conscious consumption and well-being.
  4. Prototyping, building and experimenting with the e-learning to define a probable creative and practical line to be designed through the research process.
  5. Identify the possibility of reuse and expansion for different disciplines, thus providing an opportunity for interdisciplinary work.

Problem statement

Roles and Responsibilities

  • UX Designer and Research (My role)
  • Literature and Writing Teacher
  • Computer Lab Instructor/Monitor
  • Web Developer

Design Process

  1. Empathize — Survey, Focus Group and User Interview.
  2. Define — User Persona; Benchmark (e-learning, videos and documentaries focused on the theme).
  3. Ideate — How Might We…?, Sketch, Style Guide and Task Flow.
  4. Build — Wireframe, UI Screens and Prototype.
  5. Test — Implementation, Usability Testing, Improvements, Outcome and Lessons.



Concept map: Project delimitation — UX/UI Case Study. Ottawa, Ontario. Canada
Concept map: Project delimitation

Surveys and User Interview

Sport, Leisure, Technology and Style — UX/UI case study. Ottawa, Ontario. Canada
Four interest groups: Sport, Leisure, Technology and Style

"The images represent the things I do and the way I think ".— Pedro C. (student)

Data validation


User personas

Focus group: Students analyze the images and grouping according to interests. UX/UI Case Study. Ottawa, Canada
Focus group: Students analyze the images and grouping according to interests.
Focus group: Students analyze the images and grouping according to interests.

User Persona #1: Tom

“When I come home from school, I play video games, or I use a laptop. This is my spare-time activity.”

User Persona #2: Zeca

“I like to play ball at school and championships. This is my favourite sport.”

User Persona #3: Lana

“My favourite hobby is watching movies and playing with my dog.”

User Persona #4: Paty

“I am really into social media. I love interacting with people, singing and make me up.”
The main activities of the students served as the basis for the creation of the characters.


How Might We…?

Help the students to understand the impact of his choices in order to accomplish the environmental education program.
The most voted idea: Encouraging experience with daily life examples
  • 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.

User Interface

Colour palette


  • 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.”

The “sans serif” text is the fastest to read, the exact opposite when it comes to the printed version.

— JAKOB NIELSEN, Prioritizing Web Usability

According to' Typography for children: legibility research, ' the use of more informal fonts can motivate reading.’



The box represents everything the student will leave for the planet based on his decisions.
Paper Textures
Paper textures


Task flow

Task flow: possible paths to be taken during the process.


Sketch of the game screen



Wireframe 1: a vertical arrangement of elements | Wireframe 2: a horizontal arrangement of elements | Wireframe 3: an arrangement of elements by a group.
Touch areas on tablet (Luke Wroblewski — Research)

UI Screens

The home screen of the e-learning

The home screen of the e-learning has three initial options: “Instructions,” “Start” and “About.”

“Start” screen: The choice of characters

The choice of characters. In the right corner, the "Help" option.

Character challenge: Reuse, increase, discard or reduce?

Screen: Persona “Tom.”

Final screen: Result of the decisions

Final positive screen: “Mission Accomplished! You were able to influence the planet with good deeds positively. Congratulations!”


Simulation of e-learning use: User Persona “Tom.”
Reaction: Screens



Usability Test

Usability test: User, gender, age and corresponding persona

Tested functions:

  • Understanding of the item “Instruction”;
  • Use of the “Help” item;
  • Visual recognition of user personas;
  • Choose a character and complete the activity.


  • 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.
Help screen: Presentation of the secondary menu
Help screen: an explanation of each element of the game
  • 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)

Instructions Screen: “Help your character to transform simple everyday actions into the survival treasure of future generations.”

What have I learned?

Thanks for reading!



Sr. User Experience Designer based in Ottawa, Canada 🇨🇦

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store