Interactive Product Catalogue

Illustration, Interaction Design

Project: Interactive Product Catalogue
Year: 2009
Description: The goal of this project was to create concepts for presenting the product offerings of Europe’s largest retailer of consumer electronics on the interactive table Microsoft PixelSense. I was responsible for interaction design (ideation, wireframing) and illustration.
Deliverables: Interaction Design + Illustration

Illustrations
Image: scenario illustration (left), illustration of interactive table and vendor

Concept „Ties“


The key feature of this concepts are the ties. After selecting a category (e.g.Hi-Fi) the main categories fade into the background while the sub-categories appear in the foreground. Both are visually connected by a tie so that the user always knows where he is. After selecting a sub-category (e.g. MP3 Player) the products appear. Now the user can select products to compare by dragging them to the right side of the screen. To filter these products the user has to draw a circle around them. Now he can choose between price, storage, color and features. Products outside the filter range fade to the background. Products can be compared by dragging one above the other. 


Concept „Globe“

The key feature of this concept is the globe. It´s a turnable globe with different product categories represented as islands. On these islands the user can select a product type by dragging one of the balloons until it pops. Afterwards the globe fades into the background and the different products appear. Now the user can decide whether he wants to keep a product or dismiss it by dragging it to the right or left side of the display. 

Concept „Objects“

The key feature of this concept are the objects. These objects are physical items in the shape of one of the product categories and can be recognized by the table. After putting an object (e.g. HiFi) on the table the sub-categories (Boxes, MP3 etc.) appear around the item. Now the user can choose one of these sub-categories (e.g. MP3 Player) and select more and more properties (storage, color etc.) to refine his search.