Interactive Games
At Discovery Education as Creative Director, I was deeply involved in the learning games design, or “Interactives” as they are known in the Edtech industry. I lead the team that conducted visual design research, developed the user interface elements, designed the gaming interaction, and created all art. Below I will share the design system we created and the games themselves.
Destination Space- Grades 3-5
Destination Space
The above is a video clip of the animation from the Interactive Game Destination Space, a game that teaches about spacial distance and positioning in space travel.
User Interrface
UI elements developed specifically for grades 3-5 used in this game- more on the UI kits to come!
UI Shells
Over 100 user interface “shells” were created for every possible scenario from drag and drop to tap and play. There is a set of set of shells for all three grade bands- K-2, 3-5 and 6-12
Mood Board
Mood board created to give guidance on the age appropriate vibe of this game.
UI Kits
UI Kit Grades K-2
Buttons for young children use only symbols and no text. A hand drawn feeling was done in Procreate and transferred to vector in order to be .svg and easily manipulated in code.
UI Kit Grades 6-12
Buttons and additional UI elements for older students are smaller and can contain text.
UI Shells
Over 100 user interface “shells” were created for every possible scenario from drag and drop to tap and play. There is a set of set of shells for all three grade bands- K-2, 3-5 and 6-12
Color, art and graphic design is applied over the shell for each game.
Title Screen
One the left is the K-2 screen with bigger buttons that use symbols rather than text for young children. On the right is the title screen shell for older students using smaller more detailed UI elements.
Drag and Drop Activity
On the left is the screen for younger students. Containers pick up the rounded softer style. The Mikado-chan font is used- a font we designed at Discovery Education for the way young children are taught to read and right. On the right is a modal for older students.
Modals
On the left is the screen for younger students. Containers pick up the rounded softer style. The Mikado-chan font is used- a font we designed at Discovery Education for the way young children are taught to read and right. On the right is a modal for older students.
Response to Environment- Grades 3-5
Response to Environment
Kids design plants that are suited to three different environments
Above
The above is a video clip of the animation from the Interactive Game Destination Space, a game that teaches about spacial distance and positioning in space travel.
Below
Elements from the UI kit for this gradeband.
UI Shells
Over 100 user interface “shells” were created for every possible scenario from drag and drop to tap and play. There is a set of set of shells for all three grade bands- K-2, 3-5 and 6-12
Sound All Around- Grades PreK-2
Sound All Around
An interactive game designed to teach young children about what makes sound and how sound causes movement or vibration
Destination Space
The above is a video clip of the animation from the Interactive Game Destination Space, a game that teaches about spacial distance and positioning in space travel.
Asesment
Kid friendly assessment designed to test knowledge on sound and vibration after playing the game
Old vs. New
Key Updates
New Typography (for every game we touched) including the early learner font designed by my team
Whole new user interface kit with kid friendly buttons
Work in the DE Characters if even in a subtle way
Improve color palette to make it more of an obvious color story
Improve animation
Improve sound quality with new sound clips
Three Moodboards
Here are three of the many mood boards I made for the team to establish an agreed-upon vibe for the updating of this game. I was looking for a cinematic quality feeling, and looking toward other user interfaces that had UI that successfully “popped” on a dark background of space.
The Inconstant Moon- Grades 6-8
The Inconstant Moon
An interactive game designed to teach kids about the phases of the moon and the involvement of the earth and sun as players in this phenomenon
Old vs. New
Key Updates
Gat the game play interface larger and more centered- I did this by moving the suggestion of the sun off of the screen to the left
Remove brightly colored highlights and focus more on what the phases of the moon actually look like for better understanding
Larger, more inspirational photography or illustrations of the moon, earth, and sun. All three bodies are a player here so let’s make them all look as exciting as they are!
Visual updates to the user interface- it just looks30 years old, which it was! Gather all key actions in the left hand panel.
Describing Motion- Grades 3-5
Describing Motion
An interactive game designed to teach kids about the effect of speed as it pertains to distance travelled using car racing to illustrate the lesson.
Three Vibes
Early on I presented the team with three possible vibes for the game- trying to get a feel for what they felt with be most age appropriate and connect best with fourth graders. Fun thing- I sneaked the number 19 in the splash screen as an homage to Stephen King.
Old vs. New
Key Updates
Visual update to UI elements- dials, time pickers, congrats pop-ups, information, ect. to make this game look more fun and modern so students feel like they are playing a game they might play on their own time for recreation.
Redesign the cars and racetrack to look super cool based on a direction chosen from the mood boards
Improve color palette to make it more of an obvious color story
Add car special effects
Starlight Looks Bright- Grades 6-8
Destination Space
The above is a video clip of the animation from the Interactive Game Destination Space, a game that teaches about spacial distance and positioning in space travel.
Starlight Looks Bright
Key screens from Starlight Looks Bright, an interactive learning game for kids about how distance and the atmospheric filter affect intensity of light