Case study: Accessibility in education

Gamified learning path

Eduardo Zangrossi Lino

Follow

Published in

Bootcamp

5 min readApr 21, 2023

--

This is the article’s cover with a purple background, with the title on the left side: Accessibility in Education — Gamified learning path. On the right side some screens of the project are shown, but don’t worry, they will be described in detail throughout the article.

The project

Develop a feature for an existing app in which the students go through all elementary school subjects in a gamified way with the possibility of earning rewards as they progress.

On top of that, I had the personal challenge of leading two people with disabilities through the entire design process from scratch.

Industry

This project was developed in an EdTech that has private schools throughout Brazil as clients and seeks to sell its services to the government and be in public schools.

Duration

5 weeks.

My role

I was a Digital Accessibility Specialist Designer and Project Leader, leading two very important people:

Fawn Gomes — Diagnosed as autistic, illustrator and Game Designer Specialist;
Gabriel Menezes — Diagnosed with ADHD and UI Designer.

On top of that, with my experience of 6+ years in frontend development, I was the connection between the design and development teams, always aligning deadlines, expectations, and technical requirements.

Note

All the images presented below contain texts written in Portuguese due to this project being built by a Brazilian company, however, the appropriate alternative texts, titles, and captions were translated into English to provide a good experience for EVERYONE.

If you have any suggestions for improvement for anything in this article, feel free to share.

Understanding the challenge

Right from the start, a big challenge emerged; as soon as the briefing was sent by the Product Owner, we had a hard time understanding its scope.

To save time and be more assertive in communicating our results, I decided to conduct an ideation process, so that we could accurately align what was expected from this project

User story

“As a student, I would like to have a learning path, to understand the progress I have made during my trajectory so that I can learn effectively.”

We didn’t put anything related to accessibility because it would be part of the acceptance criteria, so we would avoid any kind of resistance from the company and the development team.

Mind map

Something very simple that was highly effective in opening our minds.

Filtering the mind map

To focus more on the goal, I decided to filter the mental map with: “Must have” and “Mustn’t have”, so the idea began to take shape.

There’re two lists side by side, the one on the left with the title: Must Have and the items are: Worlds/constellations, fun, feedback to encourage, assorted Duolingo-style games, a few different ways of the same game, more visual resources, rewards, and life system against the boss. On the right list, there’s a title: Mustn’t have and the items are: speed to reply, excessive stress, excessive text, repetitive games, and timer on questions. — Creative process: Filtering the mind map: “Must have” e “Mustn’t have”

Moodboard

A way to gather visual references of what we were planning for the project.

“Pre” prototyping

We’ve just used simple shapes to represent our ideas, and that’s how we validated with the Product Owner.

Sketch of two screens of the project: the screen on the left shows the possibility for the student to order the subjects according to his choice. The screen on the right is composed of a vertical drawing of white dots representing a galaxy and some stars with the names of the subjects, it is the sketch of the main map. — Creative process: First app sketch — Ordering of school subjects and main map

NOTE: The screen for ordering school subjects wasn’t used by the company in the final project due to technical limitations, but the idea was to allow the students to have more freedom but not fewer obligations.

The following images are a few more examples of our creative process.

Horizontal sketch of how the school subject would look like, just like current mobile games, with completed stages and the number of stars earned on each, blocked stages waiting for the previous one to be completed, and rewards in the middle of the map. In the end, a boss to be faced as the formative assessment. — Creative process: First app sketch — School subject map

Sketches using simple geometric shapes of what a stage of the game would look like represented on two cell phone screens side by side: On the left screen there’re doodles representing the text and a representation of a content image. On the right screen, what would be the basic structure of an activity, with a question to be answered, the options, and the Restart and End buttons, all using simple geometric shapes. — Creative process — First app sketch — Theoretical content and activity

A horizontal sketch to represent the boss fight, this being the formative assessment that is composed of three hearts representing his life, a small rocket going in his direction, and the boss, an alien with purple tentacles and a body in white outline and black background, drawn very large and imposing. — Creative process — First app sketch — Boss fight (formative assessment)

Sitemap

After receiving validation from the Product Owner, we created a sitemap to provide everyone with a high-level overview of where this project would fit within the existing app.

High-fidelity prototype

Since we already had a validated foundation for the entire Learning Path and needed to incorporate various elements from the main app, we proceeded directly to high-fidelity prototyping.

Two side-by-side vertical prototypes: on the left, we have the general map of the subjects: on a purple background there’re three drawings: a pen, a book, and an abstract. Several white lines form a map on these drawings; the main ones are bigger and colored stars representing each subject. The one on the right is about geography following the same pattern with a blue background, and the drawings of a map and a compass, there’re completed stages, a reward chest, and the boss in the end. — Prototype: Main screen (left) and geography subject map (right)

Three side-by-side prototypes: the first brings a theoretical content model with an image and the possibility to place a caption, and below are some paragraphs with highlighted sentences and emojis. The next two prototypes are activities with different models to answer: illustration and text. Both of them have visual feedback if is correct or wrong, and an audio icon to narrate the entire activity. — Prototype: Theoretical content model (left) and activities models (right)

Three images represent the boss fight mechanic, where the first shows the boss itself as an introduction, the second shows the wrong answer and the player has lost one of three hearts, and finally, the last one shows the correct answer and the boss losing health points represented by a bar. — Prototype: Formative assessment (boss fight)

Prototype: Activities feedback models (left) and formative assessment feedback models (right)

Some points were considered by us for a design and development that would make this game accessible to everyone:

The WCAG AA criteria were defined as the main goal for this project;
The color palette was approved in contrast tests;
All clickable areas were at least 40 x 40px, a little more than 1cm x 1cm recommended by NN/g in a very good article;
The entire project should be developed respecting the semantics defined by W3C, so users of assistive technologies can enjoy the Learning Path autonomously and fluidly;
Still talking about semantics, it was defined as an acceptance criterion in deliveries made by developers;
Represent mistakes and failures with clarity and never depend only on colors;
Possibility of activating and deactivating animations.

Usability test

Sadly, due to financial reasons, the company stopped the project, and we were unable to carry out the proper user tests with users, especially kids with disabilities so that we could know the real effectiveness and points for improvement.

Expected results with the project’s implementation

According to our user studies, the trend was more significant participation and improvement of students’ learning performance, so this case could be a gateway for the company to sell itself in other educational segments.

My learning

Even though it hasn’t been implemented, this is undoubtedly the project I’m most proud of in my career, as I had the great opportunity to lead two excellent people who taught me a lot, which made me evolve a lot as a human being and professional.

Technically, I was able to improve my frontend knowledge to help the UI Designer in the development of the prototypes and talk to the tech team, and in digital accessibility, I looked for simple solutions to this feature and to be able to “sell” accessibility in the company.