MJ All Day was Bleacher Report's first immersive web experience, built to celebrate Michael Jordan's birthday. It won a Gold Clio award in 2015 for Digital Innovation. The Media Lab is charged with experimenting, trying new ways to entertain and inform B/R users. MJ All Day was unlike anything Bleacher Report had done in the past and marked a new era of experimentation and new media exploration for the brand. I was responsible for the art direction and design of the project, a long with some of the development and video editing. This project required patience to see it through over the course of over 6 months of development.
2015 Gold Clio Sports Award Winner for Digital & Social Innovation
Being the first of its kind experiment for Bleacher Report, the development of this website presented a myriad of unique challenges. Built to be controlled on scroll, there were a number of content interactions that we had to streamline throughout the process. Over the course of a 6 month long build out, we encountered a myriad of challenges both from a design, programming, and interaction perspective. Building a highly interactive website like this took many layers of complex interactions and rich media all working in concert. This process involved heavy storyboarding phases followed by asset collection and rights negotiation. Once we had that settled, we moved into a wireframe process to build out the skeleton of the web experience. I helped build out a narrative structure through which we could interact with various defining moments from Jordan's career covering both his play on the court and the scope of his influence off of it.
In early 2014 one of the major initiatives as a part of the Media Lab was our desire to create an immersive experience around the career of Michael Jordan. One of the things that was evident at the time was that a huge chunk of our audience was familiar with aspects of MJ's contributions to the larger NBA ecosystem such as his shoes and some of his most famous highlights, but we really wanted to do a project that was an all encompassing look at his impact from the shoes on the court to the brands that he did sponsorships for to the rivalries that he had throughout his career to the international influence he had. MJ is considered the greatest player of all time by many accounts, and we wanted to make sure we were creating a tribute that was fitting for such a figure.
One that would capture what made Michael Jordan the commercial and sporting success that he was in the way that he transcended both the game and fame in a way that few others have and took the entire world by storm, bringing with him the entire sport and league on his back. MJ All Day was a project Bleacher Report wanted to launch as a tribute around the new year as one of it's first big projects for the first quarter and as something it could built its entire year of sales and content momentum around. This meant that the runway for the project would have to be a significant time period leading up to the launch as we wanted to make sure everything would go off without a hitch. This project truly is a labor of love that took shape over the course of many months.
Planning around the tentpole calendar event of All Star Weekend and the fact that Jordan's birthday falls within the same time frame, we were able to decide a rough launch date which gave us a runway of about 6 months to work with as we planned what we would need to do to accomplish building out an interactive website of this nature. We built a small but capable team consisting of Will Leivenberg working as our project manager, myself as lead designer and art director in charge of building out the experience, and our programming help Gregory Wild Smith who would be helping us implement the microsite on the backend.
The idea was to build an immersive experience that fans could get lost in. Especially with something like Michael Jordan content which fans were familiar with but never had a place to access all of these moments in such high end storytelling. Especially our younger core demo who didn't grow up with him often know of Michael Jordan from a smattering of semi-HD youtube highlights and their elders talking about him in the barbershop.
I was given the gargantuan task of building out what this experience would look like, but in order to do that, we really had to do a super deep dive in terms of research and finding tons of great high resolution photography for us to work with. I spent weeks combing through all of the photo and video content spanning MJ's career, everywhere from youtube, vimeo, newspaper websites to presswire sites like AP, USA Today, Getty, Imagn, and more. Research was an integral part of this project as it really was a time capsule encapsulating everything from Jordan's career on the court and his impact off it.
Once I had done the asset collection and parsed through the tons and tons of content out there from historical archives around MJ's impact not just on the court in the NBA, Team USA, or North Carolina but also his broader impact on pop culture, commercials, and even the civil rights movement. I had to put on my user experience hat as I devised a model by which we could convey different segments of MJ's career in a visual medium.
The idea would be to take the iconic imagery from the Air Jordan 1 campaign to the moments on the court like "The Shot" or "The Layup" or around great moments in the playoffs, finals or even the Dunk Contest and treat it like an art gallery where you could non-chronologically move through Jordan's career and explore different elements of his game and background like his athleticism, or his cultural impact.
One of the things that has always informed any project that I set out on is a data driven approach, and from all of our previous content experiments featuring Michael Jordan as a centerpiece, whether it was around his iconic sneakers, or another mythical tall tale of his competitive obsession and drive on the court the content had always done numbers for us. It was a surefire bet because he was the GOAT, and a tribute to him would be something that would appeal to a large amount of NBA fans.
On average, our coverage of Air Jordan sneakers on our BR Kicks vertical would often see upwards of 40-50% more engagement on posts compared to other sneaker brands and this was something we used to inform this content undertaking, making sure to include sneaker culture as an integral part of the story we set out to tell. Jordan was a figure that interested both our hardcore fanbase as well as the casual sports fan because he had attained that rare crossover status that made him larger than life.
Using sneakers as an entry point, I built out these larger buckets that would explore MJ's life on and outside of the court through distinct worlds that encompassed many of the things that made him such a legendary figure. Working in conjunction with Will to organize our progress, and consistently passing off completed wireframes and layouts to Gregory to work on coding out the html built on a Skrollr.JS platform in tandem I found a way to illustrate these distinct periods as a way to guide users through Jordan's career evolution.
Each section would act as a digital bookmark, as you progressed between the different chapters. I like to think of the website itself as a virtual museum where you walk from room to room and each section is it's own distinct exhibit within the same theme with it's own personality. If one section focused on his clutch exploits then another on his above the rim acts in defiance of gravity. It was meant to be a visual journey through his career both on and off the court.
As seen in the sizzle above, the story would begin with his arrival into the NBA and onto the sneaker scene, directly then delving into his dunk contest fame and taking flight as "His Airness", only to be followed up by a section on his commercial prowess as the face of McDonalds, Gatorade, Coca-Cola, or Nike, followed by a portion focusing on his rivals in the NBA and how he would take names both on offense and on the defensive side of the ball, then highlighting his cold blooded clutch ability at the end of games to be a closer, culminating in a look at his game 6 game winner against the Jazz to close out his career rounding up all of his six championships and career accolades before looking to his off the court cultural impact and ending with a clean and subtle black and white tribute to his quiet grace on the court.
The backstory behind the Air Jordan 1 silhouette, then known as the Nike Air Ship sneakers was that the NBA actually had sent a letter to Nike and the Chicago Bulls in 1985 after Michael Jordan violated league rules by wearing a black and red "Banned" colorway of the shoes in an NBA game which violated the league's official dress code policy. As the infamous legend goes, the fine for each game was an additional $5,000 fee which Nike decided to pay for MJ as he broke the rules.
This story caught fire amongst the advertising world and became infamous as a common street legend as well. Not only did this catapult the shoes into pop culture infamy, the sales skyrocketed and Michael Jordan's play on the court earned him a spot on just about every television set in America. By rooting the experience in this story, I was able to hook in our audience with an initial compelling piece of content and aim to achieve an increased time on site metric.
By anchoring the microsite in a story that we had seen success with covering on BR Kicks allowed us to really create sticky content that would hook in our user base and allow them to explore the experience at their own pace. Although we were building a vertical infinite scrolling experience that would act as a sort of visual timeline through Jordan's career, I also wanted users to be able to deep dive into subjects, and the videos like the "History of Flight" animation that Will and I worked on with Ryan Fuller garnered over 3.5 million cross platform views and nearly half a million on Youtube alone.
This type of informative content was something that a small segment of the audience that wanted to delve deeper into the sneaker subject matter could do so, but other users who simply wanted to scroll through and visually experience the site could also skip ahead at their own pace if they wanted to as well. As a part of the BR Kicks team I would go on to do many similar executions and I credit this initial experiment on this Media Lab project as the inspiration for them all.
By taking an informative approach the youtube video was also able to act as a standalone extension of the project on a platform like youtube where it could be evergreen and drive passive audience to the experience over time as people searched for content related to the history of Air Jordan's and this video would pop up in their recommended feeds or search results. The analytics on the youtube video show how it consistently pulls in search engine based viewers and drives audience to the experience despite it being years past us promoting it on our social channels. Not only would this become a pilot project for BR Kicks as it's own vertical in exploring this type of animated sneaker content, it would also serve as a great way to open up the MJ All Day interactive experience.
Since the subject of sneaker culture and Michael's impact on it was of such impactful status, it was worth exploring what would have happened if he had signed with a brand like Adidas or Converse, and being able to focus deeply into one segment of this story in such a way was a unique thing that Bleacher Report could offer as a differentiating factor. We were able to use this project as an example when we would go to market for sponsored content as it began to show a clear picture of how Bleacher Report could use multimedia content and leverage it with clean and compelling editorial storytelling in a unique way. This is the goal that the lab had set out to do for B/R's content and making it a destination for readers and people on the internet.
One of the most impressive things that Nike did with Brand Jordan was to build a cult of personality around Michael and use characters like Spike Lee's fanatic Mars Blackmon to drive consumer interest. The idea behind MJ All Day was in many ways inspired by the iconic print ad produced by Wieden and Kennedy for Nike during their Air Jordan 5 campaign collaboration featuring Mar's bedroom with tons of ads and shoes scattered all around the room covering every square inch of space in the room with basketball influence. MJ All Day was meant to be a digital time capsule that would allow you to explore all of these old ads and classic pieces of MJ content.
In recreating this superfan experience on a digital level, from an art direction standpoint it meant I had to take all of these disparate assets from different time periods in MJ's career of varying degrees of quality, and stitch them all together to form one cohesive storytelling experience. From the initial wireframing stages, I always kept an eye towards the overall flow of information and giving users opportunities for serendipitous discoveries but also constantly giving them fresh visuals that they hadn't seen before. Knowing that we would have trouble working with actual footage rights, we knew that the majority of our content would be image and animation based.
Take Flight. Those two words and a few ad campaigns later, Nike had completely shifted the meaning of "Air" to something entirely new, and this sentiment was what we wanted to capitalize in on as I built out the "Catching Air" section of the site that focused on the grace with which MJ was able to traverse through the air on the court as he went up for his iconic slam dunks. Without his superhuman ability to move in seemingly slow motion as he was in the air like some sort of interpretive dance form was what moved the sneakers from store shelves as kids tried to emulate Mike.
For a generation of kids who grew up during the 90's and late 80's watching Jordan effortlessly glide through the air he was nothing more than superhuman. Not only did the dunk contest act as a platform for the NBA, it was a giant ad, every time that clip was shown on TV or broadcast as a commercial it made MJ even more of a household name. The dunks sold the shoes and they amplified the game.
The overall sneaker space influence of Michael Jordan and the ubiquitousness of those Air Jordan and Nike ads really acted as a foot in the door as an entry point from a storytelling perspective to pivot to the other collaborations and partnerships that he has had throughout his career. But being able to give users an entry point through the sneaker commercials that they grew up seeing on TV or in magazines really did allow us to move the experience forward but also tie in a potential vehicle for sponsor integration that later came to fruition as well.
Showcasing MJ's insane athletic ability on the court and his almost superhuman capacity to seemingly glide through the air as he took flight for a slam dunk provided compelling still imagery that I was able to manipulate from an editorial layout perspective and apply typographical and design treatments to as I built the overall framework of the website. The thing with a player like Jordan is that there are so many images of him mid air that you could just look at for hours on end that it was a struggle to pick out the best ones to showcase.
One of the other things that I truly wanted to highlight was the extend of Jordan's cultural impact, and so one thing that I often did is took cues from pop art iconoclasts like Warhol to put together our "Wheaties" wall similar to the style of his classic Campbell's soup pop art piece. This type of work would give credence to the dual sided nature of MJ that we wanted to highlight, the beast on the court and the superstar off of it.
This pop art style not only made sense in terms of reinforcing the narrative we were trying to highlight with MJ but it also provided a convenient way to work with all of the myriad of assets of all different shapes and colors and sizes that I had to work with that span the many years of Jordan's career. The diversity of brands, from things like Rayovac and Hanes to food products like Ball Park Hot Dogs, McDonalds or drinks like Gatorade and Coca Cola and his eponymous Air Jordan brand really came in handy in providing a juxtaposition of colors and textures for me to work with as I laid out the experience. From our analytics we know that users spent a ton of time going through this section, reminiscing old ads and commercials and rewatching them for good measure.
.jpg)
However none of the off court accolades and brand deals were possible without the work on the court, so in hammering this home I wanted to circle back to MJ's championship pedigree and the next section of our interactive web experience focused on each of his 6 rings and taking a deeper look at the story behind each one. Me and Will would often spend upwards of a week doing a deep dive researching each individual championship and then taking an intensive week of work to produce the corresponding layouts for the website build.
I was able to spearhead an interactive experience that would allow users to explore iconic imagery of each championship, the champagne and the confetti and cigar smoke all imbued with the jubilation of a World Championship. Rings are a central part to Jordan's legend and including them in a meaningful way in this experience was important to me. By having this central section we were able to keep them a central focus without making them the overwhelming storytelling device.
When you look at Jordan's career in terms of game winning shots you have a ton of clutch moments that stand out, but perhaps two come out on top of any others. The first one being the absolutely legendary shot over Craig Ehlo in game 5 of the playoffs against the Cleveland Cavaliers, and the second most iconic being the final gooseneck follow through and push off on Byron Russell to clinch his sixth ring against the Jazz in Utah in game 6 of the 1998 NBA Finals as his Chicago Bulls swan song. The latter was the definitive MJ buzzer beating moment that I chose as the anchor to our entire clutch gene section. The final game of his "Last Dance" as it is now referred to was a unique moment to bring the spotlight to his play on the court and allowed us to dissect the play in detail as the flagship moment of Jordan's career.
Part of what made MJ All Day an award winning interactive web experience is knowing when to have a flair for the dramatic and to dim the lights, and that is exactly what this specific section felt like. Working with our other B/R graphic designer at the time, Ryan Hurst, we created a layout featuring all the different angles of the shot before painstakingly clone tooling out all the other players on the court so that we could fade them in as you scrolled down the microsite.
The tales of Michael Jordan's clutch exploits have become larger than life legendary stories because of how dramatic the moments were and how high the stakes were for so many of those games. Focusing on this final shot was a no brainer, as the stakes didn't get much higher than a coveted chance at a sixth championship on the biggest stage in the world. Down one point in the fourth quarter with just under 30 seconds to go, Jordan was able to steal the ball for Karl Malone and was able to cross over Byron Russell (The hotly debated push off) as he swished in the game winning jumper.
Around 3 months into the project we were able to bring our sales team on board and they were able to come to an agreement with Gatorade to become an endemic sponsor for the microsite. I was tasked with working with their ad ops team to integrate in our sponsor in a natural way that worked within the flow our the narrative we were trying to tell. Thankfully, having built in a section that covered Michael Jordan's commercial exploits gave us an easy vehicle to amplify Gatorade's message in a way that would make the native advertising fit right into the flow of the overall experience.
Gatorade's RFP was essentially built around the launch of their newly revamped "Be Like Mike" campaign that remixed the original classic commercial with modern elements. MJ All Day presented a very natural vehicle to house this content and to amplify it's message to a core group of basketball fans who already know about Jordan enough to click through on an experience like this. Working directly with them allowed us the chance to influence the creative and work on integrating it properly into our experience. It was a high level integration on one of their biggest campaigns ever as it was the 50th anniversary of the company. This meant it was a huge bet for them to partner with Bleacher Report and we really wanted to blow things out of the water.
Personally one of the most intriguing aspects of the sponsored collaboration with Gatorade on this project was the ability to work with them to dig intot heir advertising archives and pull some of their most interesting partnerships with the likes of Gary Baseman (A legendary California based American artist who I grew up admiring for his work on Disney's Teacher's Pet and his cartoon and sculpture work) for print magazine ads that ran in the 1990s. Being able to get the original high resolution artwork and building it into our editorial layout in a seamless manner that really allowed our users to get immersed inside of the details was an extremely enriching experience. The opportunity to feature the work of Gary in a project like this was an absolute pleasure.
.jpg)
One of the sections of the layout that I felt was integral to the entire experience flowed through nicely after the "What if" sneaker thought exercise and that was to bring the conversation back around to the ever repeated argument that would pit Michael Jordan against any modern day star. One of the more fun aspects of the basketball artwork community that I had helped build out in my time at Posterizes was the affinity to create fantasy photoshops of Jordan faced up against the biggest modern day superstars of the NBA, your MJ vs Kobe, MJ vs LeBron, MJ vs Steph type arguments visualized by some of the best artists on the internet. So what I wanted to do as a part of this experience was to essentially create a fantasy matchup generator through the javascript skrollr framework we were working with.
The fantasy matchup generator was one of the stickiest pieces of content in the whole experience, and within our app we were actually able to see an uptick in screenshots on this experience and we believe it was solely due to the existence of this section. After posting the website over the years this screenshot of the matchups between KD or Lebron or Steph or Kobe have been seen countless times on the internet. In some ways they almost act as a business card for the project.
Another way to bring in a modernized angle was to use the iconic dream team and parallel it with the current iteration of Team USA. The 1992 Barcelona Olympics where Michael Jordan lead an all-star squad of NBA superstars including himself Magic, Bird, Robinson, Malone and more. Not only were they the biggest named athletes to be attending the olympics, it coincided with Jordan's meteoric rise to the biggest name in all of sports and really contributed to the globalization of the game.
The Dream team was one of the most iconic moments in all of sports history, and it is something that I wanted to touch on in our coverage. I worked with CJ Toledano to produce this animation with Khammy Viliasang set to the soundtrack of Goldie by ASAP Rocky to show an evolution of Team USA basketball from MJ passing the torch to Shaq to Iverson to Kobe to LeBron and ending with KD catching the alley oop lob for the final finish bringing everything back full circle.
.jpg)
Of course when talking about the impetus behind Michael's pop culture rise and his subsequent globalization and impact on the zeitgeist at such a large scale was never more evident than in the release of his multimillion dollar blockbuster film Space Jam. To be able to carry a hollywood film like that took the broad market appeal that only someone like MJ had, and it is this legacy that allowed for MJ All Day to come to fruition. The fact that it was going to come around full circle with a sequel releasing featuring LeBron is a crazy fact in and of itself and one we chose to play around with on social as well.
We were able to develop what was essentially a digital virtual museum for MJ simply because that amount of richness of content and storytelling existed in the first place. Interestingly despite being within the Warnermedia family, due to rights issues we were unable to use much assets from the actual film, but I was able to create a Tune Squad jersey swap that B/R has subsequently used quite a few times in discussing the movie.
For the ending portion of the overall digital experience I wanted to make sure to give users more of a relaxed lean back experience as they closed out the microsite, and so I wanted to put a slightly less invasive and more graceful black and white photo essay at the end that focused on the beauty with which MJ was able to play on the court. From a user experience perspective this meant giving users a chance to reflect and slow the pace of the experience down a bit.
Overall this was a push and pull from an interactivity point where as I was designing the whole experience and working on the art direction I wanted to make sure you were never overwhelmed by the amount of content and were able to consume it at your own speed, which was an aspect I had always stressed was key to this project. Like I said earlier, this project really was a digital museum, and I wanted users to be able to gracefully and patiently go through the entire experience at their own pace. MJ All Day was a trip down memory lane, but in the most stunning and visual way possible with all the wealth of digital assets we had to work with. When life gives you lemons, make an award winning digital web experience showcasing Michael Jordan's legendary career.
Upon release of this project we saw a wave of coverage, featuring the story on Complex, NiceKicks, SoleCollector, and GQ along with many more publishers. One of the metrics by which we measured success for a project was whether or not a piece was able to "capture" the spirit of basketball twitter and become the topic of conversation for a full day. MJ All Day not only passed that test, it broke all expectations with flying colors as it drove over a week of sustained online chatter around the experience. Not only were we able to leverage this coverage to drive eyeballs to the experience it is this perception that allowed us to bring home a coveted CLIO award for the project as well.
What was great about a project like this one was that because MJ was such a big figure in the sports world was that we were able to consistently bring the conversation around him or Kobe or LeBron to the forefront and keep it going as time passed. This essentially made MJ All Day content evergreen as we were able to reprogram it again every time his birthday came around or interest in the topic came back up again during times like the Last Dance Documentary series hype. In many ways the project became modular as we would be able to pick out specific parts of it to program on the timeline based on certain moments on the calendar.
In terms of metrics that really stand out from the publishing of MJ All Day is the time spent number which tallied up over 10 minutes average per user which was unheard of for our content experiences. At their upper level, even our longer articles would generally drop out at around 3 minutes of time spent due to the high amount of drop off of people who would click the link but not spend much time in the experience and click away. Not only were we able to drive millions of eyeballs to the experience, we were also able to ensure that they stayed their for a quality time.
From an analytics standpoint, the project is one of our most successful of all time and became a prime example that we used as a standard to compare our other content against. Furthermore we also used this as an example we could take to other brands as an instance of native advertising and we were able to successfully close multiple deals using this as a visualization of what we were capable of.
As can be seen in the scroll through of the entire experience below, our audience was able to get lost in the imagery of MJ's career and we were able to drive over 8.5 Million hits to the website over the course of the first 2 weeks of coverage. These numbers were no mistake, we knew the launch would be big and prepared accordingly. MJ is the GOAT for a reason and this experience was built to reflect that.
At the end of the day, the chance to lead the design and art direction ona project like MJ All Day that became a definitive content experience for a brand like Bleacher Report and was amplified with a branded content sponsorship with Gatorade, becoming one of our most important brand models we would take to market to build out more interactive microsites. The project planted a flag in the ground in that it won awards and really sparked a ton of conversation around Jordan. It was a pleasure to be a part of this project and such a large influence in shaping it's visual look and feel.
Key Collaborators: Will Leivenberg, Bennett Spector, Gregory Wild Smith, Ryan Fuller, Ryan Hurst, Chris Perez, Mink Coutoeax
Tools: Photoshop, Illustrator, After Effects, Skrollr, HTML, Sublime Text
Deliverables: Full functional HTML packaged microsite with supporting social assets (Promotional Graphics and Video to drive user adoption)
Category: Creative Direction, Art Direction, Production, Motion Graphics, UI, UX, Graphic Design, Brand Positioning, App Development