AJ’s Recycle Rescue

This project was one of several PBS’s Hero Elementary educational games in which I was UI/UX lead. This game in particular teaches 1st-3rd graders the concept of cause and effect, specifically that you can take two objects and combine them to create another entirely different object that’s greater than the sum of its parts.

Fun challenges I dealt with include designing kid-friendly UI size for a tiny mobile screen, emphasizing game critical cause and effect relations with minimal text and icons, and designing complex tier system behavior and crafting system without resorting to abstract UI that younger demographics might not be able to understand.

Play on PBS Kids!

My Role

UI/UX Lead

Team

Filament Games, TPT PBS, PBS Kids

Tools

Adobe XD, Photoshop, Illustrator, Unity

Timeline

December 2019 - April 2020

 

Gameplay

Crafting_1.png
Crafting_2.png
Crafting_3.png
Crafting_4.png
Crafting_5.png
Crafting_6.png

UI Animations

Crafting_GIF_3.gif
Crafting_GIF_1.gif
Crafting_GIF_2.gif

Sketches

Concept sketches for crafting animations. The main question was how to design a generic animation that kids would intuitively read as the original objects not simply disappearing but rather being mashed together into a new creation.

Concept sketches for crafting animations. The main question was how to design a generic animation that kids would intuitively read as the original objects not simply disappearing but rather being mashed together into a new creation.

Userflow for the game. Focuses on the difference of Tier 1 objects (ones that need 2 objects to be complete) and Tier 2 objects (ones that need 3 objects to be complete).

Userflow for the game. Focuses on the difference of Tier 1 objects (ones that need 2 objects to be complete) and Tier 2 objects (ones that need 3 objects to be complete).

Decision tree for types of slots. Puzzle slots require specific items whereas crafting slots may be filled with anything. Puzzle slots give players a challenge and goal whereas crafting slots allow them to be more creative, an important part of any c

Decision tree for types of slots. Puzzle slots require specific items whereas crafting slots may be filled with anything. Puzzle slots give players a challenge and goal whereas crafting slots allow them to be more creative, an important part of any crafting game.

One particularly tough issue was making the slots look like the inserted items will eventually combine together without using a "+" symbol as young players might not be familiar with math equations yet. In this case, we came up with a funnel-like sha

One particularly tough issue was making the slots look like the inserted items will eventually combine together without using a "+" symbol as young players might not be familiar with math equations yet. In this case, we came up with a funnel-like shape to imply the items will merge together.

The first version of the crafting screen.

The first version of the crafting screen.

A slightly more updated version of the crafting screen. Includes the log button, closed captions, and item slots.

A slightly more updated version of the crafting screen. Includes the log button, closed captions, and item slots.

Another version of the crafting system that was cut for being too mechanically heavy, tedious, and generally not fun. Players were intended to collect several items in order to create one large construct.

Another version of the crafting system that was cut for being too mechanically heavy, tedious, and generally not fun. Players were intended to collect several items in order to create one large construct.

An early iteration of the crafting log that shows players what they've already made. Was originally meant to also give players hints on what to do next.

An early iteration of the crafting log that shows players what they've already made. Was originally meant to also give players hints on what to do next.

Sketches also included UI animation and behavior. In this case, when the red tire is dragged to the item slot, other inventory items shift one space to the left and both planks return to the inventory rather than the left-most plank simply swapping w

Sketches also included UI animation and behavior. In this case, when the red tire is dragged to the item slot, other inventory items shift one space to the left and both planks return to the inventory rather than the left-most plank simply swapping with the tire.