Behind the Scenes of the PUMA x Roc Nation RS-XL “Mixtape”
The Mixtape Collection
In honor of the 50th anniversary of hip hop, Puma and Roc Nation released the second iteration of the MIXTAPE sneaker collection, titled “The Evolution of the Mixtape”. This collaboration was put together by Roc Nation’s Emory Jones and sneaker designer Alexander-John, both of whom have a long history of integrating culture into special releases for Puma. Alexander-John created 3 different colorways for this release to highlight the evolution of mixtapes from cassette mixes to burned CDs and MP3 playlists. Legitimate worked closely with Alexander-John, Roc Nation, and PUMA to bring the sneakers and the mixtapes to life with special digital content and experiences only available to those who bought the sneakers.
The Process
Legitimate’s journey with Puma started in the fall of 2022 when Alexander-John was working with Puma to create a roadmap for a potential sequel to the Mixtape sneaker he created back in 2018. Alexander-John wanted to bring back the feeling of receiving a cassette tape or CD and playing it in a Walkman or boombox. At the same time, Emory Jones was working with Roc Nation to figure out how to bring the vast network of talent and treasure trove of content from Roc Nation to Puma in a meaningful way. The answer was Legitimate and our platform that allows for exclusive digital experiences and content to be made available only for those with access to the physical products powered by Legitimate.
Working with Puma was not easy. We had to pass some very rigorous QA/QC testing that Puma puts all of their products through, including numerous wash and dry cycles for water or heat resistance, multiple journeys across the Pacific Ocean in a shipping container for durability, and wear tests to ensure comfort. Data privacy compliance and enterprise level SLAs with security and uptime guarantees were table stakes in greenlighting the integration of the Legitimate platform.
With all of the testing finished, we were able to move forward with manufacturing and programming of the LGT Tags. Each LGT Tag is individually programmed with a unique private key generated for each tag to securely authenticate each tag and sneaker. The tag is then put through a QA verification process to ensure that the tag hardware is working properly.
After the sneaker designs were finalized by Alexander-John and sent to the factory, we started the digital experience design and development process. We looked at all of the different digital design files of the shoes in the collection and started coming up with ideas. How cool would it be if we replicated how cassette tapes, CDs, and MP3 players work and brought them into 2023?
We used many of the same iconography, colors, design elements, and styles from the shoes and incorporated them into the digital experience while adding some extra flare.
We brought over the same cassette tape, CD, and MP3 players from the shoe boxes and added animations. We took the Mixtape Collection logo and made it front and center in the digital experience. We then added a more retro look to make the experience feel more 80s, 90s, and 2000s.
Unlocking the Digital Experience
Our user journey starts with a quick introduction and preview page, followed by a login page where the user is prompted to enter an email. After the user confirms their email address via a verification email, the sneaker is registered to the associated owner on-chain.
For this launch, we chose to leverage the Avalanche blockchain because of its confirmation speed, stability, and reliability. From our experience, processing transactions on Avalanche usually takes around 3 to 8 seconds, with most completing in less than 5. This speed is really important from a user experience perspective because our expected target audiences are not native web3 users. They expect our product to function like any other digital product they have used in the past and 3 to 5 seconds is usually how long it takes most websites to load. Our 3D loading animation was also designed from the ground up to augment this loading experience, making it feel like a seamless process from start to end.
This loading animation runs on WebGL and is designed to be lightweight from a JavaScript bundle size perspective while supporting most modern smartphones shipped in the last few years. We utilized the ogl library for rendering and built many fallbacks in our program and shaders for backwards compatibility with older phones and browsers. The animation features cubes with our logo and some post-processing effects for a cool 3D effect.
The Colorways
There are 3 publicly-released colorways in this collection: Cassette Tape, Disc, and Playlist. Each colorway represents a different style of music players, but all share the same content in terms of tracks, music videos, and more.
CASSETTE TAPE
From a technical implementation standpoint, the cassette tape is the simplest of the 3 music player styles. The same cassette tape graphic from the shoe box animates when the tracks are playing and stops when the tracks are paused.
We used a few layers of images to complete the tape image and animated them using CSS.
DISC
The disc style builds on top of the cassette player and adds an extra display where the track number and playing time is included.
The CD in the player slowly spins up and slows down to a stop when the music starts and stops.
For users on Android using the Chrome browser, the battery icon reflects the current charge level of the device battery and shows a charging indicator when the device is plugged in. This utilizes the Battery Status API but is unfortunately not available in Safari for iOS on Apple devices.
The disc player is also layered, with the CD as a separate image and animated using CSS for optimal performance.
PLAYLIST
The digital music player takes the track and battery information from the Disc and brings it to the next level. We added a progress indicator similar to what most MP3 players have.
On top of this, we created a real time audio analyzer that processes the soundwaves from the tracks in the browser and renders it in a visualizer while the music is playing. We utilized the Web Audio API to get the wave output and put that through a Fourier transform to get the levels at different frequencies. We then render it to a canvas to create the visualizer.
The player itself is also composed of different transparent layers for added effect. There is a transparent layer at the top to give the screen a pixelated feel and two layers below with the Puma logos and text for fading effects and animations. We also used a special nob with the Puma logo for the track position indicator.
LIGHT AND DARK MODES
All three colorways also have dark and light modes, enabled depending on the user’s system and browser settings.
OG COLORWAY
There is an additional colorway that is not publicly available. The OG Colorway re-release includes access to all 3 digital player styles including the cassette player, CD player, and MP3 player as well as a special indicator for this limited run. The color theme is a special blackout theme with a dark logo marquee and site exclusively in dark mode.
Exclusive Content
Legitimate’s platform allows exclusive access to digital content and experiences only accessible to those who have the physical products and can access the LGT Tags. This means that the content stays exclusive to the shoes and users must have the shoes to listen to the tracks and see the music videos.
Roc Nation also produced many music videos, behind the scene footage, and discussion content for these sneakers as well. These are only accessible to those with the sneakers as well.
For those who try to gain access from links sent by a friend, an error page pops up, prompting the user to tap the tag to access the content. A unique new link is generated each time the LGT Tag is tapped, and old links are invalidated to prevent sharing and copying. This is the power of Legitimate.
This site can also be accessed at https://mixtape.legitimate.tech
Ownership Information
We wanted to present ownership data in a way that pushes the boundaries of technology, yet remains understandable to the average consumer. We decided to phrase the ownership information around the concept of Puma and Roc Nation creating an exclusive mixtape for the owner of the sneaker.
When the user accesses the digital experience, their email shows up under the Mixtape logo. The user can tap the information icon next to the email to open a panel that shows a digital rendering of the shoe in their colorway.
We also display an anonymized list of previous owners in case the sneaker is sold or given away. In the future, we can also allow third party marketplaces to display their verification steps.
There is also an option to reset the ownership information and start unlocking the digital content again. We introduced this option in case the sneaker is traded, sold, returned, or given away and is no longer owned by the person who initially unlocked the digital experience. Since owners are notified of any new content released as well as any promotions and marketing information from Puma, we needed to provide a way for new owners to go through the entire process as if they bought the shoes new.
We designed and prototyped many different ways to transfer ownership and ultimately settled on an experience that provides the most seamless and secure interaction. If someone buys a pair that has already been unlocked, they can tap the tag and hit the reset. If someone is selling their sneakers, they can reset prior to sending the shoes away so that the new owner can start fresh as well.
Credits
This collaboration with Puma, Roc Nation, and Legitimate would not have been possible without the teams from every side involved in this drop.
Alexander-John, Emory Jones, and David Ballin for believing in us and trusting the process
Mikey Robbins for the digital designs and visual work
Griffin Di Stefano and Patrick Koitzsch from 6DEGREES for helping connect the dots
Chang Liu for the 3D WebGL loading animation
Calvin Chan, Daniel Duan, Kelley Nguyen, Luis Diego, and Zoe Leung for their work on the Legitimate platform that made all this tech possible
