Debuggers
Debuggers began as a semester-long project in a Graduate Interaction Design course. The class was tasked with creating a prototype of a web or mobile application of our choosing as long as it went through critical phases of the design process, such as user research, prototyping, user testing, and revision. My team chose to create a gamified learning tool for coding beginners with the goal to reduce the barriers to coding education for young adults. We recognized that taking the initiative to begin one’s coding education can be the most difficult step of the process. Our gamification approach aimed to demystify coding by making foundational concepts enjoyable to learn. The final mid-fidelity prototype consists of a world map, a level map for the ‘Coding Basics’ world, and an introductory lesson on the coding concept of stack and pop.
role
UX Co-Designer,
UX Co-Researcher
team
Myself and five other MSIS students
timeline
Spring 2024 (13 weeks)
tools
Figma, Adobe Firefly
UX Co-Designer,
UX Co-Researcher
team
Myself and five other MSIS students
timeline
Spring 2024 (13 weeks)
tools
Figma, Adobe Firefly
the problem
Coding proficiency is widely considered to be a valuable skill by many working adults and employers, yet the process of learning to code can be intimidating and many novice learners struggle to commit to their education. Coding educational tools for adults can contribute to this perception by lacking the interactivity necessary to keep learners engaged and motivated to continue.
our solution
Debuggers offers a gamified experience to teach coding concepts through interactive lessons. This approach can help demystify coding and help learners feel motivated to continue.
Preliminary Research
Our research process involved a literature review of gamification in coding education, a competitive analysis of competitor applications, and eight interviews with potential users of our app to understand their needs and concerns about learning how to code.
my role
For this project, another teammate and I divided the research for the literature review and competitive analysis. I took the lead on creating the affinity map based on the notes from preliminary user interviews. During the design process, I was responsible for creating the landing page and world page and revising them throuhgout several rounds of user testing. With the entire team, I helped to conduct user testing and consolidate the revisions.
01. literature review
The insights we gathered through our literature review supported gamification as an effective approach to coding education, highlighting its value to increase performance, self-efficacy, engagement, and motivation (CITE). Gamification is particularly valuable for our target users as it can reduce syntax issues that tend to trouble novice programmers (CITE).
The insights we gathered through our literature review supported gamification as an effective approach to coding education, highlighting its value to increase performance, self-efficacy, engagement, and motivation (CITE). Gamification is particularly valuable for our target users as it can reduce syntax issues that tend to trouble novice programmers (CITE).
02. competitive analysis
We examined the strengths and weaknesses of nine competitor products to understand the current market of gamified coding tools. For easy comprehension, we gathered our research into the following visual.
03. user interviews
We conducted interviews with eight adults who have an interest in coding to understand the challenges and concerns that impact their decision to pursue a coding education. We also identified the elements of digital learning that they found to be effective. These insights were organized into an affinity map (shown below).
The key findings from our user interviews were:
- Career value, social motivation, and intrinsic goals were main reasons for wanting to code
- Participants noted the high difficulty level and being unsure of where to start as key frustrations when attempting to learn coding
- Participants with prior digital learning experience valued diverse content, repitition, flexible structure, and interactivity in the course structure
- In their coding education, participants wanted: simplified coding concepts, familiar interfaces, incentivization, and accessibility/convenience
Our team reviewed the affinity map and met to brainstorm features we wanted to include in the game. We each spent five minutes writing down our ideas, and then we came together to discuss. We categorized each idea into a four quadrant matrix to determine the effort and impact level of each feature.
To accompany our user research, we created personas that depicted potential users and use case scenarios. These artifacts helped us define the goal of our app and focus areas.
Design Process
The insights we gathered from our preliminary research laid the foundation for the design of our web application. We began our first round of protoyping with the intention to design three key features:
Game map: The main map will display all of the different coding worlds that users can visit. Each world will include several levels to learn a coding subject or language. Levels are divided by marked checkpoints on the map, and users must complete all the levels in order to “test out” the world. There will be a top-level navigation bar where users can see their profile, game stats, and current world location.
Coding lessons: Each lesson will teach a coding concept, such as FIFO/LIFO, if/else statements. It will begin by exploring them from a logical and critical thinking perspective. In later levels, users can engage in actual coding games. These concepts will be categorized into sections with a summary of each section's objective. Users can select new concepts to learn and unlock levels as they progress.
Player profile: Each user will have a player profile to hold information about the player, allows them to set goals, view awarded achievements, and check their recent progress. Users will also be able to view a leaderboard to see how their weekly score compares to other players.
01. paper prototyping
The first iteration of our design involved a paper prototype for each of the three features: game map, player profile, and a coding lesson. We used a “Think-Aloud” protocol to conduct user testing with two participants for each feature. The results of our testing helped us identify what aspects of the design should be included in the next round of prototyping.
02. low-fidelty prototyping
Our next phase of designing incorporated the feedback from the first round of user testing to create low-fidelty mock-ups on Figma. We created a total of 41 screens for all three features.
Game and World Map
The images for each map were created using Adobe Firefly’s AI image generator. I used style and structure references to help curate our final design. Using a total 150 prompts to reach our desired selection, the final world map was created from the prompt: “game map with four islands on an ocean; include desert, forest, mountain, and glacier” and the local map was created from: “game style forest landscape.”
The images for each map were created using Adobe Firefly’s AI image generator. I used style and structure references to help curate our final design. Using a total 150 prompts to reach our desired selection, the final world map was created from the prompt: “game map with four islands on an ocean; include desert, forest, mountain, and glacier” and the local map was created from: “game style forest landscape.”
Profile page
Push/Pop coding lesson
After developing these prototypes, we used usertesting.com and in-person testing to gather feedback from seven participants. Our script asked participants to complete seven tasks while thinking-aloud about their process: 1) Viewing their badges, 2) Viewing level progress, 3) Editing their profile, 4) Finding their position on the leaderboard, 5) Exploring the home (game map) page and visiting the coding basics world, 6) Finding the first lesson, 7) Completing the first lesson.
03. mid-fidelty prototyping
The feedback we received from user testing on the low-fidelty prototype guided our final version of the application—81 mid-fidelty screens that depict the game and world maps, a push/pop coding lesson, and a profile page pop-up.
The video below is a walkthrough of our final mid-fi prototype, including the world and game maps, profile page, and the coding lesson. The only elements of our design that are not included in this video is the final quiz to test the player’s knowledge of the lesson.
future directions
During the third and final round of user testing on our finished prototype, we uncovered additional insights that would guide future iterations of this project. The most urgent feedback we received was to improve the clarity of our game instructions and display them more prominently on the interface so that users are less likely to disregard them. A high-fidelty version of this game would also include completed lessons for each world on the maps and a responsive profile page that updates when each lesson is completed.