CodeAlgo Academy


CodeAlgo Academy


CodeAlgo is a gamified coding platform, and its goal is to be implemented in the standardized school curricula and teach students k-12 basics of coding and algorithm thinking.

UX Team

Hamed Emari - UX Designer

Kari Cheung - UX Designer

Cayla Snooke - UX Designer


UX Designer

CodeAlgo Academy

Initial Problem

Our UX team was tasked with creating an MVP of the CodeAlgo Academy's Teacher Dashboard in order for our clients to attract potential investors. Moreover, they wanted us to redesign their demo for the Students portal.


Our goal was to understand what computer science teachers exactly need in the Teacher's Dashboard, and create an MVP of both the Teacher's Dashboard and the Student Portal.


1. Competitive Analysis

2. User Research

3. Affinity Mapping

Competitive and Comparative Analysis

After understanding our app of course comes the analysis of our competition. To do so, we came up with a chart that compares the features of our app and features within our direct (e.g. Paired) and indirect (e.g. Calm) competitors.

competitive analysis

User Research

We interviewed a few Evergreen users and others who had not used the app but frequently listened to podcasts on self-growth and relationships.

Here are some examples of the questions we asked them:

Affinity Mapping

As a result of our research, we made an Affinity Map and after 40 minutes of collaboration we came up with the following "I Statements".

Affinity Mapping


1. Persona

2. Problem Statement

3. User Flow



User Flow

Tyler needs a way to access relatable and reputable relationship podcasts through the Evergreen app so that in addition to engaging in activities and games, Tyler can continue to support his goal of growing his relationship with his partner.



1. Sketch

2. Wireframe

3. Usability Testing

4. Prototype


Design System

We used the Design System to come up with our sketches and ideate the layout of the app. Meaning we only spent 5 minutes sketching a rough draft of a page, then we would critique our sketches as a team for 10 minutes. Finally, we would iterate and finalize our sketches for a page for 20 minutes



As per our team agreement, we have been working on everything together, and Wireframes were no different. With teamwork, we turned our sketches into grayscale using Figma in half a day.


Usability Testing

Using our wireframes we made an interactive prototype, to test the functionality of our design. We explained to our users that we are not looking for feedback on the looks of the prototype but rather its functionality.



  • Users were able to find the podcast episode given in the task.
  • Users found it confusing returning back to the home page, they felt lost and came across a page they weren’t before.
  • Users missed the experience of knowing the episode number they were listening to like other podcast apps.
  • Users found it confusing to use back twice to reach bottom navigation, wished for an easier way to reach.
  •  Users took a while to find favorite episodes but eventually found them.


We iterated on our insights and built our prototype using Figma. Each person was in charge of 2 pages while working on the elements on each page together.

Teacher Portal
Student Portal

Next Steps

  • Conduct more user interviews
    • Students
    • Teachers
    • Parents
  • Build out students' and parents' side of the website
  • Usability testing with more teachers
  • Further build out functionality and wireframes
  • Once the final curriculum is made, implementing that onto the website
  • Designing for a more specific program and age range