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

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.

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.

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. Gamification is particularly valuable for our target users as it can reduce syntax issues that tend to trouble novice programmers.

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.
Competitive Analysis Dashboard Pt.2
Competitive Analysis Dashboard Pt.1

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.

Four-quadrant Matrix

Affinity Map

Feature Brainstorming

Persona 1

Persona 2

Anti-Persona

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

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.

PHASE 1: PAPER PROTOTYPES

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.

The slideshow to the right labels the design issues that were identified during the first round of user testing.

Coding Lesson

Game Map

Profile Pop-up

PHASE 2: LOW FIDELITY PROTOTYPES

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.

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.”

Coding Basics World Map Screen

Game Map Onboarding Screen

Profile Pop-up

Second Half of Profile Pop-up

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.

PHASE 3: MID-FIDELITY PROTOTYPES

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.