Situation:

During the great resignation retail stores saw a year-over-year decrease in sales associates, which meant shoppers were less likely to find an actual person to help them decide which products to buy.

Further Beats research revealed 2 key learnings: 1) Some shoppers prefer a self-guided product experience vs. engaging an associate, 2) Shoppers were having trouble differentiating between Beats in-ear headphones.

Brief:

Create an in-store app that empowers shoppers to learn about and compare Beats products.

Objectives:

- Have easy comparison between products with different form factors and features

- Empower shoppers to self-guide their learning

- Drive in-store purchase

- Achieve a premium Apple aesthetic

Budget:

- Low six figures

Project scale/volume:

- Piloted at 1 US Apple Store, and would scale only if objectives were met

- The pilot was so successful the app has scaled to 300 Stores globally and has been translated to 35 languages

The idea was to create a product learning and comparison app that did two things really well: 1) Entice Apple Store shoppers to approach and engage, and 2) Employ a navigation system and UI that allowed for seamless comparison of products with different features and form factors – all while keeping to the clean and beautiful Apple aesthetic.

To entice shoppers to engage, we created an attract loop that featured CG product animations over a clean background so shoppers could notice the app and see their desired product from across the store.

The elegant navigation and UI structure allowed for two means of exploration. Swiping down along one product line delivers an entire product story from start to finish, and swiping sideways compares different product features. Shoppers could then self-guide through the entire product education journey.

Target audience: Apple Store shoppers - both iOS and Android users

Careful UI/UX exploration drove the vertical and horizontal navigation strategy, and design elements were clean and premium, but also differentiated Beats products from Apple products like AirPods and AirPods pro. A delicate dance between the two brands.

To make the experience fluid and silky, we created and rendered all CG products in real-time, delivering them in a Three.js wrapper. This gave us a means of seamless CG animated transitions from any location in the app to any other, and added to its lightness and performance.

Our way is to be nimble and accomplish more with less. The design and development was done by a surprisingly small team of senior-level designers and developers. It's amazing to see something created with such a small team being utilized at 300 Apple Stores globally and driving Beats' best Q1 sales in 5 years.

We couldn't be more excited about the impact of this work!

Results:

- Beats now has a premium digital shopping experience at Apple Stores globally where before they risked being outshined by neighboring Apple products

- Beats has reduced the burden on Apple store associates to drive purchase decisions

- Shoppers now have an engaging and very high-fidelity, self-guided learning option for Beats products - helping them decide what to purchase in-store

- What started as a 1 Apple Store pilot has expanded to 300 flagship stores globally and has been translated to 35 languages

- Expectations of the brief were met and exceeded

- Post launch - Beats saw its best Q1 sales results in 5 years