Reebok x Beyoncé VIP Mobile App
Project Summary
As a Sr Interaction Designer at frog I had the opportunity to work on the Reebok team. Reebok was talking with Beyoncé about a partnership. I was asked to lead the IA and UX for a Beyoncé super-fan mobile app. The idea was to leverage AR and VR technologies to make an immersive and environmental experience that went beyond the app itself. We were asked to produce a journey map, site map, user flows, and a complete set of annotated wireframes in four weeks.
Some features included:
virtual shopping experiences
a virtual concert experience
using AR to detect and buy Beyoncé's on-stage outfits
3D and AR modeling so users can "try on" clothes prior to purchase
an AR treasure hunt to complete at live shows
A separate app for Beyoncé to track her fans' location
Customer Journey Map
We started by whiteboarding ideas and concepts to lay out the customer journey map to better understand the environments and emotions users will experience. This process uncovered many opportunities to leverage emerging technologies to keep Beyoncé fans engaged while promoting the Reebok brand.
Early whiteboard sketch of the journey.
Rough draft of the journey.
Final version of the journey map.
Site Map
To make the site map, I used the journey map and identified environments to bucket the interactions into discrete modules, so any module could be removed without breaking the information architecture or app. This process was instrumental in demonstrating how an app can have a simple navigation system yet still be extensible for future integrations.
Rough draft of the site map.
Final site map.
User Flows
Once the rough site map was built, I mapped out user flows to both show where our user had to make decisions and to define the types of interactions I had to create to support them.
A user flow for an AR experience that lets fans buy Beyoncé's on-stage outfit.
A user flow for an AR app-only tour shop that lets users see a 3D model of themselves wearing the clothes before purchase.
A sample user flow once the wireframes were built.
Annotated Wireframes
With the basic user flows signed off, I designed wireframes. I started by drawing some on paper and testing some of the hero flows in Marvel's POP app to identify any usability issues. I built a template to use in Sketch and designed over 100 screens in just a few days. Then I recreated the flows and annotated each one.
The Shop on Site flow uses AR technology to augment the live shopping experience.
The Treasure Hunt flow gives concert attendees clues to find hidden AR treasures at the venue.
The Virtual Shop flow lets users find and use popup VR shopping experiences in their cities.
Handoff
We presented a package with the user journey, site map, user flows, and wireframes to the Reebok client to socialize with Beyoncé's team. The effort to realize this project is still underway.