Tools Used for this project
The goal of this project was to create an outdoor brand and apply it across various platforms, including social media videos, apparel, and an interactive retail display. This page showcases the development of EXPANSE Outdoors, which included a brand book, custom icons for gear and clothing, T-shirt designs, social media content, and an interactive retail setup.
The retail installation was designed to give customers an engaging and memorable experience with the brand. It featured three main stations: an Interactive Catalogue, a 360º Rotating Product Display, and a Touchscreen Ordering Station. Each station also included a motion graphic screensaver and was supported by three promotional videos created using motion graphics.
We implemented our design, photography, and layout within a pre-coded wireframe using HTML, CSS, and JavaScript.
Interactive Retail Installation
Visualization of how the Interactive Retail Installation may appear in an EXPANSE outlet
Interactive Catalogue
This is the Interactive Catalogue station, where users can explore three different product collections from EXPANSE Outdoors. Each collection is represented by a physical item placed on a platform—like a water bottle, for example. When a user picks up an item, it triggers the screen to display the related product collection.
At first, each screen shows a motion graphic with instructions. Once the item is lifted, the screen switches to its collection. Users can press a nearby button to see more details about a highlighted product. Once finished, placing the item back on the sensor returns the screen to the starting view.
360º Rotating Product Station
This is the Rotating Product Station, designed to create a more immersive experience than the previous one. A sensor detects the user's hand and lets them rotate a virtual backpack with a simple swiping motion, allowing them to view it from four main angles.
The 360º effect was created by photographing the backpack from 24 angles, removing the backgrounds in Photoshop, and using JavaScript to cycle through the images based on user input.
Like the other station, the screen starts with a motion graphic showing the title and instructions. As the user swipes, the backpack rotates in the chosen direction, and more product information appears on screen.
All the images in sequence used to create that "360º" effect
Touch Screen Ordering Station
This is the Touchscreen Ordering Station, where users can view and mix-and-match three different outfits for both men and women. They can see the outfits from the front and back, and change clothing items by swiping on the models or using clearly labelled buttons.
To make this possible, two models were photographed in three outfits each, from both angles. The images were then edited in Photoshop and divided into four sections: headgear, upper body, legs, and feet—allowing users to customize outfits piece by piece.
A motion graphic plays when users approach the station, showing the title and instructions. As users browse, clothing descriptions update automatically. Once they’ve created an outfit they like, they can tap the "Order Outfit" button, which leads to a checkout screen that prints a receipt and explains how to complete the purchase.
Apparel
Iconography for EXPANSE apparel and gear