top of page
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.

My Roles

  • UX/UI Designer 

  • Visual Designer

Team

  • Product owner

  • Game Designer 

  • Programmer

  • Animator

Company

  • Age of Learning

Details in this Case study

  • Competitor Analysis, User Research, Ideate, Design Workshop, Userflow, Flowchart, UI Design, User Testings, Edge Cases

My Approach

I kick started my project by creating a design brief, and clarifying the deadlines and the scope of the project with the product owner. Second, I do my research, work on different ideas with the team,  create mockups and wireframes to get feedback on early stages, and create prototype to test. 

Research

User Interviews

I synced with the user researcher to come up with the most important questions that we need to be answered, such as: 

​​

  • What kind of games you're playing? Which one is your favorite? Why?

  • Have you played any coding games? Why yes/no? Can you explain more?

  • If yes: What did you like the most/ what did you like the least?

We started with having a couple of interviews, in this process, we also learned that children also wanted to be able to see their progress and have a sense of achievement. 

Ideate 

Ideation

I use Miro to communicate my primal ideas with my PO and the game designer. Based on the gameplay, timeline, and feasibility of each feature, we ignore some suggestionor come up with new ideas with the team. 

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.

Adding tabs to group actions and directions​​

​​

  • 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 

Testing

Through testing, we wanted to learn if:
-Our target age can easily follow and understand instructions 
-The tutorials and icons are clear 

After a few testing, we realized that our tutorial was the main issue; having slides that explained the gameplay before the game started was too boring for the kids to keep their attention. We decided to test a few more ideas. The one that was entertaining and clear was the idea of showing each step through a bouncing hand during the game and waiting for the player to take that specific action before moving forward to the new action. Also, the other main change was using a preview block for the first level instead of a ghost block.

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. 

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

Map's Illustration

EnvironmentSprites_Normal-Recovered.png
Visual Design

UI Design

Screen Shot 2022-11-29 at 1.51.52 PM.png

Map Final Design

The camera and back icon are fixed, and the map slides in from right to left ( the previous map will slide out from the same direction )
If the player swipe but lifts her finger to the less half of the next screen, the previous screen slides in again!
If the player swipe and lifts her finger after she passed half of the next screen, the next screen slides in!

Screen Shot 2022-11-29 at 1.41.48 PM.png
Screen Shot 2022-11-29 at 1.41.48 PM.png

My PO was wondering how we could show on the map that there will be new levels ( since the game was going to launch before finishing all the levels ); after I designed a few ideas, the team chose this one, in which by showing the same characters working and "under constructions" sign, it's both informative and funny for our target age. 

Tutorial

Screen Shot 2022-11-29 at 3.08.02 PM.png

At the Tutorial level, there are preview blocks under the “start” button
The bouncing hand indicates how to drag and drop
The hand will keep moving till the player drags the code block
-As soon as the player drops the block, the command options show within the block.
-It opens automatically and remains open until the player chooses her option
-The block number in Inventory and the action’s number in Workspace will change accordingly.

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

Level One

Rest of The Levels

Userflow/Flow Chart

User Flow in a Glance

Screen Shot 2022-07-18 at 2.53.48 AM.png
Screen Shot 2022-05-04 at 5.39.17 PM.png

Flowchart

Running Usability Test

Flowchart

​Kids can lose interest and patience quickly, and I found that the best way to keep them engaged was to give them the actual game as soon as possible and ask questions after  I assigned them various tasks to observe them. I examined their behavior and asked them questions, and during that time, I recorded the session in a video and took some notes so that later on, I could generate insights on how to make the improvements.

Edge Cases

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

Number l

Edge Cases

Number ll

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

Number 2

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

Gameplay

Final Product

THANKS 

bottom of page