UX Case Study: E-learning for kids

Overview

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

Problem statement

Roles and Responsibilities

Design Process

Empathize

Research

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

Surveys and User Interview

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 images represent the things I do and the way I think ".— Pedro C. (student)

Data validation

Define

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

Ideate

How Might We…?

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.
The most voted idea: Encouraging experience with daily life examples

User Interface

Colour palette

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

Typography

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

Logotype

Scenario

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

Iconography

Task flow

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

Sketch

Sketch of the game screen

Build

Wireframe

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!”

Prototype

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

Test

Implementation

Usability Test

Usability test: User, gender, age and corresponding persona

Tested functions:

Outcomes

Help screen: Presentation of the secondary menu
Help screen: an explanation of each element of the game

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!

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

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