Designing the first Usable Interface for a Wearable Device
MIT Media Lab · UI/UX Designer / Researcher · Feb 2022 – Aug 2022
Figure 1 & 2: Wearable prototype 3-peltier: three point thermal feedback configuration and embedded vibrotactile motors.
MY ROLE:
I designed the first usable control interface for Frisson, an experimental wearable developed at the MIT Media Lab, Fluid Interfaces, to elicit aesthetic chills—otherwise known as goosebumps or psychogenic shivers people sometimes feel in response to music, art, or emotional experiences.
PROBLEM:
The device itself was already functional, but it did not yet have an interface that researchers could realistically use. The engineering team had explored an early control concept, but it lacked the modularity and flexibility needed to shape the device’s behavior in meaningful ways.
SOLUTION:
I defined a new interaction model that allowed researchers to independently control timing, intensity, and node behavior, turning the wearable device into a usable research tool.
MY CONTRIBUTION:
My work became part of a published research paper accepted at the ACM International Conference on Multimodal Interaction (ICMI).
Making the Research Prototype Usable
Figure 3: Frisson wearable 3 & 5-peltier. Block diagram shows main components on the control PCB.
Frisson was built to stimulate sensations associated with aesthetic chills using thermal and vibrotactile feedback across the back.
When I joined the project, the device worked, but its controls did not. The engineers had created an early interface concept, but they already knew it was not usable for real experimentation. Because the goal was to allow researchers in psychology and behavioral science to use Frisson for their research, we needed an interface so the device could be operated by anyone - not just the Frisson engineers.
My role was to turn that functional prototype into an research device scientists could actually operate.
Designing for Modularity
The original control concept could not support the three variables researchers needed to shape the experience:
-
when each node activates
-
how intense each node is
-
how intensity changes over time within a node
Taking inspiration from video and music editing software, I designed an interaction model that allowed the three variables to be configured independently. This made the interface significantly more flexible and better matched to how the device actually behaved.
Before my design...
Modularity: 2D
Customizable Features:
-
which node is activated at which time slot ✓
-
cannot set the intensity of each node ❌
-
cannot alter intensity over time ❌
After my design
Modularity: 3D
Customizable features:
-
which node is activated at which time slot ✓
-
setting the intensity of each node ✓
-
altering intensity over time ✓
Mapping Interactions to Design
The hardest problem was devising a modality that could handle all three features independently: 1) activation time, 2) intensity levels between nodes, and 3) intensity levels within nodes.
I started by defining the modular relationships between timing, intensity, and within-node change. I found a strong interaction precedent in video and audio editing tools, where time of a clip is structured spatially on a track and volume can be adjusted independently on the line within that frame. That model gave me a way to represent Frisson’s complexity without making the interface harder to use.
This turned into the first edition of the user interface below, featuring the most important modal interaction.
When you hover over a spot (Track A in this case), the hover state lets you know that you can interact with it.
When you click, a rectangle appears. The rectangle represents the duration you want the node to be activated.
When you click on the line, a white button. You can drag it to change intensity levels within the node.
Iterating on Details
Using proto.io to keep in line with the lab's previous tools, I iterated on the details of the design.
Creating Lab's Design System
Using proto.io to keep in line with the lab's previous tools, I iterated on the details of the design and created the first design system.
Outcomes
Using proto.io to keep in line with the lab's previous tools, I transformed a functional engineering prototype into a usable research tool by introducing a modular control model for timing, intensity, and within-node behavior
-
Designed the first viable interface for operating the device beyond the engineering team
-
Contributed designs and research to a research paper published and accepted at the ACM ICMI 2022 Conference