Behind the scenes of Racked's 'Reign, Supreme' story

How do you talk about a streetwear brand that has a huge global reach but operates in the shadows? Racked, Vox Media’s shopping-focused site, took on the daunting task of explaining and analyzing one of the most important streetwear brands of the past 20 years, Supreme.

Writer Kyle Chayka was inspired by a Zen garden in Japan called Ryoan-Ji. Chayka describes it as:

Built in Kyoto in 1450, Ryoan-Ji contains 15 stones in a field of raked gravel. The stones are laid out such that it is impossible to view all 15 at once; understanding, the garden suggests, is a process that requires movement between vantage points.

Chayka wanted to bring that same methodology to this piece, as he realized that there was no linear path toward understanding a brand like Supreme, as its success comes from a multitude of different factors.

Racked approached the Storytelling Studio with Chayka’s inspiration in mind. Taking the idea of a Japanese Zen garden and applying it to online editorial was the kind of experiment and challenge the Studio likes to tackle.

Research & Concepts

Even if you aren’t a direct consumer of Supreme, you’ve probably seen their ubiquitous red-and-white logo on the streets of New York City, if not the internet. We wanted to stay as far away from this as possible. The logo – everything from the font and colors – are so recognizable, and we didn’t want this story to be an advertisement for the brand.

Tyson Whiting, one of the Studio’s designers, came up with two different mood boards that captured the essence of Supreme without being too heavy-handed. Supreme got its start from skateboarding culture and there was plenty to explore within its DIY approach to style. It was also important that the aesthetic read as grittier and sleeker than the rest of Racked’s brand.

Tyson presented two different design directions to the Racked edit team. The visual direction and mood boards also carried over into each proposed interactivity. We had to solve the problem of presenting the story in a non-linear way, while also maintaining one of our team’s cardinal rules: Mobile first.

Wheat-paste referenced posters placed on the street (usually in areas that say ‘Post No Bills’) and guerilla street art.

Tyson presented it as followed. As the user reads each section, you would be pulling back layers, much like tearing posters off of a wall:

Dirty [guerilla] advertising for a clean brand reflects where the design and the company [currently] is as well as where it came from. This type of advertising that they utilize adds a bit of mystery [...] There are layers to peel back to get to the goods.

VHS Skateboard Collection was the second option presented and the one the Racked editorial team and the Storytelling Studio unanimously agreed upon. It mimics a shelf of VHS tapes, with images sitting next to each other, each denoting a different section and allowing for a ‘choose-your-own-adventure’ experience. Clicking on each of these would bring slingshot the user to any section they wanted.

Deep connections with mid- 90’s early skateboard VHS tapes. The videos have an imperfection that contrasts the clean logo and apparel. As people purchase from the brand, they are purchasing a piece of Supreme’s story, past and present. They are literally and figuratively projecting the Supreme label onto themselves.

Sketching & Development

We went through many rounds of wireframing and sketching when thinking about and developing the navigation for this piece. We wanted to ensure the user could make a completely free choice of where they wanted to explore the story right off the bat. It was a focus of ours from the beginning and we thought the writing really spoke to it. However, we also didn’t want to alienate people who wanted to view the piece traditionally, by simply scrolling down and soaking in each section one at a time.

Photography

Working with photographer Greg Gentert was a dream. His style lent itself to the story, as it was gritty yet humorous. His portfolio stood out to us as he paid attention to composition and the ‘characters’ in his photos.  In a funny coincidence, he and the writer knew each other so it was easy for Gentert to get the feeling that Chayka was going for.

We set up three photographic shoots:

The Drop - The Drop was shot on the streets with the fans and collectors themselves who wait all night and all day in the hot sun to get a little piece of Supreme. We chatted with bouncers and those who were passing by.

The Studio - For the Studio, we looked at some of what Supreme sells overlaid with projections of zen gardens and skateboard videos. We were experimenting here, thinking about the various medias we used.

The Collector - For this one, the writer reached out to the Supreme community on Reddit. It was important for us to get up close and personal, to get inside the mind of an avid collector. The contrast of the writers’ love of streetwear combined with his home in the suburbs made for very interesting and at times, humorous photos.

We decided to make polaroids as well as digital images. The polaroids reflect a pared-down, retro-feel and provide a grit that reflects the brand’s inspirations. The digital images were made with various lenses, including a fisheye lens, often associated with skateboarding photography.

User Testing

Something to remember when creating a web-native story is to think of it as an experience. After all the mood-boarding and sketching, it’s easy to get caught up in very blue-sky ideas. However, users need to be able to interact with your story seamlessly, without hinderance, or else they will move onto another story.

We presented two different navigation options to six coworkers. Our team composed a script of guided questions and directions ahead of time and made sure to test on desktop and mobile. Our findings skewed heavily toward one direction but even in doing the tests, our team received broader feedback about how to tweak the winning design to be even more user-friendly.

Design

Racked’s editorial team made it clear they wanted this feature to have a distinct look and feel. Racked’s main demographic are affluent women ranging from ages 18-35 and the homepage features light pastels and asymmetrical design touches. To properly do justice to Supreme, we stripped all of these elements and used a minimal color palette of black and white, while keeping the Racked rose color (#D36C66) for links. We used Nimbus Sans Black from Typekit to mirror the Futura that Supreme uses in their branding, while ensuring the typefaces weren’t so similar that it looked like something Supreme would make themselves.

Tyson also composed a glitch gif of extra photos from our studio shoot that didn’t make it into the main feature. It was a simple way to use extra assets to make a compelling visual that tied into our design direction.

Tyson Whiting / Gregory Gentert

With the way online journalism is heading, we recognize that storytelling is no longer bound to one specific point of entry – i.e. the homepage. We know stories live on Snapchat, on Youtube and in email newsletters. We made sure to plan for and gather assets for all iterations. Tyson worked with our photographer to capture not only different types of photos but videos that would later be used for promotions, in GIFs, etc. Below is an asset that Brittany Brown, another designer on our team, created to act as the lead image in one of the emails Racked would send out as part of their extended social plan. Because we had such a clear visual direction at the beginning, it was easy to create something that fit in with the overall visual tone. Brittany played with Polaroid imagery and even created creases as if it was a photo stuffed at the bottom of a backpack.

Gregory Gentert / Brittany Holloway-Brown

This was our second collaboration as a newly formed team and the response has been amazing – both from the Racked editorial team, for staying true to their vision and from our readers. We’re excited to keep iterating and improving.