rrLogo3

Literacy, Gamified.

Project Overview

I designed a literacy learning platform for K-5 students with the goal of making reading fun and accessible for everyone. As the only designer on the team, I worked closely with curriculum experts, instructional designers, and a remote creative studio to build an engaging and effective experience. The result is an interactive platform that helps students improve their literacy skills at their own pace, while keeping things fun and inclusive for all learners.

Icon Layout
Icon 1
0 to 1
Icon 2
Web App
Icon 3
Game Design
Icon 3
Prototyping
Icon 3
Art Direction

My Role

As the sole product designer on this project I was responsible for crafting and pitching the initial concept. From there I produced or directed every detail and asset that went into the product. Wireframes, art, character design, voice acting, sound effects, content, etc. This project was the most fun I've had in my career as a designer.

Recognition

iste-logo

ISTE 2020 Best of Show

The Problem

The Problem

The Problem

The goal was to create a literacy product that was both fun and helpful, especially for K-5 students who were struggling to keep up. Many of these students had a hard time staying on track with their peers, and traditional tools just weren’t cutting it. We needed to build something that let them learn at their own pace, while still keeping them motivated and engaged, so they could catch up without feeling left behind.

The goal was to create a literacy product that was both fun and helpful, especially for K-5 students who were struggling to keep up. Many of these students had a hard time staying on track with their peers, and traditional tools just weren’t cutting it. We needed to build something that let them learn at their own pace, while still keeping them motivated and engaged, so they could catch up without feeling left behind.

The goal was to create a literacy product that was both fun and helpful, especially for K-5 students who were struggling to keep up. Many of these students had a hard time staying on track with their peers, and traditional tools just weren’t cutting it. We needed to build something that let them learn at their own pace, while still keeping them motivated and engaged, so they could catch up without feeling left behind.

4x

How much more likely ineffecient readers are to drop out of high school than their peers 

37%

Percentage of 4th graders reading below a basic level

Research

Research

Research

To ensure we were designing a product that would truly meet the needs of students, I conducted thorough research into modern literacy pedagogy through experts at our company, the challenges faced by struggling learners, and the broader landscape of education technology. I also delved into the preferences and mindsets of K-5 students to better understand what styles, themes, and topics would resonate with them. This research informed every aspect of the product, from its educational structure to the narrative and visual design, helping us create an experience that was both effective and appealing to a diverse range of learners.

To ensure we were designing a product that would truly meet the needs of students, I conducted thorough research into modern literacy pedagogy through experts at our company, the challenges faced by struggling learners, and the broader landscape of education technology. I also delved into the preferences and mindsets of K-5 students to better understand what styles, themes, and topics would resonate with them. This research informed every aspect of the product, from its educational structure to the narrative and visual design, helping us create an experience that was both effective and appealing to a diverse range of learners.

To ensure we were designing a product that would truly meet the needs of students, I conducted thorough research into modern literacy pedagogy through experts at our company, the challenges faced by struggling learners, and the broader landscape of education technology. I also delved into the preferences and mindsets of K-5 students to better understand what styles, themes, and topics would resonate with them. This research informed every aspect of the product, from its educational structure to the narrative and visual design, helping us create an experience that was both effective and appealing to a diverse range of learners.

Concept

Concept

Concept

I started by developing the concept for a gamified reading platform that would appeal to children, incorporating a fun and engaging theme. I researched game design best practices and sought feedback from children, teachers, and co-workers to help develop it. Outside of the core educational content, I focused on developing three primary aspects to the product.

I started by developing the concept for a gamified reading platform that would appeal to children, incorporating a fun and engaging theme. I researched game design best practices and sought feedback from children, teachers, and co-workers to help develop it. Outside of the core educational content, I focused on developing three primary aspects to the product.

I started by developing the concept for a gamified reading platform that would appeal to children, incorporating a fun and engaging theme. I researched game design best practices and sought feedback from children, teachers, and co-workers to help develop it. Outside of the core educational content, I focused on developing three primary aspects to the product.

