Adidas Originals

Roles:

  • UI Design
  • UX Design
  • Web Development
  • Creative Realities
  • Roundhouse

Goals

Adidas and Footaction planned to open a small network of Adidas originals brand stores and wanted a digital interactive piece to feature near the store’s clothing customization station.

The central goal was to create a digital look book for customers to find Adidas curated styles, seasonal lines, and to be able to build and customize their own looks.

Two complementary experiences were created. An 80" display featuring life-sized interactive models, and a streamlined version for iPad, featuring sock customization options.

Designing for 80" displays

UI flow for Adidas display

Larger touch screen monitors require a bit more understanding about how human interaction works than a smaller touchscreen device such as a phone or tablet. For one, as the screen is 80" wide diagonally, the device width itself would be roughly comparable to the width of an average person. Larger monitors rely on a series of light based sensors to detect touch and gesture movement. This comes with a variety of complications. For one, the light sensors aren’t as accurate as a capacitive touchscreen monitor. The result of which means that gestural movements, such as swipes, function, but not as reliable as a core interaction component. Likewise, a user would be more uncomfortable using points of interaction away from their dominant hand, or elements too vertically distant from their shoulder level.

To compensate. Elements the main navigation and contextual filter buttons were placed slightly below the center of the monitor, and each point of interaction was given large touch points so they didn’t require specificity.

Development

The display units were powered by the Chrome browser which allowed for a more specialized form of development. For one, since all kiosk clients were established to run Chrome, and all iPads would run Safari, this allowed for more specialized customization than what one would be able to accomplish for a regular website. For one, video files and the media elements API were utilized in a webkit centric matter to manipulate video, create touch interaction, and transition between different views of the application. The app also utilized cache manifest, generated by the server via PHP, to reduce bandwidth usage in the event of an update or maintenance.

The back end system comprised of a series of MySQL tables which contained product data and product groupings, and php created to render output to clients.