Code Championship: Prototyping

TL;DR

A local nonprofit owner wanted to get subjective feedback on a game he created for young coders. My team and I ran remote contextual inquiry, journey mapped, and used the learnings to create a clickable prototype.  

Team: Cristhian Arias-Romero, Mackenzie Leach, Sam Jorgenson

Role: Researcher, UX / UI Designer

Methods: Cognitive Walkthrough, Remote Contextual Inquiry, Journey Mapping, Prototyping

The Problem

It’s no secret that there is a gender and diversity problem in tech. With just 26% of computing-related jobs held by women, the stats for women of color are even more discouraging. According to the latest numbers from Built In, just 3% of computing-related jobs are held by African-American women, 6% held by Asian women and 2% held by Hispanic women.

Code Championship, a local organization created by Lindsey and Luke Schlangen, aims to encourage kids, especially girls and underserved populations, towards STEM by make coding fun and approachable for all. They designed a website that turns coding into a sport-like experience, using friendly competition as a launchpad for learning. 

The website had been originally built to allow Code Championship tournament participants to write code. While this is still the primary purpose, my team was brought on create a better experience for new visitors creating a “bot” (a virtual robot coded according to each game’s goals), for the very first time. 

How might we create a more approachable and inclusive learning environment for kids to explore code in a fun, encouraging way?

The Solution

After conducting research, I decide to focus restructuring the current onboarding process for new users, adding "just-in-time" tips will give gentle guidance while still providing space to tinker and play on their own. Asking questions rather than giving specific directions will instill a sense of curiosity and wonder. In addition, adding more visuals and providing clearer hierarchy creates an inclusive environment where everyone can learn.

The Process

Balancing Understanding and Experimentation 

Our team began by individually conducting cognitive walkthroughs to understand what pain points might exist for a new user visiting the website for the first time. We found that many tasks didn’t meet existing mental models around game mechanics, making it difficult for new users to know how to play the game. Additionally, the game board itself lacked clear visibility and inconsistent mapping, as it was hidden from view until the user programed a bot and pressed a green flag. 

Interestingly, 2 of 4 team members watched a tutorial video before playing and were able to more easily understand the game dynamics. The other two team members, myself included, decided to play without the video in order to see what it would be like for a user going in with minimal context, and had a much harder time understanding the basic game mechanics.  

As we collectively synthesized our individual cognitive walkthrough findings, we discovered that there was no “one way” to approach the game, meaning there was no Happy Path. Without taking away the fun of discovering how to play, we started to wonder how we could approach designing a prototype that balances understanding and experimentation. 

Using the cognitive walkthrough synthesis, we created an interview protocol to be used during contextual inquiry, specifically focusing on accessibility (are users able to understand what to do with minimal context?) and fun (would they want to come back and play again?). 

What’s a Bot? 

We completed one round of contextual inquiry research with a 9-year-old new to the website. As a teammate moderated the session, I paid close attention to identifying pain points and began building a journey map for a new user. 

After spending some time on the programming page, my teammate asked what she was thinking and she responded by saying:

It was clear that there was a missed connection between “bot” and “rabbit.” Additionally, she ignored the existing, wordy instructions on the page, saying, “Why are these boxes here?” and was unable to figure out how to start the bot on her own, thinking that she might have to press “Code” or “Save Now”, missing the green flag entirely.

We then had her watch the 4-minute tutorial video, afterwards saying, “It’s starting to make more sense- it answered a lot of questions I had.” Even after the video, there was still some confusion around how to win the game. After about 8 minutes of free play, she was connecting cause and effect of the coding blocks and was on her way to winning the game. When asked if she would like to play with friends, she said yes, making a clear connection to it being “fun” to play against them and see how they thought it worked.  

The Findings and Recommendations

Creating Just-in-Time Tips 

Our team then individually synthesized the research and created user stories and key opportunity areas. I chose to focus on creating contextual (“just in time”) onboarding tips for new users so that the game strikes an appropriate balance between educational and frustration.

In the original design, users were met with yellow boxes that described the game mechanics and goals. While this may work for kids who learn by reading, I wanted to create something for visual learners as well. I started by highlighting the goals of the game though an animated pop-up.

I also wanted to redesign the start button using NN/g’s usability heuristics to match existing mental models of video & computer games—the green flag shifted to a larger annotated button.

For the game board itself, I added gridlines so it was easier to tell how many coding blocks it would take to move across the board. I also moved the scoreboard above the game board screen to increase visibility and named the section to provide additional context.

I created several "just-in-time" tips as shown in the video below to provide gentle guidance while still creating space to tinker and play. Instead of using prescriptive language dictating exactly what to do, I utilized the Rabbit character to as questions and instill a sense of curiosity and wonder.

I also added several CTA’s to share the game with a friend and join an upcoming tournament, encouraging further reach of the platform and meeting one of the business goals of increased tournament participation. 

My final change was on the “win screen”. During the team’s cognitive walkthroughs, we all found that the design of the existing win screen didn't match the excitement that we felt after accomplishing the game goals. Adding a personalized screen after accomplishing the goals provides new and old users alike with a sense of pride and accomplishment & encourage advancement to higher levels of coding.

The Next Steps

Utilizing the InVision prototype, I would conduct 2-3 more contextual inquiries to understand if the suggested recommendations closed the knowledge gap for new users. In addition, I’d spend more time digging into the various bot coding blocks (control, motion, sensing, operators, variables), building out additional just-in-time tip screens to ensure these aspects of coding were easier to understand.

We heard in our research that there was a large drop off in understanding between Level 0, where Rabbit Race is seated, and the higher levels. I’d also conduct usability research with existing users to see where the pain points lie in the more advanced games to shore up the drop off rates.

Client Feedback

“Wow... this is incredible. As always, there are great ideas that would be really challenging to implement, but I feel like the biggest “wow” moments for me are the, “This is so obvious, how come I didn’t think of that!” The share with a friend link is so great and is something that won’t be too hard to implement. And adding the name before they ever get to building the bot is genius! That’s going to clear up so much confusion! That’s fantastic! Thank you so much!”

- Luke Schlagen, Code Championship Founder