story

Story

The narrative layer that ties all the elements together in a cohesive and interesting way.

mechanics

Mechanics

The core ways that players interact with  and progress through the product.

feedback loops

Engagement Loops

Systems that provide motivation and keep the player engaged.

Story

There were a number of options I played with for story concept. The one that resonated the most with K-5 children was a wildlife conservation theme that saw students rescuing endangered animals from a villainous character.

A primary mechanic was for each level to behave as a platformer (think Mario). As you moved your character through the level, you would encounter learning challenges, rescuing an endangered animal at the end of each level. 

A primary mechanic was for each level to behave as a platformer (think Mario). As you moved your character through the level, you would encounter learning challenges, rescuing an endangered animal at the end of each level. 

Platformer Mechanic

platformerConcept

A primary mechanic was for each level to behave as a platformer (think Mario). As you moved your character through the level, you would encounter learning challenges, rescuing an endangered animal at the end of each level. 

A primary mechanic was for each level to behave as a platformer (think Mario). As you moved your character through the level, you would encounter learning challenges, rescuing an endangered animal at the end of each level. 

A primary mechanic was for each level to behave as a platformer (think Mario). As you moved your character through the level, you would encounter learning challenges, rescuing an endangered animal at the end of each level. 

Gameplay Loop

Workflow

The core gameplay loop involved a wildlife refuge that served as the home page. From here, students could launch different quest (levels) across multiple chapters of curriculum. Each level consisted of a number of lessons and activities to complete.

Engagement Loops

feedbackLoops3

There were a number of feedback loops that I aimed to include in the game, and most were implemented. We left out reward chests and player leveling in favor of earning tokens and unlocking challenges. Both mechanics were used to unlock items that could be used to customize the student's refuge and avatar.

A primary mechanic was for each level to behave as a platformer (think Mario). As you moved your character through the level, you would encounter learning challenges, rescuing an endangered animal at the end of each level. 

A primary mechanic was for each level to behave as a platformer (think Mario). As you moved your character through the level, you would encounter learning challenges, rescuing an endangered animal at the end of each level. 

Architecture

Architecture

Architecture

iaMap

The product had a simple architecture with the Journey screen doubling as the landing page and access to the core experience. In addition there were two supporting features accessible from the Journey screen, the Ranger Station and the Minigames section.

Wireframes

Wireframes

Wireframes

The entire experience was wireframed out prior to testing. Below is a selection of wireframes that were used to test the activities.

wireSpelling
wireInContext
word sort

Testing

Testing

Testing

To validate our design and ensure it met the needs of our students, I conducted user testing with both my co-workers' children and real students in classrooms at certain points along the process. I used paper prototypes early on by using printouts of screens as the backdrops and cutting out interactive and movable elements for the children to move around. Later in the process we were able to test with in progress activities and make any needed corrections along the way.

To validate our design and ensure it met the needs of our students, I conducted user testing with both my co-workers' children and real students in classrooms at certain points along the process. I used paper prototypes early on by using printouts of screens as the backdrops and cutting out interactive and movable elements for the children to move around. Later in the process we were able to test with in progress activities and make any needed corrections along the way.

To validate our design and ensure it met the needs of our students, I conducted user testing with both my co-workers' children and real students in classrooms at certain points along the process. I used paper prototypes early on by using printouts of screens as the backdrops and cutting out interactive and movable elements for the children to move around. Later in the process we were able to test with in progress activities and make any needed corrections along the way.

testingwmonkey

(Testing done with human children, not monkeys)

(Testing done with human children, not monkeys)

(Testing done with human children, not monkeys)

Asset Creation

Asset Creation

Asset Creation

A product like this requires massive amounts of assets to be created, something that isn't typical with traditional product design. As challenging as it was to organize this effort, this was some of the most fun I've had in my career. 

