Project - Graduation Thesis - Micromatter
Research, Concept Design, Motion Graphics, UI, Web Design, Exhibition Design

Project mentors - Ellen Lupton, Jennifer Cole Phillips, Jason gottlieb

Brief - Engage in a year-long investigation into a guided, but self-directed research (thinking, making, reading, writing) thesis project. Represent an original voice for visual and verbal expression of design thinking.

overview

The project explores a graphic language inspired by human life to create a series of micro-interaction animations that transform ordinary interactions into desirable experiences.

We experience a variety of emotions when we interact with our devices—from frustration to delight to a sense of security. Micro-interactions are the little details that perform small tasks such as unlocking your phone or refreshing your notifications. These tiny moments of engagement have the capacity to elevate our experiences.

Process

VISUAL LANGUAGE DISCOVERY

We take pleasure in manipulating elements with tactile qualities. The more control we have, the more satisfying it feels. My first step was to explore a language with similar, satisfying tactile quality.

We live in the world of Siri. We talk to our devices and expect them to understand and respond. The slow transition from Graphical User Interface to Communicational User Interface has created more and more need for the interactions to feel human. There is a large space for exploration between tactile interactions and communication UI. Every type of language exists ranging from purely tactile, button interactions that get the job done to human-like voice commands that become a dialogue with our device. Within this space I wanted to create a functional language that would respond and act as if it was organic and alive. I started exploring the graphic language by creating a series of loaders. In my process I came across the term Anthropomorphism.

Exhibition- Projection

Interactive Display that was installed as part of the exhibition

'Micromatter' is a visual language designed for micro-interactions. Micromatter is a system of motion design that takes inspiration from the living world to create desirable experiences. This demonstration shows four different characteristics of micromatter.

Anticipation

Pull to refresh

The motion of micromatter creates moments of pleasurable expectation. The subtle yet powerful movement of the elements prepares the user for a rewarding reveal.

As the user pulls down the notifications list, room is made for a new entry to appear. With a fluid drip, it pours itself into the list and reveals new information.

Dialogue

Sign in

Micromatter works like body language. The elements respond to actions as if they were aware and sensitive to every input.

As you start typing, the button becomes alive in response. The change in color confirms that the system is ready to proceed.

Breath

upload

Micromatter has a subtle rhythmic movement. The tasks performed by the elements are not just seen but felt. The movement nudges the user through a sequence of actions.

While a file uploads, a soft circle gently quivers; it comes to rest when the upload is complete. The colored line surrounding the shape conveys energy and progress.

Release

Delete

The movement of micromatter follows a natural arc. It defines the relationship elements have with each other.

Pulling the notification from right to left reveals a button. The pulling movement builds a subtle tension among the elements. As the user clicks the button, tension is released and the notification exits the screen with a swift motion equivalent to a tiny sigh of pleasure.