Screen Shot 2022-07-13 at 1.44.45 AM.png

Product

Code Island is a single-player game in Adventure Academy where players can learn how to code by guiding a dragon companion to the end of a level through coding!

Summary

Designing a product for children is very different from designing products for adults. Interactions should be fun, engaging, and encouraging. In this game, other than being fun, we had another problem to solve:
Creating an intuitive flow for teaching programming. We wanted to teach a complicated concept like programming to young kids in a fun way.
The project has several milestones:

1- How do we show the correlation between the codes and the results on the game screen?
2-What elements should we show on the screen?

3-Designing the UI components.
4-Testing and iteration based on the feedback.

Screen Shot 2022-06-30 at 8.49.11 PM.png

I facilitate half of the day workshop for the team to find the best solution. I used Miro board so everyone can participate in ideation and voting.

Sketching Top Concepts to Pursue

Before I spent any time on high-fidelity design, I started by doing solution sketches to communicate with my team.

The approved ideas:
1-We should have a story to create motivation and meaning for their effort.
2-We will have a map to show their progress.
3-We have two different modes for editing codes and playing the codes
4-The screen should be clear and easy to understand and navigate

Screen Shot 2022-07-13 at 12.44.20 AM.png

Screen Shot 2022-07-13 at 12.44.26 AM.png

Screen Shot 2022-07-13 at 12.44.36 AM.png

Screen Shot 2022-07-13 at 12.44.42 AM.png

Screen Shot 2022-07-13 at 12.41.28 AM.png

Inventory on the left and workspace both on the left

Showing actions in words, directions in shapes
The direction's UI pops up after they choose the actions.

Categorizing to simplify the actions
Helping the users to code faster

Screen Shot 2022-05-05 at 11.04.04 AM.png

Collaboration

I collaborate with my team members through messaging in Figma. It’s easier to track the design process since everyone has access to the messages.

Screen Shot 2022-05-05 at 11.07.47 AM.png

Screen Shot 2022-05-05 at 11.09.02 AM.png

Screen Shot 2022-05-05 at 11.19.16 AM.png

Usability Test

Screen Shot 2022-07-18 at 2.23.40 AM.png

Ghost block, for any level other than level one

Screen Shot 2022-07-18 at 2.23.33 AM.png

Preview blocks and bouncing hand for level one tutorial

Final Design

The best design solution for kids is guiding them in an effortless process without any unnecessary distractions. In general, the concept was to start with the preview blocks for the tutorial and then continue with ghost blocks for users so they can start practicing what they have learned. This helped to mitigate distraction — a huge challenge with young users.