top of page

CodeAlgo

Role: UX Designer        |        Tools: Figma & Illustrator

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

Parent Hub 1 2.png

Overview

Background

CodeAlgo is a platform 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 order to foster an encouraging learning environment for students across a range of ages and skill levels. CodeAlgo asked us to help create a platform for users to explore their game in a fun and engaging way.

Goal

Our team worked with CodeAlgo to 1) perform research with target user groups on the value and structure of the product and 2) create a basic prototype of the program based on the research performed. The goal of this project is to synthesize relevant research to create a MVP of program functionality that CodeAlgo Academy will be able to provide to their developers.

Discover

To better understand the pain points and needs for CodeAlgo's customer base, we decided to begin the project by diving into user interviews. We learned that although students are our users, parents are our customers. Consequently, we split interviews between parents and students.

User Interviews

Icons_edited.png

10 students

6 parents

2 informal groups

Research Objectives

Frame 4.png

To discover how parents monitor children’s gaming activities and what features they are looking for

Frame 3.png

To discover students’ experiences playing educational games and how they learn new skills

We began the parent interviews with questions about previous online gaming platform experience. We spoke to the parents about 1) how they monitor their child's computer activity and 2) what games their child plays. 

We spoke to students about their experience with 1) online gaming and 2) learning how to code in school or at home. In addition, we asked students what keeps them motivated when playing games.

After gathering our user interviews, we chose to synthesize our research using Dovetail software. Through our synthesis, we found our "Parent Needs" and "Student Motivations." We chose the word "need" for parents because as our customer, what they "need" will drive business decisions. We chose the word "motivation" for students, because they don't need the game- they want to play it.

Parent Needs

Group 8.png

Prioritize Learning

Preview Content

Encourage Development

Monitor Activity

Protect Privacy

Control Screen Time

We found that our parent's main needed centered around safety and the ability to monitor their child's activity.

Student Motivations

Group 7.png

Customize Characters

Check Progress

Understand Gameplay

Learn Coding

Earn Rewards

Play with Friends

Students' main motivations centered around customization, rewards, and clear progression in the game.

Define

Our second phase included synthesizing the research we gathered to create assets to help guide us. We put together a clear problem statament, a parent and student persona, and prospective journey maps. 

Problem Statement

Business Problem Statement

CodeAlgo is looking to increase business by becoming a leader in Computer Science Education. They are looking to build a platform that caters to both parents and students and allows users to learn to code from a young age in a fun and interesting environment. They are looking to discover and define what factors would distinguish them from other competitors.

Parent Problem Statement

Parents need an educational gaming platform that prioritizes their child’s safety. Priorities include: control over safety settings, ability to monitor their child’s screen-time, and capability to filter the type of content and interactions their child has during the gaming experience.

Student Problem Statement

Students want a fun and engaging gaming experience with key features that will motivate and excite them to progress. Students want the ability to track their progress through a leveling and reward system that enables them to build and customize their experience.

Personas & Journey Maps

We created two personas for this project- one for each of our users- "Students" and "Parents." For each persona, we created a prospective journey map for features we ideated to meet their needs. 

Group 11.png
Group 12.png
Group 10.png
Group 13.png

Develop

Our third phase took all our learnings into development. We moved forward with wireframes, usability testing, synthesis, and revisions.

Wireframes

We moved forward with 3 solutions for CodeAlgo. For parents, we built out a sign-up process along with a Parent Hub where they could monitor their child's activity. For students, we created 1) a character customization flow and 2) a badge/rewards flow.

Group 14.png

Solution 1

Parent onboarding and preference settings

Group 15.png

Solution 2

Student avatar creation and customization

Group 16.png

Solution 3

Student progress screen and badge/banner display

Mid-Fi Usability Test

Icons_edited.png

5 students

8 parents

Parent Research Objectives

Frame 6.png

To discover any pain points while creating an account and accessing dashboard

Frame 7.png

Assess the parent’s ability to view screen time and explore multi-player settings from the dashboard

