.png)
HINGE INTERACTIVE DISPLAY
DESIGN CHALLENGE
Through Kinect Azure and TouchDesigner, this project brings Hinge’s playful, human-centered identity into an interactive physical experience. The goal is to create a fun simulation that reflects the brand's personality and invites people to engage with hinge in a more immersive way.
WHAT IS HINGE?
The dating app designed to be deleted.
Hinge is a popular dating app designed to encourage real, meaningful connections rather than endless swiping. Its brand centers on being warm and playful.
01. Research
The first step in this project was researching Hinge brand identity. A lot of their advertisements are quirky and imaginative. And I also looked into their user interface to see how the swiping interaction is like within the app.
CONCEPT
The idea of the simulation is having different profiles stack on top of each other like a deck of cards, when you swipe left it reveals the next one, or swipe right if you like what you see, triggering an “It’s a match!” screen.
02. Building network
Before diving into design it is important to figure out the technical stuff in touch designer first, a large amount of time went into making the profile rotation work.
After a bunch of trial and error, I decided to write a script using AI assistance. It will split the animation file into chapters by assigning each one its own frame range. A trigger checks the current frame number and jumps to the next range, so each chapter plays independently. This keeps the sequences clean, modular, and easy to control. TouchDesigner simply moves from one frame block to the next whenever the logic says it’s time to advance.
03. Design
For the design, I created five clay characters to bring in the playfulness and human touch that Hinge’s branding values, each with their own distinct personality. I photographed their body parts individually using a stop-motion setup, then imported everything into After Effects, where I animated the pieces like puppets, keeping the stop-motion feel while saving a significant amount of time.
I also referenced Hinge’s brand guide, incorporating their color palette and typography throughout the visuals. I then composited everything in Aftereffects and did color correction.
I experimented with clay typography as well but it's a little too playful and childlike.
After Effects Frames
04. Interactivity with Kinect Azure
I then imported the two main animation files into touch designer. The first one is all the profiles and transitions, the other one is all the matches. One thing is to time everything accurately and be very meticulous with the visuals matching up from one section to the next, ensuring smooth transitions.
Profiles
Kinect Azure Interaction
I used another script to create the interaction. This script looks at the hand’s position and if the input value passes a certain point then it will trigger a movement. After each swipe, it briefly pauses so the system doesn’t trigger multiple times from the same motion.
Match
Final Network
05. Final
Thanks for stopping by!
Special thanks to Nathan Kipka and Abigail Atwell for providing design feedback and technical assistance for this project.
