Ideation
We drew out storyboards to flesh out ideas that aim to enable meaningful conversations especially between those with generational gaps.
As we finished up our research, we all agreed on the one user group that stood out to us: grandparents. We all share similar experience about our grandparents having difficult times emotionally opening up. This was made especially harder due to language barriers, and we decided to engage in this specific space.
While researching on the different tea practices, we came upon a particularly fascinating traditional tea practice in the Pu’er region of China. The tray where the tea experience take place has slits to pour out the first round of brewed tea to flush away any impurities in the tea leaves.
We thought the Pu’er tea practices could start up interesting interactions and we sketched an initial idea of what will become our solution: An interactive tea tray that prompts interactions/conversations.
We solidified that initial tea tray idea by drawing out a final storyboard imagining a scenario where conversations happen and help close generational gaps.
System diagram
Our imagined tea tray is made of 4 unique components: The tray itself, the teacups, the teapot, and a digital device such as a smartphone that records and processes the experience externally.
User flow
Each occurrences are color-coded by the different touch points (components of the tea experience), and the flow is divided by before, during, and after conversations.
Journey map
Our journey map records the emotions, touch points, actions at the according moments during the tea experience.
Prototyping
Version 1.0
Using a laser cutter and arduino, we prototyped the tea tray. The arduino was used to program LED modules and demonstrate the screen of the interactive display. One problem here was that the screens were too small for our intent, especially to incorporate the potential interactions.
Version 2.0
We decided to use the whole panel where the teacups sit as displays, illuminated from under the wood panel and through. This opened up more opportunities for interactions involving the placements and movements of the teacups.
Adobe Illustrator
As mentioned, the interface is displayed on the teacup platforms and is interactive. They were designed in Adobe Illustrator and exported for Adobe After Effects. The main interactions involve responding to a question prompted by the tea tray, in the following forms:
- Yes/no
- Choose a side
- Scale of 1-5
- Free response
Adobe After Effects
The imported layers from Illustrator was animated in compositions on After Effects, which was then placed onto the main story video that we scripted and shot.
Mocha AE
We utilized a tracking tool within After Effects called “Mocha AE” to rotoscope (mask out) the hands moving in and out on top of the tea tray, and track the interfaces onto the tea tray.