A product like this requires massive amounts of assets to be created, something that isn't typical with traditional product design. As challenging as it was to organize this effort, this was some of the most fun I've had in my career. 

A product like this requires massive amounts of assets to be created, something that isn't typical with traditional product design. As challenging as it was to organize this effort, this was some of the most fun I've had in my career. 

styleConcepts2

Research

Research

Research

Prior to developing the assets for the game, I went through a round of research to decide what art style would resonate most with K-5 children. This was harder than it seems as the taste across that age range varies greatly. In the end a slightly cartoonish 2D style was the winner.

Prior to developing the assets for the game, I went through a round of research to decide what art style would resonate most with K-5 children. This was harder than it seems as the taste across that age range varies greatly. In the end a slightly cartoonish 2D style was the winner.

Prior to developing the assets for the game, I went through a round of research to decide what art style would resonate most with K-5 children. This was harder than it seems as the taste across that age range varies greatly. In the end a slightly cartoonish 2D style was the winner.

background-collage

Biomes

Biomes

Biomes

Central to the experience were 12 different biomes that users would need to journey their way through. It was important to me that these biomes were visually diverse so that the progression from each environment to the next was obvious. They included caves, rainforest, savannah, forest, jungle, tundra, mountains, coral reef, freshwater, grassland, ocean, and wetlands.

Central to the experience were 12 different biomes that users would need to journey their way through. It was important to me that these biomes were visually diverse so that the progression from each environment to the next was obvious. They included caves, rainforest, savannah, forest, jungle, tundra, mountains, coral reef, freshwater, grassland, ocean, and wetlands.

Central to the experience were 12 different biomes that users would need to journey their way through. It was important to me that these biomes were visually diverse so that the progression from each environment to the next was obvious. They included caves, rainforest, savannah, forest, jungle, tundra, mountains, coral reef, freshwater, grassland, ocean, and wetlands.

Animals

Animals

Animals

Each biome needed a large number of endangered animals to be rescued in them. I consulted the IUCN Red List of Threatened Species to put together a list of animals for each biome. I tried to find animals that were diverse and recognizable to a young child. Such animals included armadillos, pandas, koalas, bears, moose, and, unfortunately, so much more.

Each biome needed a large number of endangered animals to be rescued in them. I consulted the IUCN Red List of Threatened Species to put together a list of animals for each biome. I tried to find animals that were diverse and recognizable to a young child. Such animals included armadillos, pandas, koalas, bears, moose, and, unfortunately, so much more.

Each biome needed a large number of endangered animals to be rescued in them. I consulted the IUCN Red List of Threatened Species to put together a list of animals for each biome. I tried to find animals that were diverse and recognizable to a young child. Such animals included armadillos, pandas, koalas, bears, moose, and, unfortunately, so much more.

animals2
characters (1)

Characters

Characters

Characters

From the beginning of the experience, students are introduced to a few friends (Li, Mike, and Dewey) that help them along their journey and one villain (Buckleboot). These characters were so much fun to bring to life and I even got to audition and direct their voice actors.

From the beginning of the experience, students are introduced to a few friends (Li, Mike, and Dewey) that help them along their journey and one villain (Buckleboot). These characters were so much fun to bring to life and I even got to audition and direct their voice actors.

From the beginning of the experience, students are introduced to a few friends (Li, Mike, and Dewey) that help them along their journey and one villain (Buckleboot). These characters were so much fun to bring to life and I even got to audition and direct their voice actors.

Props

Props

Props

In addition to the primary assets above, countless details, props, and interactive components were created to bring the world to life.

In addition to the primary assets above, countless details, props, and interactive components were created to bring the world to life.

In addition to the primary assets above, countless details, props, and interactive components were created to bring the world to life.

props3

Mockups

Mockups

Mockups

home

Journey Screen

Journey Screen

Journey Screen

Students first land on this screen when logging in. The name of the current journey (biome) is on the buttom with a button to change journeysif they've progressed far enough. Selecting the projile image in the top left opens the profile/ranger station.

