Spell, the Dog - a Spelling Game for Kids
Spell, the Dog - a Spelling Game for Kids
How might we design a game that engages 3-5 years old child to practice spelling and learn new vocabulary?
Spell, the Dog - a Spelling Game for Kids
Type of project
Game Design
My role
UX/UI Designer, Front-end developer and Project Manager
Paper, markers, Adobe CC (Photoshop, Illustrator, Audition) Draw.io, Sublime Text 3, HTML & CSS, JavaScript, Bootstrap, Slick Slider, jQuery, jQuery UI, Spap.svg and Firebase.
User flow, Customer journey, Design System, UI Desing, Live Prototype
Client / Owner
Personal Project

The Project

Design a game that engages 3-5 years old child to practice spelling and learn new vocabulary. Create a fun environment to practice spelling in the native language or foreign language and build vocabulary. All elements (colors, buttons, sound effects, movements, screen transitions, awards, etc.) should be part of a seamless experience.

The Goals and Challenges

The challenge was based on creating a game for toddlers, developing a whole immersive environment to keep them playing for more than 20 minutes. Encourage learning in a motivating way through awards and due to the treatment of errors in a way that children do not fear mistakes.

1 – Research & Understand

Explore the skills and techniques required to be successful in the game design, the interactions that keep the player in the game, and the environment that the game teaches players.

Discover how a game can incorporate types of learning, to call attention to what might be overlooked as significant forms of learning, and to understand and take advantage of the opportunities that games can provide as an enjoyable learning environment.

The findings after a competitor analysis and a survey were:
– create basic, day-by-bay collections of words to spell
– it’s good to have levels of difficulty
– a character can engage in the experience
– create rewards for each correct word
– create a profile for each child to have it separately from siblings, friends
– present hints, sound, and mnemonic forms to engage in learning
– use voice over, sounds and music to create the environment and increase engagement
– use flat and intuitive design
– use high-quality graphics
– be careful with the app icon. Design something easy to be found by kids.

2 – Sketches & Wireframes

Sketch some user flows for the possible scenarios. We found the necessity of creating profiles for different users on the same device.

Another finding: how to create rewards. Each correct word spelled, the user earns coins, which can be used to unlock hints for more difficult phases. Also, give a choice of picking the difficulty of the levels and pick a language to practice.

Full User Flow:
This flow shows the entire process of the game, including all three personas: new user, returning/new device user, returning/ same device user.

Game Screen Wireframe:
This wireframe shows in details the game screen

3 – Decide & Design

DESIGN SYSTEM: Create a design system that speaks to kids. The study evolved all about characters, symbols, icons, reward system, avatars, music, voice over, character animation to create an immersive experience.

Color Palette:

Buttons Shapes & Icons:


User Avatar:

Word Collections:

Screens UI High-end Design


Initial and Login screens:

Level selection and game:

Change avatar and language:

4 – Prototype

Start by creating a storyboard to explore each user journey, identifying what the user sees, and the user does on each step.

The refined prototype is focused on the UI, applying the findings in all phases before. Also, can be used with real customers for testing purposes.

The prototype was built using HTML5, CSS3, JS, Bootstrap, JQuery, Snap.svg. The database used to save coins and users was Firebase.

Check it out!
Is available on desktop, only.

5 – Test & Validate

The prototype is ready for development after testing and validating the features with users.

The Outcomes

A full game UI with a live prototype to be tested with children. It’s possible to test, record and grab data.

Check it out!
This prototype is available for desktop, only.

The Next Steps on Development

– add words on existing collections;
– add new collections;
– add “How to play” flow;
– create mobile & vertical versions;
– add new languages;
– add avatar customizations;
– find a way to connect with friends.