01
Plywood + Aluminum Foil
Layered plywood formed a rigid circular frame, while aluminum foil created a broad contact surface above the sensor. The open construction made the material and assembly logic easy to inspect and revise.
Vicky Yan
Product Designer /
Human-AI Interaction
My practice moves fluidly between physical prototyping, digital product design, and human-centered research, using AI and emerging technologies to create more intuitive relationships between people, products, and space.01
Selected work / 2022–2025
01You / Me / We / ItTangible HCI installation2025
Our You / Me / We / It is sited within Café 059, a once-vital hub now silent. The installation aims to reactivate the space through inheriting their original subject matter, beverages as the input devise to translate into visualizations that reflects “social warmth”. The installation invites participants to be curious and follow their circle, seeing its encounters and comparing to its Neighbours. The visuals sends messages: when two drinks share a temperature, their circles align and blend into a unified hue, forming a connective geometry. This dynamic visualization serves as a metaphor for the social “temperature” and distance of the Daniels social fabric, using the tangible residue of interaction to create a live, data-driven portrait of the space's lost vitality, literally projecting energy back into the empty room.
0:00 / 0:00
Scope
Technology pervades our lives, but when does it intercept us on a real social level?
A Problem: Social hub shut down
In June 2025, Café 059 shut down. The café was an important part of the Daniels faculty's social fabric, sitting at the centre of the Daniels common area. Its presence once brought students, faculty, and staff into the same room, where university hierarchy met as equals. Its closure left a focal point without the engagement that made the space feel alive.
The installation uses tangible design to manifest a conversation between space and interpersonal social distance.
Reveal something that is felt but not seen.
Drawing on the café's defining element, beverages became the main character in our design. Each drink has a temperature; a coaster reads that temperature and translates it into a spatial experience that connects, curates, and communicates the individual's relationship to the environment and to others.
One drink creates an individual presence, while several drinks form a collective field.
Design Logic
From placing to feeling
IPlacing
A participant sets a drink on one of four custom coasters.
IISensing
A DHT22 sensor reads the beverage temperature and sends it through Arduino.
IIISeeing
TouchDesigner maps each stream to the scale, movement, and distortion of a circle.
IVFeeling
Circles meet, overlap, and separate, inviting people to notice one another.
You are a line, but which line?
Each circle breathes and distorts to the thermal rhythm of a participant's drink, directly translating temperature data into a fluid, visual form.
Hot and cold
Contrasting readings hold two distinct contours inside the same field, keeping difference visible without breaking the shared composition.
Together
Closely aligned inputs settle into a single surrounding envelope, translating similarity into visual proximity.
Both hot
Two warm readings generate nested, expanding bodies that move with related rhythms while remaining individually legible.
Different
Mixed temperatures produce offset rings, allowing difference and coexistence to appear at the same time.
Prototypes
Technical Application
Early prototypes linked four temperature inputs to light before the full projection system was built. Repeated tests stabilized the sensor readings, while custom coaster housings turned exposed electronics into a shared tabletop interface.
Arduino · DHT22 · TouchDesigner · Projection · Digital fabrication
0:00 / 0:00
Digital Iterations
0:00 / 0:00
0:00 / 0:00
0:00 / 0:00
0:00 / 0:00
Fabrication
The system moved from loose electronics into a physical tabletop assembly. Full-scale prototypes coordinated the sensor coasters, wiring, central controller, and tea display as one portable interaction.
Plywood + aluminum foil versus acrylic
Two coaster constructions tested how the sensor could meet the drink while keeping the electronics protected, repeatable, and visually quiet.
02
Acrylic
Laser-cut acrylic produced a thinner, repeatable housing around the sensor. The translucent layered body concealed the assembly more softly and gave the coaster a lighter presence beside the projection.
The interaction was designed from the room inward.
Concept sketches moved from abstract ideas of collective light toward a site-specific café ritual. Technical drawings then coordinated the table, sensor reach, cable paths, electronics enclosure, and circular layers of each coaster.
The hardware sits at the centre while four coasters keep the interaction distributed and social.
Four sensing points feed a single controller, creating one shared visual field from multiple individual inputs.
Layered circular components conceal the electronics while preserving access for testing and repair.
Each temperature sensor uses its own signal path while sharing power and ground, allowing simultaneous readings to drive the projection.
The visualization learned to breathe, gather, and respond.
Iterations moved from fixed paths to a fluid particle system. Each circle retained an individual rhythm while remaining responsive to the group, allowing similarity and distance to emerge through motion, scale, and colour.
A shared table became a stage for noticing each other.
The final installation invited people to place a drink, find their circle, and follow its encounters. An ordinary café ritual became a live, collective image—projecting energy back into an otherwise quiet room.
Technology became less of a screen to operate and more of a material for noticing one another.
Four drinks, one shared field.
The finished installation brings the sensing coasters, central electronics, and live projection together at Café 059. Individual temperatures remain visible while gathering into a collective image of the table.
02Embodied CognitionInteractive installation2025
The installation aims to visually represent the levels of community engagement through its existence as an communal design. People passing the selected space are invited to contribute their own “blob” to the bigger communal pool of “blobs”. This blob is an interactive moldable clay that could be fully customisable in shape and color depending on the participant’s interest. The act of Individuals stopping by to add upon the pre-existing collection reflects a greater social context of: an individual’s specific contributions to its community. Through time, the quantity of blobs accumulates like a coin jar, where the more blobs the richer community engagement is. When a low interest individual walks by, their ignorance intent will cause a disruption to the blobs, making them become ecstatic. This illustrates that even a lack of engagement has a powerful consequence, reminding us that our presence, whether careful or careless, always affects the whole.
0:00 / 0:00
Scope
How can a shared space register not only deliberate contribution, but the consequences of simply passing through?
- Relevance
- Making individual agency and collective engagement visible within one communal environment.
- System
- Camera tracking, hand gestures, body collision, p5.js, and full-scale projection.
- Interaction
- Shape, release, encounter, disturb, and accumulate.
Presence becomes a material the room can remember.
Each participant can leave an intentional form behind. Each passerby can unsettle what is already there. Together, those careful and careless encounters create a living measure of communal participation.
Design Logic
From presence to a shared field
01Arrive
A camera recognizes a participant entering the shared space.
02Mold
Hand movement shapes the blob while opening and closing gestures change its colour.
03Contribute
Holding the shape for five seconds releases it into the existing collection.
04Encounter
A passing body collides with the field, disturbing nearby blobs whether or not the person stops.
05Accumulate
Every contribution remains, making the richness of the field a record of communal engagement.
Process
The system learned to see, remember, and react.
Small studies isolated the visual body, hand controls, camera relationship, collision behaviour, and frame boundaries before the parts were joined inside the installation.
Giving the blob a pulse
The earliest digital study established a luminous body that could feel alive before it ever entered the communal field.
Teaching the system to read a hand
A first hand-tracking prototype tested whether a bodily gesture could become a direct way to shape and colour a digital form.
Placing bodies inside the field
Camera input became the bridge between physical movement and the projected community, allowing forms to respond to a person in real time.
Releasing an individual contribution
Holding a gesture long enough released a customized blob into the shared field, turning a brief action into a persistent trace.
Making non-participation consequential
The collision study gave passing bodies weight: moving through the space disturbs nearby blobs even when a visitor does not intentionally contribute.
Keeping the community in motion
Boundary and repulsion rules keep every contribution inside the projected world while allowing the collective arrangement to continually reorganize.
Final
The installation grew with every encounter.
Luminous forms accumulated across a full-scale projection. Intentional gestures remained visible as individual contributions, while bodies moving through the room kept the community in motion.
03Sketch-a-roomHuman-AI spatial interface2025
Sketch-a-room aims to visually represent the levels of community engagement through a dynamic, communal design. The project exists as a potential 3D world, where participants interact with a real-time, setup-less interior design visualization. People passing by the selected space are invited to contribute their own “block” to this collective digital space, where each blob is a customizable 3D block. Using a tangible user interface, users are invited to add, remove, or and move around these shapes depending on their preference, and create an reimagination of that interior space through AI image. This project allows for real-time prototyping and visualizations of interior design processes through a community collaborative format. This act of stopping to add a pre-designed block to the ever-growing collection reflects a greater social context: an individual’s specific contributions to their community. As more blocks are added, they begin to form the foundations of an actual, imagined space. This process empowers the community to collaboratively shape their environment. The installation becomes a living blueprint, fueled by collective imagination, immediate tangible interaction, and AI-driven design visualization.
0:00 / 0:00
Site Context
A room-sized interface invited people to sketch space together.
Daniels Lecture Hall DA170
- Input
- Hand movement and tangible block gestures
- Shared view
- A live projected 3D interior
- Translation
- AI turns the collective block arrangement into an imagined room
Design Logic
Gesture, projection, touch, and AI form one continuous feedback loop.
A participant can begin without instructions or equipment.
Interaction Storyboard
One gesture becomes a block. Many blocks become a room.
- 01
Approach the projection and enter the camera’s field.
- 02
Rotate a hand to explore the available block shapes.
- 03
Hold to confirm, then drop the chosen form into the scene.
- 04
Watch the collective interior respond in real time.
- 05
Translate the composition into an AI-imagined room.
- 06
Return to move linked furniture and continue the shared sketch.
Prototypes
The interaction was tuned through small studies before becoming a continuous spatial conversation.
Finding a block with the hand
An early study tested how a participant could call a shape into view without needing a controller or setup step.
Rotating the chosen form
Hand rotation became a direct way to inspect and orient a block before committing it to the room.
Holding to confirm
A short hold separates deliberate placement from incidental movement and makes the gesture legible to both person and system.
Dropping into the shared scene
The confirmed block enters the projected room with position and velocity shaped by the participant’s final gesture.
Moving furniture after placement
Touch interaction extends the gesture sequence, letting participants select and rearrange objects already inside the scene.
Connecting gesture and scene
The first extended interaction pass brought hand tracking, confirmation, placement, and projected feedback into one sequence.
Refining real-time control
Longer testing exposed where the interface needed clearer timing, steadier tracking, and more immediate visual response.
Building a room collectively
Multiple additions began to operate as a shared spatial sketch rather than isolated digital objects.
Translating the sketch through AI
The accumulated scene became structured input for an AI-generated interior, connecting tangible play to an imagined environment.
Final
A shared sketch became an imagined room.
The physical interface and generated interior hold two views of the same collective act.
04Block / SketchHuman-AI design tool2025
Block/sketch is a tactile exploration into the foundational processes of design. It proposes a bridge between the intuitive language of play and the expansive potential of digital imagination, using the human form as both a literal building block and a conceptual metaphor for community. Beginning with a collection of miniature, tiny “bodies” that can be joined, stacked, and merged by hand into a unique, composite shape. This act of physical assembly is a deliberate return to a primal, accessible form of creation. The resulting “sketch” is not drawn, but scanned into the 3d virtual space thought a self made 3D scanner, which provides the portal to endless possibilities sending through AI real time image generation, which is prompted to explore architectural possibilities inherent in the form. It is intentionally playful, designed to demystify the often-intimidating gateways of professional 3D modeling software. Here, design begins not with a blank screen and complex toolbars, but with the simple, satisfying click of connecting forms. The output is a series of speculative structures: buildings, pavilions, urban fragments that grow logically yet surprisingly from the initial, hand-held composition. The process creates a tangible loop: from body (the block) to collective body (the assembly) to digital body (the scan) to speculative body (the architecture).
0:00 / 0:00
Block
The body becomes a unit of play, connection, and collective form-making.
Small figures join through a simple vocabulary of pegs and openings, allowing each arrangement to emerge by hand.
Scanner
A self-made scanner carries the physical sketch into three-dimensional space.
A rotating platform and traveling distance sensor collect the form layer by layer, rebuilding the hand-held object as a continuous point cloud.
Interaction Logic
The project forms a continuous loop between hand, object, scan, gesture, and architectural image.
Physical assembly establishes the form; scanning and gestural control make it spatial; AI opens it toward speculative architecture.
AI Translation
The scanned body becomes a prompt for architectural imagination.
The same composite form can be moved by gesture, read as a digital mass, and translated into buildings, pavilions, and urban fragments.
Final Installation
A tangible loop makes professional spatial tools feel immediate, social, and playful.
Visitors move from building by hand to seeing their collective form inhabit an architectural world.
05BlockModular object system2025
A family of person-like modular blocks uses square joints, circular bindings, and asymmetrical legs to support both Cartesian stacking and freer angled connections—turning each individual unit into a growing physical community.
Research · Prototyping · Spatial thinking
Bonus study / 2025
Troitsky Bridge
Material efficiency through interlocking triangular force distribution.
I listen closely, reduce noise, and design from the human out.
Education
University of California, Berkeley
Master of Design, 2026–present
University of Toronto
BA in Architectural Studies
Minor in Mathematics
Class of 2026