E-learning for kids: a UX/UI case study

Image for post
Image for post

Overview

eaction: 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.

My role: UX Research, UX Design and UI Design.

Tools: Pen & Paper, Post-it Notes, Moqups, Flow Mapp, Coogle Mind Map, Skype, Photoshop and Illustrator.

Timeline: 6 months

Goals

  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

The school worked for a few months with elementary school students with issues related to environmental awareness, 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 receives, frequently, the actions of the production and consumption processes, in which children are unconsciously involved.

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

Roles and Responsibilities

Professionals involved in this e-learning project:

  • Literature and Writing Teacher
  • Computer Lab Instructor/Monitor
  • Web Developer
  • UX / UI Designer

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 doing all the UX / UI Design work.

Design Process

Image for post
Image for post
  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.
Image for post
Image for post

Empathize

Image for post
Image for post

Research

The study of the studied concepts and the educational objectives proposed by the Teacher and Computer Lab Instructor 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.

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

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.

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

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 (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.

Image for post
Image for post

Define

Image for post
Image for post

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. UX/UI Case Study. Ottawa, Canada
Focus group: Students analyze the images and grouping according to interests.
Image for post
Image for post
Focus group: Students analyze the images and grouping according to interests.

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

Image for post
Image for post
“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

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

User Persona #3: Lana

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

User Persona #4: Paty

Image for post
Image for post
“I am really into social media. I love interacting with people, singing and make me up.”

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).

Image for post
Image for post
The main activities of the students served as the basis for the creation of the characters.
Image for post
Image for post

Ideate

Image for post
Image for post

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.

Help the students to understand the impact of his choices in order to accomplish the environmental education program.
Help the students to understand the impact of his choices in order to accomplish the environmental education program.

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.

Image for post
Image for post
The most voted idea: Encouraging experience with daily life examples

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 clearest for the team. According to selection and analysis criteria, I started developing this e-learning from the analysis of the audiovisual material, verifying the steps involved in the construction of the content, the type of visual communication, the technology used and the way of approaching the theme.

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.

Image for post
Image for post
Colour palette #1: combination generated from the benchmark research
Image for post
Image for post
Colour palette #2: selected using the Adobe Color tool

After analyzing the colour palettes, it was possible to percept the predominance of natural pastel in the composition of the colours, with the great incidence of green and brown, in addition to neutral and blue tones.

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. Calibri, on the other hand, has the particularities of 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 the development of text blocks. Therefore the typography chosen for the context of this project.

Image for post
Image for post

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.

Image for post
Image for post
The use of more informal fonts can motivate reading, according to ‘Typography for children: legibility research.’

Logotype

The keywords that most translate 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 and with the iconographic arrows representing the idea of ​​recycling, simplified in two arrows, that could here be equivalent to action and reaction. The two logo proposals followed the tones of the previously defined colour palette research.

Image for post
Image for post

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 protection margin of the visual identity 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 as a 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.

Image for post
Image for post
The box represents everything the student will leave for the planet based on his decisions.

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 have a 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.

Paper Textures
Paper Textures
Paper textures

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.

Image for post
Image for post

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 because 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.

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

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 stories told from the research data.

Sketch

Image for post
Image for post
Sketch of the game screen

I needed to develop a screen that represented the character’s speech with the buttons to choose between one option and another. 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.

Image for post
Image for post

Build

Image for post
Image for post

Wireframe

It was necessary to develop a hierarchy of the positioning of the characters in the game to establish the equal importance of the elements above and balance the arrangement of the features on the screen.

Image for post
Image for post
Wireframe 1: a vertical arrangement of elements | Wireframe 2: a horizontal arrangement of elements | Wireframe 3: an arrangement of elements by a group.

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 mentioned. Therefore, the proposal 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.

Image for post
Image for post
Touch areas on tablet (Luke Wroblewski — Research)

I also took into account the touch areas, which would help in the performance and handling of the game.

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 e-learning

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

“Start” screen: The choice of characters

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

In this stage, the proposal is that the user chooses between four characters, the one that most identifies himself to start the game then.

Character challenge: Reuse, increase, discard or reduce?

Image for post
Image for post
Screen: Persona “Tom.”

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

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

The user fulfills the mission or not, using other characters or making other choices to including good influences inside the box.

Prototype

Image for post
Image for post
Simulation of e-learning use: User Persona “Tom.”
Image for post
Image for post

Test

Image for post
Image for post

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. Through the result in each stage of 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. 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.

Image for post
Image for post
Usability test: descriptive table ((user, gender, age and corresponding persona)

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 when 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.”
  • Translated with www.DeepL.com/Translator (free version)
  • 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.
Image for post
Image for post
Help screen: Presentation of the secondary menu
Image for post
Image for post
Help screen: an explanation of each element of the game

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. During the tests, some small implementation problems were observed 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.

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

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 the development of visual stories of the characters, so that the understanding becomes even more tangible.

What I have 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, since 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 that is not based on score, but the development analysis of textual reflection during the school year.

Mediated learning and tests with the e-learning suggested that users could learn some issues related to sustainability through the e-learning, in a playful way and easy visual identification.

I recognize the importance of gradually thinking about new processes that will add and facilitate this game's usability in an experimental phase through new usability tests and applications in new classes, as it is an iterative design project since the problem statement is in constant changing.

Stories can always be the same,what differentiates them is how they are told. — EDITH DERDYK

Image for post
Image for post

Thanks for reading!

If you want to chat, drop me a line here or connect with me on LinkedIn.

Written by

User Experience Designer based in Ottawa, Canada 🇨🇦 marcosrezende.com

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