PROJECT INTERACTION DESIGN: MoMA

CLIENT MoMA NYC

ROLE  
UI
Interactive
Creative

INTRODUCTION

We were part of an exhibition at The MoMA called “Items: Is Fashion Modern?”  
The exhibition “explores the present, past - and sometimes the future - of 111 items of clothing that have had a strong impact on the world. Among them are pieces as transformative as the Levi’s 501s, the Breton shirt, and the Little Black Dress.”

It “invited select designers to respond to some of these items with pioneering materials, approaches, and techniques - extending this conversation into the near and distant futures, and connecting the history of these garments with their present recombination and use.”

Senior curator at The MoMA, Paola Antonelli, gave us the brief to:

“Re-imagine the Breton sweater for the digital age.”


FINDING INSPIRATION


With such an iconic item came a wealth of heritage and storytelling to explore.

The Breton stripe can be traced back to the late 1850’s from France. They were designed as part of the French Navy uniform, purportedly to visually help spot a sailor who might have fallen overboard easier.




French Navy training 1935 (Image from Colhays)
The number of stripes was important to the design. They Breton consists of 21 stripes; each standing for one of Napoleon's victories.

Chanel was later inspired to bring the trend into the fashion world in 1917 when she saw some Navy sailors working.

She styled her version as a relaxed look with trousers, having it photographed being worn by models, celebrities and artists like Brigitte Bardot and Picasso.

Gabrielle Chanel 1930, Brigitte Bardot & Picasso all in versions of the Breton

IDEATING


With a maritime history and product genesis so closely linked to water, we imagined the blue stripes sitting within their white negative space like flowing water.

Firstly we spoke about ripples and splashes in water. As we went away to do research we began exploring fluid mechanics more. Different flow types have a horizontal directional flow, similar to a horizontal stripe.

We researched these flows which are best visualised in the video below:


Flow Examples
We imagined fluid mechanics as a way of a user interacting with the stripes and disrupting them in a way which felt natural to the user. Imagine your hand passing through a river or stream, and the turbulence and ripples this creates as the water continues its flow.

We had clear directional concepts by this point, but the means to achieve this type of interaction design required specialist engineering. We managed to find an engineer, David Li, who came to help us out. With some videos, sketches and conversations, he had enough to be cracking on with. We employed him on a freelance basis for two weeks… he managed to pull together our first prototype in a day!

The flow in this initial prototype was slightly too rapid and turbulent, but a great start. We decided to tone it down a bit to make it feel more ethereal and less aggressive to the user in the final version. 


Initial non-touch prototype
I spent time during this concepting phase designing the interface for the touchscreen. As part of the exhibition, it needed to be clear and accessible to those with poor eyesight, so making sure contrast ratios were strong and typography clear was important. Maximising the hit area of buttons and of the interaction area of the garment were also important for allowing the most impactful piece. As a small team I was able to specify sizing during the later model shoot.

We played around with button placement and finalised it to be on the bottom right of the screen. This allowed the user to press the button without covering the screen with their arm. (The earlier version below shows it in the top right) It also made it more accedible to people in wheelchairs and children.

The screen was set at a given height by The MoMA. The interface would take a snapshot in time of the user's disruption of the stripes shown in the prototype below.


Screen UI Prototype
That snapshot would be their own individual version of the Breton, a true reflection of personalisation in our digital world. We had taken the Breton, a symbol of uniformity and flipped it on its head making it now a symbol of individuality. The stripes flowed like a river and a timed CTA encouraging the user to interact with the screen would appear if it was idle for more than a few minutes.

To illustrate how these items are unique and can all be made to order, I filmed and edited a simple “this is how your breton is made” video which played alongside the touchscreen.


Making your Breton 
We knitted samples of disrupted Bretons on our industrial knitting machines in Somerset House and created samples of the fluid mechanics, tweaking the level of “turbulence” with a tool David had created. We found the more dramatic the turbulence the greater the impact for the user.




Knitted sample and our knitting factory in Somerset House
We created a set of these Breton jumpers and quickly organised a photoshoot driving down to the south coast of England with the white cliffs as a background to produce imagery for the shoot. We cast a model and styled her in the relaxed qualities of the original Chanel remake of the Breton by Chanel.


Selecting our shoot imagery as a triptyc 
The imagery was used for marketing purposes and within the exhibition. We created three versions of the Breton with different levels of disruption to be displayed as a physical CTA (call-to-action) to encourage the user to play with it.

This was a very rapid project, which brought out the key skills of the small and talented team I was working with at Unmade. We had great fun creating the new Breton, and I believe that shows in the final product.