The Poison Apple

Cooperating with NYC First, STEM Kit for Middle School Student

Packaging, UI/UX Design

Project Overview

Working with NYC First, the project is to design a STEM activity kit that engages middle school kids to learn about basic circuitry knowledge and try out coding with Micro:Bit. The design is thoughtfully packed in a box which would spread joy and provoke the young’s interest in STEM.

The ultimate goal is to make kids be more interested in STEM and consider it as future career. Therefore, the kit is design to bring about interesting interaction. Our team redefined STEM into STEAM: stimulate, teach, engage, aesthetics, magic. We want to make our users curious about science and be more creative and hope that they can learn while play, enjoy visual joys and get fluid “game experience“. The following would show the four-month effort in the design from brainstorming to user-testing with kids and to the showcase of the final outcome.

Ideation

  • Testing with the Original Design

    We played with NYC First’s original stem kid to get familiar with the project and learn from their way of giving instruction and game design. Together as a group, we listed pros and cons based on our experience and aimed at improving the experience with more visually-appealing and continuous design of gaming.

  • Storyline

    I was inspired by the creation of the Poison apple in the classic fairytale, Snow White and the Seven Dwarfs. The making of the poison apple would be the thread of the whole game. The experience is about navigating the castle and make the poison apple. The kids would light up LEDs in the process and learn about basic coding.

  • Research

    I researched into some paper maze design and lamp design for inspiration and decided to design a maze-like box for the kids to follow different activities step by step. The final result would be a fordable apple lantern.

  • Development

  • Logo

    Apple as key element

    Friendly yet a little “poisonous“

  • Symbols

    Symbols of electronic components

    Unified visual language

  • Graphic Design of Package

    Apple peal texture in bright color to appeal to kids

  • Box

    For the kids to follow step by step

    Numbered activities

Design

  • Activities

    Activities

    Each activity is paired with illustrations as instructions. There are also simple written instructions and trouble-shooting tips provided. The kids can folllow each step and finish the tasks.

  • APP

    APP

    An APP developed with figma helps give the instructions. Each page is numbered and devoted to a specific activity. The navigation is scrolling and clicking, easy and naturally for the kids to folllow up. Gifs are added to give more fun.

  • Apple Lantern

    Apple Lantern

    The kids would make their own apple lantern at the last step of the game. The basic lantern is provided. They can assemble and add on elements as well as design a lighting effect with coding. Choices are also provided in the instruction for them to choose.

  • Overall Package

    An “apple“ with a QR code “tag“

  • The First layer

    The First Layer

    5 perforated compartments

    To follow the number order

  • Poke in to play

    Poke in to play

    Poking into each small box

    Taking off thee card with components packed and stuck on the back

  • To the Second Layer

    To the Second Layer

    An opening at the bottom of the 5th box

    Introducing the light sensor on Micro:bot

  • The Second Layer

    The Second Layer

    Tools to make the apple lantern

  • Display

    Display of the whole game

    One big box packing everything

    The first layer teaching circuitry

    The second layer for coding and handicraft

Design

  • User-Testing

    User-Testing

    Near the end of the semester, I did a user-testing at Cornell Tech, NYC first STEM Center with 2 middle school kids. Based on my observation, I refined the APP with trouble-shooting pages and attached the component bags to the back of each card. For my next steps, I would consider the material of the box, the manufacture and packing, and create more lighting effect of the final lantern with Micro: bit.

  • Techpack

    Techpack

    A Techpack with detailed instructions is made. This is to provide information for real-life production if possible and I am still working on revising the product with the user-testing experience/