Space Jam: Responsive Redesign

Project Overview

Image credit: Warner Bros.

In November of 1996, Space Jam—a Warner Bros. movie starring Michael Jordan, Bugs Bunny, and the Looney Tunes cast—was released in theaters to wide critical acclaim. Upon its release, the website www.spacejam.com was launched to entice fans (and early Internet adopters) to engage with the themes of the movie.

Some 25 years later, in July 2021, Space Jam: A New Legacy was released.

In anticipation of the new Space Jam movie, it seemed to be the right time to re-tool the original site, transitioning it from the 1996-era website that it was for over two decades. For curious and nostalgic minds, the original site is now archived here.

 

Role

Research

Ideation

Wireframing

Visual Design

Prototyping

Testing

Duration

80 hours

Dec 2020 - Jan 2021

Tools

Figma

Adobe Illustrator

 

Designer’s Note: This project was self-initiated and not commissioned by or affiliated with Warner Bros.

The Challenge

 

The most significant challenge this project presented was how to maintain the originality of the Space Jam world after over twenty years of evolution. It wasn’t merely an evolution of technology that had to be accounted for in my redesign efforts, what was most important was evolving the original brand into a recognizably modern form that satisfied original viewers of the 1996 movie while also meeting the stylistic and functional demands of digital natives who were curious about the original cast and storyline. Understanding this challenge was critical to empathizing with the end users of the redesigned site.

Project Goals

  • To keep intact the original movie production notes, fan elements, and star history while redesigning the Space Jam website homepage and core elements.

  • To redesign on web and iPhone to allow fans to immerse once again in the original Space Jam movie, Michael Jordan, Bugs Bunny, and all.

The Starting Point Homepage of the Official Space Jam website ©Warner Bros. 1996 - 2021

Research Goals

Establishing research goals to identify the differing expectations of both original viewers and new visitors ensured the project would stay on its critical path as it evolved from its original state to a modern site that engaged users, led to more streamlined interactivity, and allowed even the most ardent fans to feel they were still a part of the original movie experience.

  • Redesign.

    Redesign the Space Jam branding elements for a modern experience that is true to the original milieu

  • Create.

    Create a user-friendly responsive site for web and iPhone

  • Highlight.

    Highlight the original cast and crew, production notes, and fan information

  • Improve.

    Improve user experience in order to increase traffic to the Warner Bros. shop and website for the new Space Jam movie, Space Jam: A New Legacy

In undertaking this project with these research goals in mind, I set out to conduct qualitative research in the form of user interviews, perform a competitive analysis, and create a persona.

Interview Outcomes: Contextual Inquiry

Transitioning the 1996 website into a contextually relevant model was a major outcome of the interviews I conducted. Observing participants navigate the site on their own provided much insight on the challenges and opportunities present. Specifically, creating patterns of function and navigation, anchored text and assets, and updating the language would add to the users’ experiences in a redesigned site.

  • The first thing that participants noticed on the homepage were the tiled starry background and icons.

  • There was no pattern in the first page participants navigated to. 

  • While exploring the webpages unguided, participants noted:

    • Outdated verbiage and/or functions 

    • Unclear functions of icons and headings 

    • Hard to read text 

    • Nostalgia 

    • Delays in page loading

    • Unexpected automatic downloads 

    • Wanting to see the characters 

    • 3D icons 

    • Length of text 

Interview Outcomes: Brand Messaging

The interviews I conducted revealed a strong affinity for brand messaging. This was encapsulated in the memorable live action of the cast and animation which was, in 1996, a graphic design integration of new heights. Highlighting the relationship between the two top characters from these worlds was critical. The interviewees were quick to cite the use of color in the movie and its associated graphics; maintaining and highlighting the bold colors of the brand became a major goal based on the interview outcomes.

  • The memorable aspect of the film was the live action combination of actors and animation.

  • The top characters recalled by participants were:
    Michael Jordan and Bugs Bunny

  • The top mention about the visual presentation of the film (from memory) was color

    • Color descriptors: bright, distinct, green aesthetic, red, orange, basketball exciting colors, colorful, vibrant

    • Other comments on the visual presentation related to:

      • Cartoon styling (animations, fonts, and logo) 

      • Basketball theme

      • Space treatment

      • Sound effects

