Download Link App Store
Team: Transparent House
The renowned outdoor product company reached out to us last year to develop an augmented reality experience for the Outdoor Retailer Snow Show 2019.
It won the “BEST IN SHOW” award during the exhibition.
Press: Augmented Reality Comes to Retail
From photography to computer renderings, to Augmented Reality: A New Frontier of Product Retail
Five years ago, it was reported that more than 75% of the product images on Ikea’s website are computer renderings, not photography. Computer renderings nowadays, if done well, can achieve the photo-realistic result that’s non-distinguishable from photos. Online retail industry found this method to be more time-saving and cost-effective compared to photography. Now, augmented reality will be helping not only the retailers but also the consumers in making their shopping experience more convenient.
2 Problem Statement
Although nowadays the product description of e-commerce has been very detailed and thorough, buyers are having a hard time translating it correctly. For example, you don’t really perceive the size of a backpack by just looking at the dimensions like 34 in x 13 in x 14 in with several images. For outdoor products like tents, sleeping bags, and backpacks, having a real sense of the scale is very important, and almost impossible through product description online. Hence people usually will want to go to the retail store to try out the products. However, the downside of on-site retail shopping - limited time to spend in retail stores, the difficulty of in-store setup, store availability - also turns off the potential buyers. Augmented Reality is a way to help alleviate these problems, bridging the gap between online and in-store retail experience.
As most smartphones nowadays are capable of delivering AR experience, people have rushed to develop all kinds of AR apps including shopping. However, these apps commonly have low-quality imagery that inhibits the user moving forward. We want to give the user a clear experience with intuitive interfaces with the highest level of visual fidelity.
3.1 MVP & User Flow
For the Outdoor Retailer show, the goal is to make the app simple, easy to learn and navigate in a busy exhibition environment with lots of background noises.
We’ve distilled the core functions into three: Home (navigation between non-AR and AR environment), Add (placing the item in AR), and Manage (managing existing items). They will expand into full menus when being called.
User Flow & Simple Wireframe on the three core functions
3.2 UI Design
The most important element of the design is the AR menu for selecting and placing the items. There’re three layers: categories, item lists, and product pages. As shown below, there’s a gradual change in the visual from monotone wireframe to full-color renderings, and finally in AR.
AR Menu Design
AR Menu Grid
3.3 Tutorial System
To help the user getting familiar with AR’s new visual language and navigation methods, we did a lot of iterations on the button and tutorial design.
The button “Try out in your place!” represents the core function of placing the item in the environment. Apple recommends using their own ARKit Glyph from iOS. However, when showing static, it doesn’t give people the impression that it’s a three-dimensional object: The lines of all six faces have equal lineweight, also the closest point overlaps with the furthest point. Our solution is to add a subtle plane beneath the cube and have the cube animated, moving up and down.
We’ve also created a series of step-by-step tutorials across the entire experience with simple motion graphics.
Select an item / Scan a horizontal surface / Move the item / Rotate the item
Tutorials will show up in bright yellow color with the background darkens. If the user taps anywhere on the screen the tutorials will disappear.
3.4 Other Visual Design
Early Stage Promotion Graphics