Your Claw Machine

August 2020, New York

Spark AR, Social Media Filter

Personal Project

The project idea is about making an interactive claw machine experience that allows the users to control the claw by using their face movements instead of their hands. When they feel they get the right position, they can drop the claw by opening the mouth. And after the users succeed in catching the toys, they will be rewarded by dressing up the accessories that they caught.

Instagram Filter: https://www.instagram.com/ar/287178502598203/

My Contributions

Ideation

UI & UX Design

Coding Development

Tools

Blender 3D

Sketch & Photoshop

Spark AR

Storyboard

This is the storyboard that I draw to illustrate the process of the experience, this will help make an initial plan in your mind. As shown below, the experience can be simplified as moving your head to control the claw, open mouth to drop the claw, catch the target toy and drag it up.

User Flow

Based on the storyboard, here we design a more detailed user flow. The whole process can be broken down into four stages, and I listed the interactions and behaviors under each stage.

SparkAR Prototype & Development

The whole experience consists of four main stages, moving, catching, dragging and finishing. I wrote the structure in the script.js. It will pass the stage signal between the script and the patch editor.

After setting the main stages in the script, I started building the interactions in sparkAR patch editor according to the user flow. And I grouped the function by using different colors to category the function into corresponding stages.

Claw Moving Stage

Claw Catching Stage

Claw Dragging Stage