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