t.hub light patterns

Interaction design/pattern design

What is T-Hub?
This device is aimed to provide vocally addressed smart assistance that sits within your living room. The Voice assistant Maya was designed to help the users control an array of smart home devices (like smart bulbs, Locks, switches etc) with far-field voice recognition. Besides controlling smart device, Maya has 3 major roles

1. Dispensing information
Like weather reports, facts, along with a personality which enables a user to have a meaningful conversation with Maya.

2. Enabling vocally addressed service integration
Like booking a bus ticket, movie tickets, laundry services etc.

3. Entertainment
Maya is also capable of telling a quick joke when asked for, and playing music, etc.

Scope of work and team:
The requirement of the project was to design light patterns that communicate various states of the device from booting, setup to responses. A total of 12 states.
The team comprised a motion graphic designer and me as the project lead.

Challenges
This project came with a few limitation and challenges because of the mode and form-factor of the product. Few of them are listed below.

1. T-hub is not a circular device but a rounded rectangle.

2. An array of 12 LEDs that were placed on the top surface along the periphery were not equidistant. Connected with a light diffusion tube these LEDs’ hue and brightness are used to create the patterns and gradients.

3. The distribution and placement of LEDs made the light diffusion difficult to control, since the desired outcome was a continuous light pattern with no dark patches along the diffusion tube.

4. The device had low memory, so multiple actions/modes had to share similar light patterns.

5. While designing the patterns, we simulated the light animations that were denoted in Frames per second.  However, the development of the patterns were commanded by the duration of t lighting a specific LED in a particular sequence and in seconds of illumination with a specific hue and color. The results were not as we desired.  

6. The color output on the device and the designed colors were not identical in-spite of using hex code as a standard.

7. The Principles that were to be used for this device were also to be translated to a smaller device that had 8 LEDs that were to be designed later.

The name we chose for the vocally addressed assistant was Maya. Defined by google dictionary as “the supernatural power wielded by gods and demons”.

Making random light patterns seemed meaningless, so we decided to weave the entire visual story with the element of maya, the magic.   

The medium of expressing this, visually, was with light patterns. Much like a magician casting a spell, we simulated the light patterns to resemble abstract concepts like spells, potion, concoction and the result (the big reveal).

We then made a moodboard that let us identify the colours we would use for the light patterns and gradients. These colors were then assigned to a meaning.

A few example are mentioned below:

• Orange
  As a brand colors it stands for assurance and completion. This color was proactively used to depict the processes that usually took longer.

• Blue
  Blue is the color of the sky and sea. It is often associated with depth and stability.

• Purple
  It combines the calm stability of blue and the fierce energy of red.

Responce Visualisation

A few color patterns, gradients and their animations were inspired by real life examples. Here are a few inspirations that we used in the design:

• Bluetooth setup
  We converted the bluetooth logo into a logo resembling pattern.

• Morning alarm
  We inspired from Sun (Yellow) + wind (Blue) that would mean a pleasant day and symbolically we used the animation of a pinwheel in motion with yellow and blue fringes that depicted a happy mood. The animation of the lights was then done to simulate the speed of a pinwheel, spinning slowly at first and then speeding up as you blow into it, then slowing down as it comes to rest.

Music visualizer
We inspired from a dance floor with a shiny disco ball. As if the reflections fell on the ambient surrounding.

We created a complete video to demonstrate developers to create and map the patterns