JBL Speakers: Augmented Reality

The goal with this particular design was to give users a clutter free view of the JBL speaker 3D model, while allowing them to still browse through multiple colors options. Augmented reality (AR) is still a new enough experience for many people, so freeing up as much of the camera view as possible enhances the experience. This was accomplished by creating a few simple buttons pinned to the bottom of the device display. Tapping on the color swatch icon expanded a list of available colors, which when tapped would swap in a new texture map. If a customer wanted to purchase that particular color of the speaker, they could tap on purchase and be directed right to that product listing on Verizon's site.

The rest of the context...

Our team was tasked with creating a standalone AR app for some upcoming Verizon holiday promotions. The turnaround time was a couple weeks, so we needed something simple to develop yet intuitive enough to drive engagement. I worked with the developers to provide the UX requirements and UI design, in-app tutorials, app icons, and drafted the final marketing copy used for the app store listings. (App Store; Play Store)

Below (1): A photo of one of the ads that ran in the paper on the first Sunday. The drone and speaker products (top right of each page) were enabled for AR with our app. You should be able to trigger the experience by using this digital photo by aiming at one half of the page or another (though it was intended for the print ad).

Below (2): A screenshot of the Google Play app listing

I leveraged Zeplin to expedite the implementation of my Sketch-designed UI.  After Effects was used to created the onboarding animation (shortened sample shown below).

Below (1): A portion of the user flow map created in Sketch.

Below (2): Onboarding AR animation (Web variation).

Given the tight timeframe, some limitations were faced when implementing some of the motion design, but I used tools like Principle to create sample motion interactions. App and Play store screenshots were created in Sketch.

Below (1): Sample motion design of expanding color swatch menu, created with Principle for Mac.

Below (2): Screenshots of the app used in App Store and Play Store