We conducted the parent usability testing moderated using Maze. Parents were instructed to complete the flow by creating an account and exploring the Parent Hub.

Through the testing, we found that parents enjoyed the user friendly nature of the experience. They loved that they could be granular with safety restrictions.

 

We found that opportunities for improvement included 1) adding more confirmation screens and  2) the ability to read more about what their child is learning.

Parent Usability Testing

Account Creation & Parent Hub

Group 34.png

1

2

3

4

5

Create an account

Add student’s account

Enter parent dashboard

Click to see screen time

Click to see multiplayer

Group 18.png

Parents were looking for a confirmation page after filling our their username and password but before moving on to create a student account

Group 19.png

Parents wanted more clarity on adding multiple friends at once

Group 20.png

Parents found the sidebar links hard to see

Parents were interested to learn more about each skill

Loves

Row 1.png

Accessibilty

Row 5.png

Multiple Paths

Wants

Level Details

Confirmation

Row 6.png

Filter Content

Student Research Objectives

Frame 3 (1).png

Learn how intuitive the progress screen was without using too many instructions on how to get from point A to point B

Frame 4 (1).png

Understand how student’s took instruction within the game once prompted by on screen call outs

We conducted the student usability testing moderated using Maze. Students were told to explore both the character creation flow and the badges/reward flow.

Through the testing, we found that students enjoyed seeing the progress they made as they continued. They loved all the options and customization options

 

We found that opportunities for improvement included 1) adding in more story telling and  2) clearer navigation.

Student Usability Testing

Character Customization

Group 34 (1).png

1

2

3

Build/create avatar as shown in example

Follow the prompts until character is complete

Once complete, decide to start over

Group 24.png

Students were confused by the checkmark not appearing under their chosen option

Group 25.png

Some students felt that the tutorial section was unnecessary since they already understood this functionality

Student Usability Testing

Student Progress & Rewards

Group 34 (1).png

1

2

3

Visit the Badge Screen

Add the Diamond Badge to the top spot of your avatar

Return to the progress screen

Group 27.png

Functionality of the badge tab felt unclear to some students

Group 29.png

“Goals” felt unclear here to some users

Group 28.png

Many students felt that the plus sign was too small

Loves

Row 1 (2).png

Progress

Row 6 (1).png

Options

Row 4.png

Rewards

Wants

Row 2 (1).png

Navigation

Row 1 (3).png

Story

Row 5 (1).png

Goals

We were able to take the results of our testing and apply the changes to our hi-fi wireframes. 

Branding

For branding, we wanted to create an aesthetic that fits the tech space while still remaining bright and child friendly. We moved forward with color and typography.

Primary Palette

The primary palette will be used for the core color uses. Intentionally, the primary palette only contains four colors. This allows for uniformity within assets.

Using two shades of blue, the tech world is integrated into the brand. The bright blue allows us to highlight information in a fun yet professional manner. The navy blue adds contrast and brings a depth to the design.

Our black and gray color choices give dimension to the brand and bring a sophistication that would not be accomplished if using the standard black & white.

Frame 7 (1).png

Secondary Palette

The secondary palette will be used mostly within the gaming experience. With fun and energetic colors to choose from, children will be excited to jump into the design.

Our colors are inspired by code editors and the highlight colors used for different functions. With a bright and high saturation, these color choices will highlight UI elements while bringing a child friendly and modern feel.

Frame 8.png

Primary Typeface

Inspired by classic coding type, our primary typeface Plus Jakarta Sans is a modern Sans Serif that brings a clean and technical energy to the brand.

Group 35.png

Secondary Typeface

JetBrains Mono is an open-source typeface specifically made for developers. As our secondary typeface, JetBrains Mono will tie in the developer world and merge coding with the brand.

Group 36.png

Text Colors

Frame 7 (2).png

Prototype

Below is the final hi-fi prototype for the Sign-Up & Parent Hub. You are able to click through the prototype and immerse yourself in the experience. I was responsible for the design and creation of this parent portion of the project.

Thank you!

bottom of page