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.
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
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.
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
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
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.
Usability Test
Ghost block, for any level other than level one
Preview blocks and bouncing hand for level one tutorial
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.
Map's Illustration
UI Design
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!
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
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.
Level One
Rest of The Levels
User Flow in a Glance
Flowchart
Running Usability Test
​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.