Students first land on this screen when logging in. The name of the current journey (biome) is on the buttom with a button to change journeysif they've progressed far enough. Selecting the projile image in the top left opens the profile/ranger station.

Students first land on this screen when logging in. The name of the current journey (biome) is on the buttom with a button to change journeysif they've progressed far enough. Selecting the projile image in the top left opens the profile/ranger station.

profile

Ranger Station

Ranger Station

Ranger Station

The Ranger Station serves as the student's profile. From here, they can access the Animalpedia, Avatar Editor, Archive, Leaderboard, and Challenges which are represented across the room and on the walls. 

The Ranger Station serves as the student's profile. From here, they can access the Animalpedia, Avatar Editor, Archive, Leaderboard, and Challenges which are represented across the room and on the walls. 

The Ranger Station serves as the student's profile. From here, they can access the Animalpedia, Avatar Editor, Archive, Leaderboard, and Challenges which are represented across the room and on the walls. 

animalpedia
archive
avatarEditor

Supporting Features

Supporting Features

Supporting Features

The Animalpedia shows the rescued animals from each biome in their natural habitat. Selecting an animal will go to a page that has a passage about the animal and its conservation status. 
The Archive shows scrolls that have been found on journeys and can be selected to re-read the passages they contain. 
The Avatar Editor allows students to customize their character in a variety of ways. New customization items can be unlocked with tokens earned on their reading journeys. 

The Animalpedia shows the rescued animals from each biome in their natural habitat. Selecting an animal will go to a page that has a passage about the animal and its conservation status. 
The Archive shows scrolls that have been found on journeys and can be selected to re-read the passages they contain. 
The Avatar Editor allows students to customize their character in a variety of ways. New customization items can be unlocked with tokens earned on their reading journeys. 

The Animalpedia shows the rescued animals from each biome in their natural habitat. Selecting an animal will go to a page that has a passage about the animal and its conservation status. 
The Archive shows scrolls that have been found on journeys and can be selected to re-read the passages they contain. 
The Avatar Editor allows students to customize their character in a variety of ways. New customization items can be unlocked with tokens earned on their reading journeys. 

Phonics-InContext2
Phonics-ClozeMatch
Phonics-Reading1
Phonics-Sort2
Phonics-LetterMatch1&2
Phonics-WordMatch

Quest Activities

Quest Activities

Quest Activities

Students first land on this screen when logging in. The name of the current journey (biome) is on the buttom with a button to change journeysif they've progressed far enough. Selecting the projile image in the top left opens the profile/ranger station.

Students first land on this screen when logging in. The name of the current journey (biome) is on the buttom with a button to change journeysif they've progressed far enough. Selecting the projile image in the top left opens the profile/ranger station.

Students first land on this screen when logging in. The name of the current journey (biome) is on the buttom with a button to change journeysif they've progressed far enough. Selecting the projile image in the top left opens the profile/ranger station.

bubbleBugs
matchingGame
wordGardens

Minigames

Minigames

Minigames

With Bubble Bugs students were required to fend off pests from entering the wildlife refuge by capturing them in bubbles and transporting them back to their own habitats.
In Cave Match students needed to match a variety of clues together living in animals' burrows to clear the board.
Playing Word Gardens required the student to complete crossword style puzzles to harvest food to feed the rescued animals. 

With Bubble Bugs students were required to fend off pests from entering the wildlife refuge by capturing them in bubbles and transporting them back to their own habitats.
In Cave Match students needed to match a variety of clues together living in animals' burrows to clear the board.
Playing Word Gardens required the student to complete crossword style puzzles to harvest food to feed the rescued animals. 

With Bubble Bugs students were required to fend off pests from entering the wildlife refuge by capturing them in bubbles and transporting them back to their own habitats.
In Cave Match students needed to match a variety of clues together living in animals' burrows to clear the board.
Playing Word Gardens required the student to complete crossword style puzzles to harvest food to feed the rescued animals. 

