Overview

This Interactive Catalogue will display images of multiple items of accessories and apparel. The user will be greeted with an animated screen featuring a series of instructions about how to interact with highlighted products.They will pick up physical products and press buttons on a table in front of a large screen.That will trigger a light sensor in the table revealing a catalogue-style layout of relatedproducts based on a selected store collection.

This Rotating Product Station is intended to keep customers engaged by using modern gesture technology. Users will see an animated screen featuring multiple photographs of a backpack/daypack, which will permit a 360° view of the product. Customer then gets a brief product instruction teaching them how to swipe their hand in the air over the controller, left or right to rotate the backpack revealing animated product content.

This Touchscreen Ordering Station will provide a familiar user experience to clients. Customer will be greeted with an exciting fashion-based motion graphic presentation of various clothing outfits that can be purchased in store. Users will interact with the station by using a large touchscreen. Once they touch the screen, customer is introduced to an outfit selector that can be swiped over various parts to create a personalized outfit.

Objective & Demo Video Of The Apps

This project is designed to draw the attention of customers by way of a large projector screen. While viewing the videos screens, the customer will see products “in action,” in the outdoors, giving them a real-life point of view of what the store/company is all about. Customers who are intrigued could view a branded promotional/ instructional video.

There will be a stand with three QR codes, beside the video screen, which can be scanned to view individual promotional videos. Each video will loop as it plays and after a set time will go back to the first promotional/ instructional video.

Apparel accessories and equipment can be organized by the customers and displayed in on-screen catalogue. Additionally, in many retail settings customers have grown accustomed to using self-checkout and touch screens to expedite the purchasing process.

The touch screens allowing users to quickly scroll through store merchandise, therefore increasing user activity and provide the customer more options and information to fostering informed decisions about products.

The project

This multi-part project uses several interactive technologies to deploy a well installed web application using google chrome as the browser/engine. The Interactive Catalogue Station makes use of an Arduino for light sensing. Rotating Product Station - Uses Leap Motion controller. Touchscreen Ordering Station - For ordering products being demonstrated. Motion Graphics Promotional Videos - Uses QR codeaccessible for looping videos.

Tools used
HTML and CSS (all apps) Vanilla JavaScript (all apps) jQuery (all apps) GSAP (all apps except rotating product app) Google Chrome will be the browser/engine

Assets required

Interactive Catalogue
A min. of 7 apparel images per screen. Collection title, legend with corresponding numbers. Highlight screen instructions, info-related text (product title and description) and graphics. Brand logo, error/timeout feedback.

Rotating Product
Min. 15 product images. Related background image(s). Brand logo. Error/timeout feedback. Swipe up & down instructions Min. 3 videos screens

Interactive Catalogue
6 outfit images set up as a complete ensemble. Clothing will be photographed on a model. Error/timeout feedback and a outfit Selector Screen.