Competitive Analysis

Although this project was self-motivated and not affiliated with Warner Bros., it was important to identify modern Warner Bros. websites and to analyze their commonalities. By cataloging these sites’ functions and features, I could ensure the new Space Jam site would nest seamlessly in the arena of site design that is expected by Warner Bros. fans. To this end, I:

  • Researched three other Warner Bros. Sites: Wizarding World (a Harry Potter site), DC Comics, and WB Kids Go (with a focus on Scooby Doo and Looney Tunes pages)

  • Looked at common trends based on current site layouts and analytics

  • Catalogued all pages, text, and images from the existing Space Jam website, www.spacejam.com

Grid Comparing Warner Bros. Sites

Ideation

 

Persona

To align the site functionality with a targeted end user, I created a persona who bridged the original movie generation and the digital native generation. Julien, our user persona, inspired several journeys during ideation. He wants to become immersed once again in the Space Jam universe he knew as a child while also discovering ways to connect with students as a middle school teacher.

Persona Julien’s background, goals, needs, and motivations are based on the user research.

New Sitemap

To meet the established goals, the sitemap highlights the original cast, reveals behind the scenes information about making the original movie, brings forward original and newly-created Space Jam games, and provides a gallery of images for users to relive their original experience with the bold and beautifully-designed Space Jam assets. Additionally, a quick link to the Space Jam II site integrates the original movie, cast, and designs with the newest Space Jam offerings. Lastly, the ability to become a Space Jam-outfitted fan through the existing Warner Bros. Shop rounds out the user experience.

Sitemap for the New Site The “Pages - P2 screens” were beyond the scope of this project but were useful in mapping the overall site layout.

Sketches

Integrating a set of UI patterns in the redesign page sketches allows the original movie information to be presented in ways that are natural and expected by users. By varying the page design elements and introducing a richer visual experience, the Space Jam site immediately begins to feel like a modern website.

Sketches Three variations of an “About this Film” page design based on user research. As I generated ideas, I noted that a few of them could be used for more than one of the subpages (Cast Bios or Movie Notes or Soundtrack).

 

Wireframing

Making the transition from sketches to wireframes brought a more transparent sense of the design elements that allow the site to feel sufficiently clean and visually dense.

Desktop: Low Fidelity

In Figma, I created lo-fi wireframes for the homepage, two featured pages (Behind the Scenes and Meet the Cast), and a subpage for each (Character Sketches and a Detailed Bio Page).

Working with the lo-fi elements revealed the commonalities that were desired by the interviewees. Blocks of text that are closely aligned with graphics allow the past and the present to blend, giving the user a strong connection to what was originally designed as a vibrant and colorized animated world. Repeating patterns of graphics give a sense of stability to the user while gallery pages allow for the historic elements of the film to be accessible and also bring the sense of nostalgia that picture books afford.

Highlight on the Homepage Design Decisions

The Homepage design features a large header with hero image and call to action as well as a top navigation, search bar, and static buttons. This decision to include these elements in the header was based on common UI patterns as well as the layout of the three other WB sites catalogued in my research.

The Features section provides three main CTAs, each of which are also available via the top navigation dropdown menus for varied user flows and general ease of use. Near the bottom of the site, the Games section is presented in a carousel with controls underneath to extend the blocks off the screen and give the illusion that the fun doesn’t end. In the footer, links to informational and quick links are provided in four columns as per UI patterns to make common links readily available.

Mobile: Low Fidelity

I created responsive wireframes for mobile, keeping the integrity of the design across platforms while making the content easily viewable on each device type. The same design elements were adapted to the mobile layouts: blocks of text integrated with graphics, deep colorized graphics, repeating patterns, and gallery pages that reveal the depth of the assets while creating a sense of nostalgia.

