CodeAlgo

CodeAlgo is an online educational platform for students K-8 that teaches coding through gaming.

Role:
UX Researcher

Tools:
Dovetail & Figma

OVERVIEW

This online educational platform is used to help normalize coding in elementary and middle school so that kids can develop critical thinking and problem-solving skills before reaching high school. This platform aims to gamify coding in a fun and engaging way in order to foster an encouraging learning environment for students across a range of ages and skill levels.

CodeAlgo's Mission

Our Team's Goal

DISCOVER

Our first step of helping create this platform was the discover phase. We wanted a better understanding of what the students were looking for when it came to playing online games as well as how much control the parents have when monitoring their children playing. Through user interviews and competitive & comparative analysis, we were able to find the root of their motivation and their needs.

1. USER INTERVIEWS

The interviews were conducted via Zoom, in person, and in 2 large group informal settings.

10 Students

6 Parents

2 Informal Groups

INTERVIEW OBJECTIVES

KEY TRENDS
PARENT'S NEEDS

KEY TRENDS
STUDENT'S MOTIVATION

2. COMPETITIVE & COMPARATIVE ANALYSIS

In order to better understand what motivates the students to continue playing games, we looked at Fall Guys, Dragonball Fighterz, and Duolingo to observe some key features the students within the games that the students mentioned during the interview.

DEFINE

During the define phase, we created our problem statements, personas, How Might We (how we will help CodeAlgo move forward with their mission), and user journey maps based on our findings through synthesizing our interviews.

1. PROBLEM STATEMENTS

We came up with 3 problem statements for our 3 main users: CodeAlgo, Parents, & Students.

2. PERSONAS & HOW MIGHT WE

Once we identified the problem statements of CodeAlgo, parents, & students, we put together 2 personas targeting the parents as they will be the consumers purchasing this gaming program and the students who will be learning how to code through CodeAlgo.

After creating the two personas, we came up with How Might We statements and put together ways to fulfill CodeAlgo's mission and our team's goals, as wells as meeting the needs of the parents and motivations of the students.

3. USER JOURNEY MAP

Before moving forward to the design phase of this project, we created 2 prospective user journey maps to highlight the parent's needs and student's motivations as they enter the app and navigate based on their motives and goals.

DEVELOP

Once we have gathered all findings from the research, we moved on to the next phase: develop. During this phase, we created series of wireframes, conducted usability testing, synthesized the results, and made revisions based on the pain points that were mentioned and conducted a hi-fi usability test with the revisions applied.

1. WIREFRAMES

We created wireframes based on the 3 key findings from our research and created the 3 tasks to be completed.

The tasks to be completed are:

1. (For parents) Create an account and set the child's privacy settings

2. (For students) Create your avatar following the example shown above

3. (For students) Add the diamond badge onto your profile

Solution #1:

We created a parent hub where they can keep track of their child's screentime and monitor their safety with full control of the child's game.

Solution #2:

Students wanted a customization experience where they can create their own avatars so we created a way for them to choose their own skin, hair, facial features, clothes, etc.

Solution #3:

Students wanted a way to track their leveling up progress throughout the game and display their badges so we created these frames for them to move their badges around and display them as well as tracking their progress.

2. USABILITY TESTING & SYNTHESIS

Once the frames were created, we moved forward with the mid-fi usability testing among parents and students. The testing was moderated via Zoom as well as in-person observations to better understand the thought process of our users.

LOVED

Through the testing, the parents loved how accessible it was for them to control the screen time and other privacy features within the app for them to monitor as well as the multiple paths that were given for navigation.

NEEDS

As the parents were navigating through the screens, they wanted confirmation of what they have selected and have more options to view level details and filter gaming content their children have access to.

LOVED

The students loved how their progress in the game was being tracked. They also enjoyed how there were different option to choose from during the character customization process. Earning rewards was also something students loved because it motivates them.

NEEDS

As the students were going through the task, they wanted a more clear navigation and a storyline to what the game is centered on. Having clear goals and instructions was also something they were asking for.

3. REVISIONS & HI-FI USABILITY TESTING

Once we made the revisions from the usability tests, we created hi-fi prototypes of the frames and conducted another usability test for the parent's account creation & hub and student's progress & rewards.

BRANDING

In order to creating an appealing gaming experience for our users, we came up with a particular color palette as well as typography to match the theme of coding.