get in touch →

get in touch →

Science Studio

Science Studio

What if kids could not only play with the coolest science toys, but also code them into existence?

What if kids could not only play with the coolest science toys, but also code them into existence?

Role

Lead Product Designer & Development Manager

Company

Hatch Coding

Time

Fall 2024, 7 months

Tech

Figma, Clickup, Javascript

ux / ui

ux / ui

ux / ui

user research

user research

user research

educational design

educational design

Science Studio by Hatch Coding was an educational gaming platform that transformed physical science toys into interactive digital experiences. As Lead Product Designer, the challenge was creating mini-games that taught kids science concepts, coding fundamentals, and remained genuinely fun to play.

Science Studio by Hatch Coding was an educational gaming platform that transformed physical science toys into interactive digital experiences. As Lead Product Designer, the challenge was creating mini-games that taught kids science concepts, coding fundamentals, and remained genuinely fun to play.

How do you balance three learning objectives without compromising any of them? Kids need to understand complex physics, learn programming logic, and stay engaged throughout. Most educational games choose one focus. Science Studio chose all three.

How do you balance three learning objectives without compromising any of them? Kids need to understand complex physics, learn programming logic, and stay engaged throughout. Most educational games choose one focus. Science Studio chose all three.

// Science Studio: Case Study
function setup() {
  createCanvas(800, 600);
  
  // Project variables
  let scienceToys = 30+;
  let gameConcepts = 90+;
  let designedGames = 200+;
  let completedGames = 100+;
  let learningObjectives = ["science", "coding", "fun"];
  
  // Design process
  brandFoundation();
  analyzePhysics(scienceToys);
  rapidPrototype(gameConcepts);
  leadTeam("university + highschool devs");
  
  // Results
  for(let i = 0; i < completedGames; i++) {
    createMiniGame(learningObjectives);
    if(userRating > 4.5) success++;
  }
  
  // Key insight: simplicity enables complexity
  return "educational games that don't compromise";
}

function draw() {
  // Continuously iterate and improve
  balance(science, coding, fun);
  scale(designSystem);
  empower(kids);
}

Challenges

  1. Making abstract science concepts tangible in digital space

  1. Making abstract

    science concepts

    tangible in digital

    space

  1. Making abstract science concepts tangible in

    digital space

  1. Teaching code to kids without it feeling like homework

  1. Teaching code to

    kids without it feeling

    like homework

  1. Teaching code to kids without it feeling like

    homework

  1. Managing a development team with varying skill levels, ensuring quality

  1. Managing a

    development team

    with varying skill levels

    while ensuring quality

  1. Managing a development team with varying

    skill levels, ensuring quality

  1. Creating consistency across 200+ mini-games, 30+ different concepts

  1. Creating

    consistency across

    200+ mini-games,

    and 30+ different

    concepts

  1. Creating consistency across 200+ mini-games,

    30+ different concepts

Process

Brand Foundation

Brand Foundation

Created a visual identity balancing scientific credibility with playful energy. The colour palette energized young learners while maintaining educational seriousness. Typography and iconography established clear hierarchy across all games.

Created a visual identity balancing scientific credibility with playful energy. The colour palette energized young learners while maintaining educational seriousness. Typography and iconography established clear hierarchy across all games.

Science Toy Analysis

Science Toy Analysis

Deconstructed 30 different science toys to identify core learning principles. Each toy generated six mini-games: three focused on science education, three on entertainment with embedded learning, all with coding integration.

Deconstructed 30 different science toys to identify core learning principles. Each toy generated six mini-games: three focused on science education, three on entertainment with embedded learning, all with coding integration.

Rapid Prototyping

Rapid Prototyping

Built 200+ detailed mockups in Figma, exploring how kids could interact with physics concepts through visual programming. Each mockup answered: "How does this science principle become a game mechanic?"

Built 200+ detailed mockups in Figma, exploring how kids could interact with physics concepts through visual programming. Each mockup answered: "How does this science principle become a game mechanic?"

Development Leadership

Development Leadership

Led student developers through iterative design and testing cycles. Created comprehensive handoff documentation and maintained consistent quality standards through regular feedback sessions.

Led student developers through iterative design and testing cycles. Created comprehensive handoff documentation and maintained consistent quality standards through regular feedback sessions.

Ideation

(Heads up! - games may not function properly on phones or tablets)

(Heads up! - games may not function properly on phones or tablets)

(Notice style inconsistencies from different developers in early stages of project)

(Notice style inconsistencies from different developers in early stages of project)

Solutions

Science as Game Mechanic
Instead of gamifying science, science became the actual game mechanic. Understanding trajectory physics made rockets fly further. Grasping momentum concepts helped beat highscores.

Science as Game Mechanic
Instead of gamifying science, science became the actual game mechanic. Understanding trajectory physics made rockets fly further. Grasping momentum concepts helped beat highscores.

Scalable Design System
Modular UI components maintained consistency while allowing each game unique personality. Design patterns adapted across different science concepts without losing cohesion.

Scalable Design System
Modular UI components maintained consistency while allowing each game unique personality. Design patterns adapted across different science concepts without losing cohesion.

Game Mode Integration
Kids could modify game behaviour by choosing between different game modes. Change speed, gravity, time, and various different variables.

Game Mode Integration
Kids could modify game behaviour by choosing between different game modes. Change speed, gravity, time, and various different variables.

Consistent Communication
Especially when working remotely, clear and consistent communication with all team members is of utmost importance. Bi-weekly meetings, clear SOP creation and walkthroughs with developers became the norm.

Consistent Communication
Especially when working remotely, clear and consistent communication with all team members is of utmost importance. Bi-weekly meetings, clear SOP creation and walkthroughs with developers became the norm.

Key Takeaways

Simplicity Enables Complexity
The most successful games had simple core mechanics that enabled complex exploration. Kids built sophisticated understanding through basic interactions.

Simplicity Enables Complexity
The most successful games had simple core mechanics that enabled complex exploration. Kids built sophisticated understanding through basic interactions.

Immediate Feedback Drives Learning
Every action needed visible, meaningful response. Rich visual feedback helped kids understand cause and effect better than traditional right/wrong systems.

Immediate Feedback Drives Learning
Every action needed visible, meaningful response. Rich visual feedback helped kids understand cause and effect better than traditional right/wrong systems.

Balance Through Integration
Success came from weaving science, coding, and fun together rather than treating them as separate objectives. Each reinforced the others.

Balance Through Integration
Success came from weaving science, coding, and fun together rather than treating them as separate objectives. Each reinforced the others.

Clear Communication Scales Quality
Detailed mockups and documentation paired with consistent communication and iteration enabled quality execution across a diverse development team.

Clear Communication Scales Quality
Detailed mockups and documentation paired with consistent communication and iteration enabled quality execution across a diverse development team.

Science Studio proved educational games don't need to compromise between serious learning and genuine engagement. By treating kids as capable thinkers who deserve sophisticated experiences, the platform created tools that were both educational and empowering.

Science Studio proved educational games don't need to compromise between serious learning and genuine engagement. By treating kids as capable thinkers who deserve sophisticated experiences, the platform created tools that were both educational and empowering.