UI Kit

Next, I built out a basic UI kit for the repeating elements in the design. The color palette is largely based on the original logo with some additional neutrals used for controls, dropdowns, and icons.

The choice to use the Saira typeface stemmed from the design’s space and cartoonish foundation. The sans serif family, designed by Hector Gatti and developed by the Omnibus Type team, proved to be both structured and playful in this application.

Hi-Fidelity Wireframes

Applying the UI to the wireframes allowed the colorful and playful design elements to come through; immediately, the user feels like they have been dropped into the richness of the original Space Jam movie. Users are also offered a look behind the scenes, denoting the historic value of the movie as a cultural icon. Integrating the images from the movie and from the original sketches bridges the time gap between 1996 and present day.

 

Usability Testing

The findings from the usability tests on the first prototype allowed me to focus on the development of better navigation, greater clarity of content within major sections, better integration with external sites, and where the testers wanted deeper and richer content.

Test Findings

  • Common reactions and/or observations:

    • Use of colors lent well to cartoon theme

    • It was not clear whether or not “Meet the Cast” included cartoon characters

    • “Behind the Scenes” did not adequately inform participants that the section included sketches and b-roll

    • Shop WB page was not located without hesitation and/or confusion

  • Unfinished areas – to be revised in order to increase functionality:

    • Change the feature/page heading of “Behind the Scenes”

    • Move “Shop WB” to main navigation

    • Add a link to a character’s sketch page from their bio page

    • Change prototype settings for menus (hover state doesn’t allow user to click on linked sub-menu

      item)

    • Add Zoom icon to image preview hover state on the BTS detail page

    • Add missing link from “Shop WB” in the footer

  • Visual elements – to be revisited to improve the overall visual design:

    • Add stats to the top of the bio pages/redesign hero

    • Adjust horizontal alignment of main nav after adding “Shop WB”

    • Adjust header “Search” and “Watch Now” after removing the “Shop WB” CTA

Test Objectives

  • Test the overall quality and ease of use of the Space Jam desktop website

  • Test how easily the user can browse and find a detailed information page

  • Test user’s ability to navigate menus and utilize CTAs

  • Observe any areas of confusion or hesitation

  • Observe expressions regarding ease of use

  • Observe reactions and comments on brand messaging

  • Identify any missing or inconsistent elements based on user experience

  • Identify areas for further development

Final Prototype

The post-testing iteration of the prototype allowed users to interact with the site navigation and to validate the site design and clarity. By interacting with prototype testers, several navigation elements were confirmed as effective while others were revealed as not yet convenient and natural. The response to the redesigned site was positive and encouraging, as many testers exclaimed audibly when testing the prototype.

Takeaways

This project was a deep dive into a cultural icon and required that a reimagining of the original Space Jam movie’s website pay homage to its history while incorporating modern expectations about web content, functionality, navigation, and design. Maintaining this balance was a delicate dance. Incorporating the original movie images and augmenting the site with a “behind the scenes” section allowed modern web users to experience the vividness of what was a computer graphics achievement in its time. My hope was that through this redesign original fans of Space Jam as well as young fans of Space Jam II would be able to enjoy a common experience complete with history, originality, and modern functionality.

Another key takeaway was the amount of complexity and hierarchy web navigation has come to embody. The original site map was flat and inaccessible. By employing an information architecture that allowed users to interact with content old and new in a logical way, the site became more organized and streamlined. Maintaining a sense of purpose within this intricacy was a challenge that taught me a major lesson: architect the navigation after creating the catalog of offerings, not before.

The last major takeaway from his project was the importance and impact UI can have on a product. This movie in particular was iconic in its imagery; maintaining the original color palette throughout the UI allowed a connectedness to emerge visually. By linking the redesigned site to the original color scheme, the feelings that were originally created in users through the colorful animation were felt once again.

Next

A New Feature for LinkedIn Learning