Digital screens that display product images, events, and other promotional content

This project was live at apple.com

This project is was live at apple.com (courtesy of Wayback machine)

Ambition
How might we embody the spirit of the product beyond digital marketing and into the retail environment?

Interactive Team
Lisa Gee, Cory Crowther, Edric Alunan, Jessica Gray, Loulou Maurice, Mario Gonzalez

The 2018 MacBook Air was Apple’s thinnest, lightest notebook. The new release prided itself in its brilliant Retina display, addition of touch ID, latest-generation keyboard, and the Force Touch trackpad. In addition, it iscreated from 100 percent recycled aluminum, making it the greenest Mac ever.

As part of the Apple MarCom Interactive team, we were tasked to work with the UX and Art Direction team to design and prototype the UI for the MacBook Air launch site for its release on Apple dot com.

When any movement is sensed by the motion sensor or web cam, the letters disperse, revealing the letters “A I R” in the center. The other letters move along with the users, acting like air particles pushed by the wind.

The main star of the project, a responsive site for apple.com, also drew inspiration from my motion studies. From the Hero animation, to the dynamic scroll responses, we carefully choreographed ever interaction on the final web page.

Understanding the physical context of the store and inspired by the interactive installations explored in the precursors and analogues above, I began prototyping my own interactive motion studies using a combination of Processing, motion sensors, and a webcam, in hopes to visually convey the motion and emotion of “Air”.

While the team and I began ideating directions for the new MacBook Air product launch site, I fell into a rabbit hole exploring new and creatives ways outside of web design we could apply interactive marketing to for the launch of the new MacBook Air. This ultimately led to the question of how might MacBook Air live in the retail environment?

Overtime, the Apple Store has evolved from a space for transaction to a center for creative experiences, communities to gather, and architectural wonders. The next generation of Apple Stores sets the perfect stage for opportunities to redefine retail experiences, specifically how the revealing of a new product can transform physical spaces and the way a customer navigates and interacts within it.

I started this investigation by building an understanding of the physical environment of the Apple Store, and  researched precursors and analogs to identify opportunity areas for new interactive touch points throughout the customer’s retail experience.

Narrowing down to one direction, I worked closely with a developer to refine the prototype and achieve the desired visual response and interaction behavior. The refined design is a wall of letters that responds to movement.

While the initial intent of the internship was to support the design of the web assets, I am grateful for the innovative spirit of the MarCom Interactive team that encouraged me to pursue this exploration while providing me with the resources to improve and refine my vision, and a platform to share this vision with leadership.

Half way through the exploration, our team received updated visual assets from the Art Direction team. The new visual assets centered around colorful fabric motifs used to convey the lightness of the product and vibrancy of the screen display. Taking into account this new motif, I explored ways to convey the materiality of fabric using the same concept developed in the previous prototypes.

Apple Store storefront window display

Highlighting the Touch ID feature

Highlighting the Retina display feature

The prototype was proposed as an innovative opportunity to extend the product launch from screen and into the retail environment.

The proposed design would create an unexpected in-store experience where users interact with the screens to literally reveal the new MacBook air.

Drawing inspiration from the vibrant and colorful fabric motif, early iterations explored color and dynamic scrolling animations.

While there was not enough time during the internship to develop a high fidelity prototype of the envisioned interaction, I mocked up how the fabric motif could be brought to life via in-store interactive displays.

The final design leverages the sensing of the user’s motion to move the fabric around, revealing the word AIR in the background.  

The same concept can be applied via projection on window displays to create a grand and elegant imagery of flowing fabric as people pass by the storefront.

The proposed design can also be used as interactive screen savers for the MacBook Air itself. Offering new passive and active ways for customers  to interact with the products in store.

Other applications include storefront installations that might include the product hardware acting as the sensor for the screen projection in the background.

We also explored ways for the letters to form words and shapes that introduces the unique features that come with the new MacBook Air.

Prior to designing my own prototyped, I researched precursors and analogues that explored the digital-driven interactions with in physical space. From installations to data visualization, I was inspired by the create ways these artists were able to tell a story, convey an emotion, and capture the invisible through their work.  

Experimenting with floating particles to create a sense of lightness and movement

Experimenting with rotational and three-dimensional movement to elicit a feeling of traveling through space

Experimenting with light and shadow to create a sense of reveal and materialization

Experimenting with layers and opacity to create a sense of depth

Experimenting with negative space and simple, graphic lettering

Juxtaposing a rigid grid of letters with organic movements to simulate a gust of wind

Latest prototype prior my departure from the team

Early Prototypes

A giant digital display that sits in the center of the store, acting as  the hearth of the store where customers gather for events, tech support, or just to sit around

Rows of table displaying the physical products for customers to browse and use.

Floor to ceilng glass panels that look into the store.  

Winds of Boston
by Refik Anadol

Narration of a story through a spatial experience tat explores the interaction between physical objects and projected imageries

Algorithmically driven installation, that react to their surroundings and the people within their environment.

Immersive installation that visualizes live data of CO2 through kinetic movements and ambient sounds.

Site-specific installation that turns the invisible patterns of wind in and around Boston into a series of data paintings