top of page
SereniTea

Serenitea observes the moments between people, and responds to enhance and reflect the culture of the space and people in the present. It is an ambient table display built to react and reflect the subtle behaviors of its guests. Our team sought opportunities to bring a layer of interaction to the table without disturbing the unique atmosphere of the existing space. It is a physical tea table embedded with responsive digital projections that change and trigger with the movement of teacups and sounds in the environment.

Collaborators - Helen Zhang and Joan Lee

Duration: 4 weeks

Skills: Figma, Fusion, Rhino, After Effects, Python, Laser Cutting, 3D Printing 

Research Question

How can interpersonal experiences in a tea shop setting spark introspection and social engagement?

How the system works

The ambient display at Dobra Tea reacts to the movement of tea and social interactions, creating visualizations that reflect and enhance the surrounding activity. By revealing and highlighting these micro-interactions, the system encourages guests to engage more deeply with each other and their environment.

Visual Language 

Inspired by the natural patterns of mosaic lily and brand culture of Dobra Tea, we designed several iterations of the responsive pattern with it in mind.

Visual Design System (1)_edited.jpg
Microinteractions 

The micro-interactions, such as animations responding to teacup movements and sounds, enhance guests' experiences by reflecting and amplifying their social interactions. These responsive visual elements create a dynamic and engaging atmosphere, deepening the connection between guests and the space.

Micro Interactions (1).jpg
burst.png

Introductory interaction features an animation that welcomes guests to Dobra Tea, offering insights into the tea's origin, culture, and ingredients as it is first served.

proximity.png

The proximity interaction triggers a flower blooming animation when two teacups are placed close together, symbolizing and enhancing the connection between the guests at the table.

sound.png

The sound interaction changes the table's pattern color in response to conversation, visually indicating active engagement among guests.

skim.png

The movement interaction creates a trailing pattern behind teacups, visually showcasing their movement and the dynamics of sharing and interaction at the table.

ripple.png

The pickup interaction directs the table's pattern to the point where a cup is picked up, signifying the guest's active engagement in drinking their tea.

sink.png

The resting interaction causes the pattern to move away from the point where a cup is placed, indicating prolonged inactivity and suggesting the person hasn't sipped their tea for a while.

Tech Breakdown

Serenitea merges computer vision and projection technology to create an interactive table experience. A webcam identifies and tracks teacups by color in real time, with Python handling data processing for functionality. Meanwhile, p5.js generates responsive visuals based on the positions of the cups. This solution is cost-effective and efficient, enhancing traditional engagement methods while promoting greater accessibility and sustainability.

Systems Diagram.jpg
Process

The process began with design research, followed by concept development and storyboarding to refine our ideas. This led to physical fabrication and visualization, ensuring the final product was both functional and aesthetically aligned with our vision.

Research 

The research combined cultural studies, patron and staff interviews, and personal experiences, leading to a responsive table that enhances tea-drinking, fosters social interactions, and narrates the tea's journey with reflectiveness, delight, and calmness.

Screenshot 2024-06-25 195328.png
Insights and Pivots 

We focused on enhancing the tea-drinking experience, facilitating ambient interactions, and briefly narrating the tea's story, considering Dobra’s culture, guests' preference for quiet, and the lengthy menu.

Screenshot 2024-06-25 194926.png
Physical fabrication and Visualization 

The physical fabrication and visualization process involved extensive ideation, multiple prototypes across various mediums, and thorough user testing to achieve the final design.

Micro Interactions (2).jpg
Future Consideration

For future iterations of the project, several key improvements are planned. Firstly, the concept video will be enhanced by incorporating on-site context from Dobra Tea, along with informational overlays to better aid viewer understanding. This will provide a more immersive and informative experience, allowing viewers to fully grasp the project's impact within its intended environment. Additionally, a permanent stand for the projector will be built to ensure the setup is robust and future-proof, especially for the senior showcase. This will provide stability and longevity for the installation. Lastly, we will continue iterating on the table design to better reflect Dobra Tea’s visual identity, ensuring that the aesthetic seamlessly integrates with the tea shop’s ambiance and branding. These enhancements aim to solidify the project's effectiveness and alignment with Dobra Tea’s cultural and visual ethos.

bottom of page