UX/UI · Client Project · April 2022

CodeAlgo Academy

Designing an investor-ready teacher dashboard MVP and a student portal for a gamified K–12 coding platform.

Role Scrum Master UX Designer Team 3 Designers Tools Figma · Research · Testing
CodeAlgo Academy teacher dashboard shown on a desktop monitor
Teacher Dashboard MVP

A gamified path into coding and algorithmic thinking.

CodeAlgo is a gamified coding platform whose goal is to become part of standardized school curricula and teach K–12 students the fundamentals of coding and algorithmic thinking.

The UX team was asked to create a minimum viable product for the CodeAlgo Academy teacher dashboard so the client could communicate the product vision to potential investors.

ClientCodeAlgo Academy
RoleUX Designer
DeliverablesTeacher Dashboard + Student Portal
MethodsResearch, IA, Wireframes, Testing, Prototype

UX Team

Hamed EmariKari CheungCayla Snooke

Build enough clarity to make the product investable and usable.

01

The challenge

Code Algo Academy at their conception phase needed an investor-ready teacher experience that could demonstrate classroom management, curriculum delivery, assignments, scheduling, and student progress without becoming overwhelming.

02

The goal

Understand what computer science teachers need in a dashboard, then create an MVP for both the teacher dashboard and the student portal that is simple enough to demonstrate and structured enough to grow.

Research. Define. Design. Test.

01Competitive Analysis
02User Research
03Affinity Mapping
04Persona + Flow
05Wireframes
06Testing + Prototype

Persona Creation

Teacher persona named Johnathan with goals, needs, behaviors, and pain points

Persona · Johnathan

“I like to listen to the students' excitement as they learn new information and create something that they can share with others.”

Problem statement

Johnathan needs an intuitive platform with engaging curriculum to teach coding and manage his class so that his students can learn effectively while he optimizes his time.

Monitor progressPlan efficientlyProtect student dataTransfer gradesGive feedback

User Flow

Planning teacher user flows.

Log in or sign up, create a class, assign student work, and review student progress from a connected dashboard flow.

User flow showing login, class creation, assignment, and progress review

Move quickly from rough ideas to a testable system.

01

Sketches

The team used a shared design system to guide rapid sketching: five minutes to draw, ten minutes to critique, and twenty minutes to iterate and finalize each page direction.

Hand-drawn early interface sketches
02

Wireframes

Working collaboratively in Figma, the team translated the sketches into grayscale dashboard screens in half a day and connected the primary classroom workflows.

Collection of grayscale teacher dashboard wireframes

Usability Testing

Test behavior before visual polish.

An interactive wireframe prototype was used to test functionality. Participants were asked to focus on whether the experience made sense rather than how the interface looked.

  • Make navigation and return paths unmistakable.
  • Keep progress and assignment status visible.
  • Reduce the number of steps needed to reach frequent actions.
  • Use familiar labels and patterns for classroom workflows.
  • Continue testing with teachers, students, and parents.
Figma prototype connection map used for usability testing

Two connected experiences. One learning ecosystem.

The final concept paired a classroom-management experience for teachers with a colorful, game-based learning environment for students.

Teacher Portal

One place to manage classes, curriculum, assignments, students, grades, and schedules.

The dashboard prioritizes at-a-glance information and repeatable teacher tasks, using a clear left navigation and modular cards.

High-fidelity teacher portal screens for CodeAlgo Academy

Designing at the intersection of technology and people.

hamedemari@gmail.com