Stamp Plate 2.0

“Make Mealtime Fun and Meaningful” — The Stamp Plate Project
 

Project Type

Passion Project

Duration

Two weeks

My Role

User Research

UX & UI Design

Interaction Design

Digital & Physical Prototype

Wizard of Oz testing

Key Deliverables

Concept Development Visual Design

Interaction Flows

Working Prototype

Tools

Adobe Illustrator

Protopie

Laser Cutter 

Background 

In one of my previous research projects Stamp Plate 1.0, we designed an interactive plate that “playfully tracks and visualizes the food placed on top of it and later eaten off of it in the form of the stamp”. The 1.0 version was designed to explore the role playful technology plays in children’s early learning experiences. Using the Stamp Plate 1.0 as a technology probe, we conducted a field study with 14 families and 19 children in their homes. With the chance of getting stamps, we wondered whether or no the kids would eat more food and became more engaged during mealtime. We found that children ate more and became more engaged during and after mealtime. And at the same time, parents guided their children to explore ideas of data concepts and teach early numeracy skills while using the plate. If you are interested, please check this paper: 

1.0 ☞ 2.0 

Seeing the kids showed unexpected creativity and artistic interest while playing and dragging the stamps, I wonder how about adding more drawing-related features and interactions and turn the plate into a more functional drawing canvas? So, with the 2.0 version, I added a couple more new features and made some changes based on the curiosity that I have left from the previous version. To test out this idea, I initiated the Stamp Plate 2.0 project.

  Design Goal 

The design goal hasn’t changed, which is to continue exploring the role playful technology plays in children’s early learning experience under an informal learning setting, which in this case, it is after the family mealtime. Adding new features and interactions, I want to know whether these changes will help to expand kids' artistic interest and imagination or distract their attention from eating, which is the biggest concern of using this playful technology. So first, I plan to

  • Evaluate kids’ and parents’ desirability to use this playful technology during mealtime.
  • Evaluate the usability of the plate itself.
  • Evaluate the feasibility of the newly added features and interactions.
stamp-plate-thumbnail_-1

Interface & Interaction Design

WechatIMG47

[Fig 1] Sketch for the interface design 

Stamp Plate 2.0 has two main components, a tablet container, and a utensils container. The tablet will be sealed tightly within the container, serving its function as a dinner plate. And the utensils container keeps the utensils clean and in place when kids want to play with the stamps created after eating. 

Asset 16
Asset 20
Asset 3
Asset 18
Asset 14
Asset 17
Asset 21
Asset 16
Asset 18

The UI & UX Design

UI: Compared with the 1.0 version of the food stamps design,  which is simple and abstract, I added more detail to the fruit stamps for the 2.0. The purpose of making the stamps more real because I want to see whether or not having a fixed shape will limit kids’ imaginations. 

*Trick: I applied the Patchwork effect from Illustrator’s Gallery Effect to simulate the grain texture of a real stamp.

Asset 3
Asset 4
Asset 5
Asset 21
Asset 5

UX: There are two key interactions for this plate: 1. Displaying the stamps while kids are eating, and 2. kids later can play with stamps. To achieve these two goals, I designed three different screens:

*Interactions were designed via Protopie and the prototype would be displayed on a tablet (iPad 6). The tablet is, of course, hidden in a laser-cut cardboard box. 

Screen Shot 2019-12-09 at 3.08.54 PM

[Fig 2] I used Protopie to design interactions

Onboarding

[Fig 3a] The Interactive Screen (the ‘Plate’)

Onboarding screen (the ‘Plate’): The first screen of the plate. It is also the screen that kids see when they eat and where they place the food. This screen will later display all the food stamps that children have created during the eating process. 

Interaction dissection: Placing the fruits on the plate → Picking up the fruits → Stamps appear at the same place where the fruits are picked up → Switching to the 'Canvas' after eating → Organizing the stamps by using the organizing button

 

interactive

[Fig 3b] The Interactive Screen (the ‘Canvas’)

Interactive screen (the ‘Canvas’): This is an interactive screen that allows kids to rearrange, drag, orient, and zoom in/out the food stamps. The toolbar provides two functions: 1. the Stamps panel for displaying the number and the type of the collected stamps and 2. the Color panel provides color components such as square and oval for kids to play with it. (*the colors on the panel match with the food stamps.)


Screen Shot 2020-02-07 at 5.43.34 PM

[Fig 3c] The Display Screen (the ‘Gallery’)

Display screen (the ‘Gallery’): This screen displays the pictures that children created by using the food stamps and the shape components.

Implementation: The Physical Enclosure 

Screen Shot 2020-02-08 at 11.42.31 PM

[Fig 4] I laser-cut a card box to hide the tablet and painted the dots with acrylic and markers. Since it is made for kids, I want the enclosure to also look fun :)

 

IMG_7747

[Fig 5] I painted the physical enclosure with acrylic paint. 

IMG_7795

[Fig 6a] Assembled Stamp Plate 2.0

IMG_7753

[Fig 6b] Assembled Stamp Plate 2.0

WoZ Testing & Analysis

Initially, I planned to evaluate this prototype with a family that has kids from 2 — 6. However, the reality is cruel and I wasn’t able to find the kids from that range. All my friends' siblings are older than the expected age range. Unfortunately, I wasn’t able to get feedback from kids, but at least I got some feedback from the adults by letting them play with this prototype. Referring back to the primary goals, I wanted to evaluate, in this case, adults’ desirability to use the plate, the usability of the plate itself, and the feasibility of the newly added features and interactions.

Based on the feedback, I realized there are definitely some improvements that are required to make for this prototype because most participants showed confusion when they performed key interactions.

IMG_7929 2

[Fig 7] I printed out the stamps and using them to represent the actual food that would be placed on the screen.

What needed improvements:

  • Most participants paused and confused about what they can do with the stamps on the interaction screen. The ‘‘drag’’ interaction was easy to discover, but the ‘‘orient” and “zoom in/out” were so not obvious that I needed to inform them.
  • Most participants didn’t know the purpose of the display panel on the toolbar. They also thought that it was interactive, but in fact, it wasn’t.
  • The design of the color panel on the toolbar made them confused because only the three color bubbles on the first roll were responsive.

What worked well:

  • Most of the participants thought the color theme was cute and fun, and they could immediately tell that this prototype was designed for kids.
  • Most of the participants like the idea of using the enclosure to hide the tablet.
  • Participants were impressed when the stamps appeared on the screen after the paper food was taken off of the screen.

Conclusion 

It is nice to continue on the project that I have done before and it was such a pleasant experience to do something that I truly love it. When I laser-cut the perfect box for the tablet, I was reminded of the time when I made the enclosure for the 1.0 stamp plate, which was such a painful experience. At that time, I bought the boxes from the store and used a knife to disassemble and rearrange the box to the size we wanted. The enclosure made by hand-cut was rough and cannot be compared with the box that was cut by a laser-cutter. I see the benefits of learning different prototyping techniques.

* Initially, if based on the sketch, the toolbar provides a paintbrush feature by having the color panel matched with the stamps. However, due to the technology limitation, I wasn’t able to prototype this interaction without coding. So I gave up on this feature and replaced it with adding shape components.