Accessibility in Education

The Project

Develop a feature called "Gamified Learning Path" for an existing app, where students can engage with elementary school subjects in a gamified manner, 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.

About My Role

I was a Product Designer and Accessibility Specialist, leading two very important people:

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

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

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.

The Final Result

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.

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.

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.

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

The WCAG AA criteria were established as the primary objective for this project;
The color palette was approved after passing contrast tests;
All clickable areas exceeded the recommended size of 40 x 40px, which slightly exceeds the 1cm x 1cm guideline from NN/g, as highlighted in an excellent article;
The entire project should be developed in accordance with the semantics defined by W3C to ensure that users of assistive technologies can autonomously and seamlessly navigate the Learning Path;
Continuing to emphasize semantics, it has been defined as an acceptance criterion in deliveries made by developers.
Clearly represent errors and failures without relying solely on colors;
Provide the option to enable or disable animations.

The Process

How my mind worked throughout the entire design cycle to create a great experience.

UX Research

We began the research by gathering information from the stakeholders, identifying the problems they highlighted in collaboration with the CX team and shared with us some valuable information:

In the last semester, there was a reduction of almost 65% in student access to the app.
In a survey carried out with our clients (schools), 90% want something like a learning trail so that classes become more dynamic and playful.
Students completely lost interest in the app and became more dispersed in classes.
Consequently, student performance dropped drastically in the last semester.

Moodboard

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

Benchmarking

The benchmarking was built with 2 players in mind: Duolingo and Angry Birds, considering a market report from the second quarter and User Experience, especially since we had a Game Designer Specialist on our team, we can use them as references:

Includes notes on Angry Birds' Q2 2022, game screenshots, and UX considerations for benchmarking.

A few insights gathered:

Duolingo offers a diversity of ludic activities.
Angry Birds has some mechanics that helped me to make decisions about accessibility, for example: providing previsibility by displaying the map and indicate the locations of rewards.
Both of them challenge the users to enhance their performance using the star mechanic. It's a mechanic that resonates emotionally.
The boss fight was a perfect method to introduce mandatory formative assessment.

Desk Research

According to studies by Metaari (Advanced Learning Technology Research), as reported in a CNN Brasil article, it is expected that gamification in education will experience a 15.4% growth from 2019 to 2024.

Furthermore, the article states, "Gamification in education brings more dynamism to learning by using elements from games to make the learning process more interactive and engaging for students."

Qualitative Research

The sampled public interviewed consisted of:

7 teachers
5 parents of students
5 students between 8 and 12 years old

Image displaying notes containing both positive and negative statements made by the interviewees.

A few problems indentified:

Students have completely lost interest in the app.
Decrease in students' academic performance.
Students have become more distracted during classes.
Teachers are having difficulties in teaching the subjects as they are obliged to use the app.

Conclusion

The results clearly indicated the need to introduce a new feature and understand how the users would respond. Our recommendation was that the app should become more interactive, engaging, and offer a greater variety of activities and interactions. While a complete redesign was not part of the plans, a feature idea received positive feedback from the business, CX, and development teams, so let's get to work!

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

Low-low-fidelity Prototype

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.

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.

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.

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.

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

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.

Key Learnings

It's not magic, it's continuous improvement!

What This Project Taught Me?

Although it hasn't been implemented, this project is undoubtedly the one I'm most proud of in my career. I had the privilege of leading two outstanding individuals who taught me a great deal, resulting in significant personal and professional growth.

On a technical level, I had the opportunity to enhance my frontend knowledge, collaborating closely with the UI Designer to develop prototypes and communicate effectively with the tech team. In the realm of digital accessibility, I actively sought out straightforward solutions for this feature and strived to promote the importance of accessibility within the company.