Reflection

Retrospective

Retrospective

Retrospective

This project taught me a lot, especially as my first in the education space. I gained a deep understanding of pedagogy and various teaching methods, and collaborated with roles like curriculum experts and instructional designers, which significantly influenced the design. Testing with children was both fun and challenging, but hearing their excitement about the final product was incredibly rewarding. While it’s no AAA game title, it definitely satisfied the "make a video game" item off my bucket list - for now.

This project taught me a lot, especially as my first in the education space. I gained a deep understanding of pedagogy and various teaching methods, and collaborated with roles like curriculum experts and instructional designers, which significantly influenced the design. Testing with children was both fun and challenging, but hearing their excitement about the final product was incredibly rewarding. While it’s no AAA game title, it definitely satisfied the "make a video game" item off my bucket list - for now.

This project taught me a lot, especially as my first in the education space. I gained a deep understanding of pedagogy and various teaching methods, and collaborated with roles like curriculum experts and instructional designers, which significantly influenced the design. Testing with children was both fun and challenging, but hearing their excitement about the final product was incredibly rewarding. While it’s no AAA game title, it definitely satisfied the "make a video game" item off my bucket list - for now.

Testimonial

Testimonial

Testimonial

After leaving the company, a former colleague sent me this testimonial they received on Facebook from a parent. I'm not sure what kind of feedback could top this!

After leaving the company, a former colleague sent me this testimonial they received on Facebook from a parent. I'm not sure what kind of feedback could top this!

After leaving the company, a former colleague sent me this testimonial they received on Facebook from a parent. I'm not sure what kind of feedback could top this!

"My kiddo is a big animal lover so she loves she gets to rescue animals. She also views each journey and passage as a fun challenge and loves to beat Buckleboot as it sparks her competitive nature. She has also really enjoyed being able to customize her character! Since January we've done at least one passage or journey every night at her request. I can't be happier with our experience. I think she has learned a lot over the last month but the biggest improvement has been her confidence."

"My kiddo is a big animal lover so she loves she gets to rescue animals. She also views each journey and passage as a fun challenge and loves to beat Buckleboot as it sparks her competitive nature. She has also really enjoyed being able to customize her character! Since January we've done at least one passage or journey every night at her request. I can't be happier with our experience. I think she has learned a lot over the last month but the biggest improvement has been her confidence."

"My kiddo is a big animal lover so she loves she gets to rescue animals. She also views each journey and passage as a fun challenge and loves to beat Buckleboot as it sparks her competitive nature. She has also really enjoyed being able to customize her character! Since January we've done at least one passage or journey every night at her request. I can't be happier with our experience. I think she has learned a lot over the last month but the biggest improvement has been her confidence."

What I Would do Different

What I Would do Different

What I Would do Different

We worked with an offshore team in India to create the assets, which was cost-effective but challenging. Providing detailed feedback on thousands of art assets highlighted cultural and language differences. If I were to do it again, I’d prefer working with an in-house team. Fortunately, our in-house video and animation team delivered fantastic work, like the video at the top of this page.

We worked with an offshore team in India to create the assets, which was cost-effective but challenging. Providing detailed feedback on thousands of art assets highlighted cultural and language differences. If I were to do it again, I’d prefer working with an in-house team. Fortunately, our in-house video and animation team delivered fantastic work, like the video at the top of this page.

We worked with an offshore team in India to create the assets, which was cost-effective but challenging. Providing detailed feedback on thousands of art assets highlighted cultural and language differences. If I were to do it again, I’d prefer working with an in-house team. Fortunately, our in-house video and animation team delivered fantastic work, like the video at the top of this page.

Jordan Detota

Product Leadership and Design

817.247.1186

Pages

Projects

Approach

More

About Me

Experience

Connect

Toolbox

Reading Rangers

LETRS

Photography

Office Design

COPYRIGHT 2025 JORDAN DETOTA