HCDE 451 A10: Final Project — Stamp Plate 2.0

Michelle (Xin) Gao
6 min readDec 10, 2019

--

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

the Stamp Plate 2.0

Project Concept

We described Stamp Plate 1.o as 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 stamps”. The first version was designed to explore the role of playful technology plays in children’s early learning experiences. With the chance of getting stamps, we wondered whether or no the kids would eat more foods and more engaged during mealtime. With the 2.0 version, I added some changes based on what I observed from the field research that had been conducted on the first version. Seeing the kids showed unexpected creativity and artistic interest while playing and dragging the stamps, I wonder how about if I add more drawing related features and interactions and turn the plate into a complete drawing canvas after the kids finish all the food on their plate? To test 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 of playful technology plays in children’s early learning experience under an informal learning setting, which in this case, it is during the family mealtime. Adding new features and interactions, I want to know whether these changes will help to expand their artistic talents and imagination or distract kids' attention from eating, which is the biggest concern of using playful technology. So, I want to Initially, 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.

Implementation

All the interactions will be done on a tablet (iPad 6) and later hidden in a laser cutting box.

First part: The UI & UX Design

UI: Compared with the 1.0 version of 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. In addition, I applied the Patchwork effect from Illustrator’s Gallery Effect to simulate the grain texture from the real stamp.

Four different food stamps

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:

  1. Onboarding screen (the ‘Plate’): The first screen of the plate and it is also the screen that kids see when they are eating. This screen will later display all the food stamps that children have created during the eating process.
  2. 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.)
Sketch for the ‘Canvas’ screen
  • 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.

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

The Onboarding Screen (also the ‘Plate’); The Interactive Screen (also the ‘Canvas’); The Display Screen (also the ‘Gallary’)
Used a tool called Protopie to add interactions

Second Part: The Physical Enclosure

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

Laser-cut the box
Decorated the box with markers and acrylic paints
The assembled Stamp Plate!

Evaluation

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. 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.

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

Paper fruits used for usability testing

Analysis

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 the key interactions.

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.

I need to re-evaluate the usability and feasibility of the newly added toolbar because first, the display panel seemed redundant and meaningfulness. It supposed to digitally showing kids how many stamps they have collected, but since the stamps had already shown on the screen and users can directly count the stamps from the screen, there was no point having this “display panel”. And second, the design of the color panel was not intuitive because I only added interaction links to the colors bubble on the first rolls. I assumed people would start from the first row, so I only make the first roll interactive, which in fact, I was wrong. Participants would just randomly click on any bubbles and each participant has his/her own color preference. So next time, don’t be lazy Michelle!

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.

Here is the demo video:

--

--

Michelle (Xin) Gao

UX Research and Design | UW HCDE Alumna | Class of 2021 @ UW MHCI + D