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
10 students
6 parents
2 informal groups
Research Objectives
To discover how parents monitor children’s gaming activities and what features they are looking for
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
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
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.
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.
Solution 1
Parent onboarding and preference settings
Solution 2
Student avatar creation and customization
Solution 3
Student progress screen and badge/banner display
Mid-Fi Usability Test
5 students
8 parents
Parent Research Objectives
To discover any pain points while creating an account and accessing dashboard
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
1
2
3
4
5
Create an account
Add student’s account
Enter parent dashboard
Click to see screen time
Click to see multiplayer
Parents were looking for a confirmation page after filling our their username and password but before moving on to create a student account
Parents wanted more clarity on adding multiple friends at once
Parents found the sidebar links hard to see
Parents were interested to learn more about each skill
Loves
Accessibilty
Multiple Paths
Wants
Level Details
Confirmation
Filter Content
Student Research Objectives
.png)
Learn how intuitive the progress screen was without using too many instructions on how to get from point A to point B
.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
.png)
1
2
3
Build/create avatar as shown in example
Follow the prompts until character is complete
Once complete, decide to start over
Students were confused by the checkmark not appearing under their chosen option
Some students felt that the tutorial section was unnecessary since they already understood this functionality
Student Usability Testing
Student Progress & Rewards
1
2
3
Visit the Badge Screen
Add the Diamond Badge to the top spot of your avatar
Return to the progress screen
Functionality of the badge tab felt unclear to some students
“Goals” felt unclear here to some users
Many students felt that the plus sign was too small
Loves
.png)
Progress
.png)
Options
Rewards
Wants
.png)
Navigation
.png)
Story
.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.
.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.
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.
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.
Text Colors
.png)