Code Adventure
Learning to code is becoming one of the most crucial and sought after skills in today’s digital world. Not only does the ability to code open up diverse career opportunities, it also enhances one’s understanding of technology, fosters problem solving skills, and helps develop innovative thinking. Yet coding is a difficult skill many people struggle to learn and teach. I wanted to tackle this problem and help reduce the barriers to learning coding.
One of my areas of interest is gaming which led me to exploring the concept of gamification. So prior to this project, I had previous experience in applying gamification to enhance learning and engagement. I knew when I first identified the difficulties and importance of learning to code that this problem could be addressed using a gamified approach. Therefore, I decided to develop a solution involving gamification. From there I recruited a diverse team of people interested in undertaking this project we named Code Adventure.
The goal of this project was to design a solution to help teens, college students, and young adults with little to no previous coding experience learn how to code. We sought to lower the obstacles of learning coding to help more people grasp coding fundamentals and understand how code function.
Description
UX/UI Designer
Team Leader
Researcher
Role
Gabriella Thompson
Kaodili Okwuaka
Vignesh Sankaran
Ritprabha Suryavanshi
Ruriko Murito
Team
We examined current literature to better understand gamification and its potential in facilitating learning to code. We identified the following key insights:
Gamification can be defined as the application of common game elements to non-gaming settings or systems.
Gamification has been shown to increase activity performance and test scores across multiple sectors including business, medical, and technology.
Gamification has been proven to be especially useful for novice programmers by building necessary foundational knowledge of programming concepts while reducing the syntax issues that often challenge beginners.
Common gamification elements used are point systems, leaderboards, badges, user levels, feedback, goals, rewards/unlockables, game-based visual aesthetics, and game-based mechanics.
Features like instant feedback, clear goals, user levels, and completion status are linked to higher feelings of self-efficacy for users.
Background Research
We conducted an analysis of existing coding games and other types of online sources used for learning coding. The analysis focused on the competitors features, target users, strengths, and weaknesses. This revealed the following key gaps, opportunities, and features worth incorporating:
Most existing coding games either target children or adults with previous coding experience. There’s a lack of games tailored to teens and young adults who are just starting out.
Some of the existing coding games don’t use real-world languages and instead create ones specific to the game. While this teaches basic coding concepts it doesn’t go beyond that to teach languages and syntax used in today’s technology.
Employing leadership boards that rank players based on their scores on a weekly or monthly basis fosters competition among players and motivates players to continuously improve.
A frequently used method for encourage continued usage and motivation is having unlockable achievements or badges that are earned as a user completes levels.
Competitive Analysis
We interviewed potential users to get insight into their experience with online learning platforms, learning preferences and challenges, experiences with educational and casual gaming, coding interest and experience, and their thoughts on using gaming elements to learn coding. We created an affinity map based on our interview results to illustrate common themes and feedback.
Gathering Insights
Our next step was to develop personas for three types of potential users. The personas served as a reminder of our different users’ needs, wants, and goals.
Personas
We developed two storyboards covering scenarios of users’ using Code Adventure.
The first storyboard entails a teacher receiving a notification that the class engagement with lesson 5 is low. She opens detailed reports generated by EngageEdu and is able to identify that lessons with videos and interactive components have higher engagement and those like lesson 5 without any tend to have lower engagement. She uses this information to reshape her lesson plans in a way that fosters higher engagement.
Our second storyboard shows a student who has become disengaged with online learning. The AI detected they are disengaged and asks the student if they are struggling and feeling disengaged. The student confirms they are having trouble and are disengaged. The AI then provides suggestions to help the student which then allowed the student to re-engage and understand the concept.
Storyboards
Based on all the above research, we decided to include the following features in Code Adventure:
Game Map
Enables users to see and navigate between the different lessons and levels.
Consist of the world map detailing all the different lessons and individual lesson maps with multiple levels.
Displays the different lessons users can visit, the levels in each lesson, the top-level navigation bar with the icon to navigate to the profile, icon to return to world map, and current lesson.
Levels
Allows users to play a coding mini game designed to teach a specific coding concept or language.
Player Profile
Allows users to view their awarded badges, set goals, and check their recent progress, see completed levels, and view a leaderboard to see how their weekly score compares to other players.
Design Decisions
The next step after deciding on the main features of Code Adventure was to create paper prototypes.
Paper Prototypes
We conducted user testing on the paper prototypes by doing in-person interviews using a think-aloud protocol. Participants were asked to complete tasks and narrate their thought process as they go. We interviewed a total of 6 participants ranging from no previous coding or gaming experience to those with ample of both. Round one of testing included the following feedback for each feature:
Game Map
Common feedback for the map included difficulty in identifying the level markers and their ability to be clicked, there was a lack of labeling, and laying out components such as the progress bar so it’s in a location that matches what users are familiar with.
Levels
The feedback we got was that participants liked having the introduction instructions displayed as a pop-up, that the interactivity of the level was good, but having the exit icon in settings made it difficult for participants to figure out how to close the level, and participants wanted the code displaying and updating as they play in order to understand the code.
Player Profile
The most common feedback we got from participants regarding the profile included problems navigating between badges, having completed lessons being shown under recent progress, and not being able to identify their spot on the leaderboard.
User Testing Round 1
We then moved on to creating a low fidelity prototype in figma incorporating the feedback we got from testing the paper prototypes.
Based on the feedback for the game map, we moved the progress bar to the top and made the level icons stand out and appear clickable.
We then moved on to creating a low fidelity prototype in figma incorporating the feedback we got from testing the paper prototypes.
Based on the feedback for the game map, we moved the progress bar to the top and made the level icons stand out and appear clickable.
For the level we added an exit button to the top rather than having appear under settings. We also made sure the code update as the user plays.
To address the feedback from the profile feature we created a box around the badges section, so users know what controls belong to it rather than the goal section. Another change was creating a separate section for the completed levels. And the last change to the profile was using color to denote a user’s spot on the leaderboard for easier identification.
Low Fidelity Prototypes
Our next step was to do another round of testing. We conducted used a think aloud protocol and asked users to complete 8 tasks. We used the website usertesting.com for 6 of the interviews and one in person interview for a total of 7 interviews with 7 new participants. Round two of testing included the following feedback for each feature:
Game Map
The feedback we received was that navigating the world map was intuitive, the level map was hard to navigate as most participants were unable to figure out how to switch between levels, participants felt the level dots should be labeled not just while hovering, and there needed a line connecting the level dots so they could follow along a path.
Levels
The feedback indicated that the level instructions were easy to understand, the visuals for the level game were unexciting, there was confusion on when the level game ended, participants were unsure how the game relates to the concept, and the section explaining the concept was overwhelming due to everything being squished into one paragraph.
Player Profile
The feedback we got from participants regarding the profile was that it was easy to navigate and understand.
Other Feedback
We received feedback from several participants indicating a need for a short onboarding or tutorial to help new users understand what Code Adventure entails.
User Testing Round 2
We then moved on to creating a high fidelity prototype in figma incorporating the feedback we got from testing the low fidelity prototypes.
We incorporated participants’ feedback for the game map by arranging the level markers so they follow a path and labeling the level markers with their corresponding level number.
Based on the feedback for the level, we split up the text in the lecture section where the concept is explained into multiple paragraphs, made the visuals more exciting, included how the game demonstrates the lesson concept in the instruction section, and added a pop-up indicating lesson completion.
There wasn’t any changes made to the profile besides transforming it into a higher fidelity.
We added a short onboarding tutorial for new users to address the feedback we received regarding a lack of an introduction to Code Adventure.
High Fidelity Prototype
For round 3 we followed a think-aloud protocol and asked participants to complete the same 8 tasks plus the additional question from round 2. We used usertesting.com to conduct all 9 interviews. Round three of testing included the following feedback for each feature:
Game Map
The results of round three showed smooth navigation of both the world and level map by participants, and the functionality and position of the features on the map met participants expectations.
Levels
The feedback we got was that the visuals and simplicity of the game made it easy to comprehend, it needs to be more obvious what line code is being updated after each in game action, and there was a desire to see a summarization of what they learned and how it can be used at the end of each level.
Player Profile
The feedback for the profile was that it was easy for the participant to view badges, navigate through their profile, and view their level progress.
User Testing Round 3
The next step for Code Adventure would be to apply round three’s finding to our prototype. From there, we would continue to do more testing until we consistently received only positive feedback. At this point we would create prototypes for more lessons and levels. We would then focus on conducting testing for the lessons and levels to make sure they work, cover material critical to learning code, and are enjoyable. Then we would partner with programmers and graphic designers to create the game application and continue testing. After rigorous testing we would then launch the game. From this point on we would continue to add content, improvements, and bug fixes.
Next Steps
Due to time constraints and a limited number of people we weren’t able to create prototypes for additional levels or lessons. Had it been possible, I would’ve recruited more people to work on creating prototypes for both. Another thing I wish we did was to talk to subject matter experts which would be people who regularly teach code to others. We could have benefited from what they’ve seen from their experience teaching and received more insight into things like how to structure our lessons and levels, what content to include, and what things seem to help people learn different coding concepts.
reflections
Code Adventure
Learning to code is becoming one of the most crucial and sought after skills in today’s digital world. Not only does the ability to code open up diverse career opportunities, it also enhances one’s understanding of technology, fosters problem solving skills, and helps develop innovative thinking. Yet coding is a difficult skill many people struggle to learn and teach. I wanted to tackle this problem and help reduce the barriers to learning coding.
One of my areas of interest is gaming which led me to exploring the concept of gamification. So prior to this project, I had previous experience in applying gamification to enhance learning and engagement. I knew when I first identified the difficulties and importance of learning to code that this problem could be addressed using a gamified approach. Therefore, I decided to develop a solution involving gamification. From there I recruited a diverse team of people interested in undertaking this project we named Code Adventure.
The goal of this project was to design a solution to help teens, college students, and young adults with little to no previous coding experience learn how to code. We sought to lower the obstacles of learning coding to help more people grasp coding fundamentals and understand how code function.
Description
UX/UI Designer
Team Leader
Researcher
Role
Gabriella Thompson
Kaodili Okwuaka
Vignesh Sankaran
Ritprabha Suryavanshi
Ruriko Murito
Team
We examined current literature to better understand gamification and its potential in facilitating learning to code. We identified the following key insights:
Gamification can be defined as the application of common game elements to non-gaming settings or systems.
Gamification has been shown to increase activity performance and test scores across multiple sectors including business, medical, and technology.
Gamification has been proven to be especially useful for novice programmers by building necessary foundational knowledge of programming concepts while reducing the syntax issues that often challenge beginners.
Common gamification elements used are point systems, leaderboards, badges, user levels, feedback, goals, rewards/unlockables, game-based visual aesthetics, and game-based mechanics.
Features like instant feedback, clear goals, user levels, and completion status are linked to higher feelings of self-efficacy for users.
Background Research
We conducted an analysis of existing coding games and other types of online sources used for learning coding. The analysis focused on the competitors features, target users, strengths, and weaknesses. This revealed the following key gaps, opportunities, and features worth incorporating:
Most existing coding games either target children or adults with previous coding experience. There’s a lack of games tailored to teens and young adults who are just starting out.
Some of the existing coding games don’t use real-world languages and instead create ones specific to the game. While this teaches basic coding concepts it doesn’t go beyond that to teach languages and syntax used in today’s technology.
Employing leadership boards that rank players based on their scores on a weekly or monthly basis fosters competition among players and motivates players to continuously improve.
A frequently used method for encourage continued usage and motivation is having unlockable achievements or badges that are earned as a user completes levels.
Competitive Analysis
We interviewed potential users to get insight into their experience with online learning platforms, learning preferences and challenges, experiences with educational and casual gaming, coding interest and experience, and their thoughts on using gaming elements to learn coding. We created an affinity map based on our interview results to illustrate common themes and feedback.
Gathering Insights
Our next step was to develop personas for three types of potential users. The personas served as a reminder of our different users’ needs, wants, and goals
Personas
We developed two storyboards covering scenarios of users’ using Code Adventure.
The first storyboard entails a teacher receiving a notification that the class engagement with lesson 5 is low. She opens detailed reports generated by EngageEdu and is able to identify that lessons with videos and interactive components have higher engagement and those like lesson 5 without any tend to have lower engagement. She uses this information to reshape her lesson plans in a way that fosters higher engagement.
Our second storyboard shows a student who has become disengaged with online learning. The AI detected they are disengaged and asks the student if they are struggling and feeling disengaged. The student confirms they are having trouble and are disengaged. The AI then provides suggestions to help the student which then allowed the student to re-engage and understand the concept.
Storyboards
Based on all the above research, we decided to include the following features in Code Adventure:
Game Map
Enables users to see and navigate between the different lessons and levels.
Consist of the world map detailing all the different lessons and individual lesson maps with multiple levels.
Displays the different lessons users can visit, the levels in each lesson, the top-level navigation bar with the icon to navigate to the profile, icon to return to world map, and current lesson.
Levels
Allows users to play a coding mini game designed to teach a specific coding concept or language.
Player Profile
Allows users to view their awarded badges, set goals, and check their recent progress, see completed levels, and view a leaderboard to see how their weekly score compares to other players.
Design Decisions
The next step after deciding on the main features of Code Adventure was to create paper prototypes.
Paper Prototypes
We conducted user testing on the paper prototypes by doing in-person interviews using a think-aloud protocol. Participants were asked to complete tasks and narrate their thought process as they go. We interviewed a total of 6 participants ranging from no previous coding or gaming experience to those with ample of both. Round one of testing included the following feedback for each feature:
Game Map
Common feedback for the map included difficulty in identifying the level markers and their ability to be clicked, there was a lack of labeling, and laying out components such as the progress bar so it’s in a location that matches what users are familiar with.
Levels
The feedback we got was that participants liked having the introduction instructions displayed as a pop-up, that the interactivity of the level was good, but having the exit icon in settings made it difficult for participants to figure out how to close the level, and participants wanted the code displaying and updating as they play in order to understand the code.
Player Profile
The most common feedback we got from participants regarding the profile included problems navigating between badges, having completed lessons being shown under recent progress, and not being able to identify their spot on the leaderboard.
User Testing Round 1
We then moved on to creating a low fidelity prototype in figma incorporating the feedback we got from testing the paper prototypes.
Based on the feedback for the game map, we moved the progress bar to the top and made the level icons stand out and appear clickable.
We then moved on to creating a low fidelity prototype in figma incorporating the feedback we got from testing the paper prototypes.
Based on the feedback for the game map, we moved the progress bar to the top and made the level icons stand out and appear clickable.
For the level we added an exit button to the top rather than having appear under settings. We also made sure the code update as the user plays.
To address the feedback from the profile feature we created a box around the badges section, so users know what controls belong to it rather than the goal section. Another change was creating a separate section for the completed levels. And the last change to the profile was using color to denote a user’s spot on the leaderboard for easier identification.
Low-Fi Prototype
Our next step was to do another round of testing. We conducted used a think aloud protocol and asked users to complete 8 tasks. We used the website usertesting.com for 6 of the interviews and one in person interview for a total of 7 interviews with 7 new participants. Round two of testing included the following feedback for each feature:
Game Map
The feedback we received was that navigating the world map was intuitive, the level map was hard to navigate as most participants were unable to figure out how to switch between levels, participants felt the level dots should be labeled not just while hovering, and there needed a line connecting the level dots so they could follow along a path.
Levels
The feedback indicated that the level instructions were easy to understand, the visuals for the level game were unexciting, there was confusion on when the level game ended, participants were unsure how the game relates to the concept, and the section explaining the concept was overwhelming due to everything being squished into one paragraph.
Player Profile
The feedback we got from participants regarding the profile was that it was easy to navigate and understand.
Other Feedback
We received feedback from several participants indicating a need for a short onboarding or tutorial to help new users understand what Code Adventure entails.
User Testing Round 2
We then moved on to creating a high fidelity prototype in figma incorporating the feedback we got from testing the low fidelity prototypes.
We incorporated participants’ feedback for the game map by arranging the level markers so they follow a path and labeling the level markers with their corresponding level number.
Based on the feedback for the level, we split up the text in the lecture section where the concept is explained into multiple paragraphs, made the visuals more exciting, included how the game demonstrates the lesson concept in the instruction section, and added a pop-up indicating lesson completion.
There wasn’t any changes made to the profile besides transforming it into a higher fidelity.
We added a short onboarding tutorial for new users to address the feedback we received regarding a lack of an introduction to Code Adventure.
High-fi Prototype
For round 3 we followed a think-aloud protocol and asked participants to complete the same 8 tasks plus the additional question from round 2. We used usertesting.com to conduct all 9 interviews. Round three of testing included the following feedback for each feature:
Game Map
The results of round three showed smooth navigation of both the world and level map by participants, and the functionality and position of the features on the map met participants expectations.
Levels
The feedback we got was that the visuals and simplicity of the game made it easy to comprehend, it needs to be more obvious what line code is being updated after each in game action, and there was a desire to see a summarization of what they learned and how it can be used at the end of each level.
Player Profile
The feedback for the profile was that it was easy for the participant to view badges, navigate through their profile, and view their level progress.
User Testing Round 3
The next step for Code Adventure would be to apply round three’s finding to our prototype. From there, we would continue to do more testing until we consistently received only positive feedback. At this point we would create prototypes for more lessons and levels. We would then focus on conducting testing for the lessons and levels to make sure they work, cover material critical to learning code, and are enjoyable. Then we would partner with programmers and graphic designers to create the game application and continue testing. After rigorous testing we would then launch the game. From this point on we would continue to add content, improvements, and bug fixes.
Next Steps
Due to time constraints and a limited number of people we weren’t able to create prototypes for additional levels or lessons. Had it been possible, I would’ve recruited more people to work on creating prototypes for both. Another thing I wish we did was to talk to subject matter experts which would be people who regularly teach code to others. We could have benefited from what they’ve seen from their experience teaching and received more insight into things like how to structure our lessons and levels, what content to include, and what things seem to help people learn different coding concepts.
reflections
This doesn’t have to be goodbye.
Send me a message at leahwilliams2019@gmail.com and let’s start a conversation.
This doesn’t have
to be goodbye.