RETAIL INSTALLATION

Retail store installation setup

Tools Used

Project Overview

The retail installation showcases total 4 stations – Interactive catalogue, Rotating product, Touchscreen ordering and Motion graphics promotional video. Each of these stations required to have a motion graphics screensaver which included the instructions on how to use the station itself.

Color Scheme

The Objective

The main objective was to create a retail installation setup design for an outdoor hiking company which they can install in their store to promote their brand. We need to come up with a branding and incorporate that into the designs for retail installation.

INTERACTIVE CATALOGUE

At this station, you will encounter an engaging animated screen that highlights our products and provides information about their collection and features. Through animated instructions, you will be guided to pick up the physical products and press the button on the table to interact with the station. As you pick up an object, the light sensor on the table will detect it and trigger content changes on the screen related to the selected store collection. You can then click on the button to learn more about the product you have picked up, adding another layer of interactivity to your experience. The station will feature multiple screens showcasing a collection of accessories, accompanied by descriptions and other graphic elements to enhance your engagement. Get ready for an immersive and interactive journey with our products at this station.

Rotating Product app

At this station, you will be greeted by an animated screen showcasing a product, such as a backpack, along with accompanying information. You will be guided by visual instructions on the screen on how to use gesture controls to reveal more information. Simply swipe your hand over the controller or sensor, as shown in the instructions, to access additional details about the product. There may be different swipes in various directions to unlock different information about the product, adding an interactive element to your experience. Get ready to explore the product features in a unique and engaging way using gesture controls at this station!

TOUCHSCREEN ORDERING

This station, commonly found in stores like McDonald’s, offers a touch-based interface for users. Visual instructions will guide users on how to interact with the station. Users can select from a variety of outfits and apparel, and even customize their own outfits. They can also read product information to learn more about the items. Once they have made their selection, they can add the desired apparel to their cart and print a receipt, which they can take to the cash register for purchase. This interactive shopping experience allows users to easily browse, customize, and purchase items, making their shopping experience more engaging and convenient than ever before.

MOTION GRAPHICS PROMOTIONAL VIDEO

At this station, you will be able to watch a promotional or instructional video that will play in a continuous loop. The video will highlight our brand by showcasing different product uses and situations. You can access multiple promotional videos by scanning the QR code on the stand next to the screen. In case of idle time, the video will automatically transition to a screen saver that provides instructions on how to use the station. Thank you for choosing our brand! Enjoy the video experience.

Playlist

3 Videos

THE PROCESS

Planning & Designing

After creating the branding, the installation was put together. I decided to name my brand Hither Outdoors. The word "Hither" suggests moving towards something, so Hither Outdoors conveys a sense of moving towards the outdoors. I believe that branding should have a deeper meaning that can be discussed, rather than just creating a logo for the sake of it. The logo is the primary graphic that people will remember and talk about. To maintain a clean and simple design for easy viewing, I opted to use circles with borders throughout the branding and emphasized other elements using the main color scheme.

Coding & Developing

The stations' primary frameworks were provided, and we had to modify the code to suit our design. A significant aspect of the coding involved in this project was implementing GSAP animations. In the interactive catalog station, we focused heavily on utilizing GSAP animations in JavaScript, ensuring that the timing and easing were correct. The rotating product station required numerous motion graphics-based videos and elements, and we made slight adjustments to the timing and easing in the code. The touchscreen ordering station primarily dealt with CSS styling, with a few styling and information changes implemented in JavaScript. Additionally, all stations required some basic HTML modifications.

Photography & Videography

Photography and videography played a significant role in this project, with all photos and videos being captured by our group. For the backpack photos, we collaborated to determine the ideal positioning and styling of the pack, resulting in exceptional shots. In the touchscreen ordering station, we photographed real models, a female and male, showcasing three different outfit choices each. These images were then presented in a way that allowed users to view different pieces until they were satisfied with their selection. In the motion graphics promotional section of the installation, videography was primarily utilized.

 

Deliverable

The main goal of this project was to construct all the stations using the given framework, which is protected by copyright. In order to include them in our portfolio, we must produce a video featuring an individual engaging with all the stations, highlighting the interactivity of the retail installation that was created.