Redesign for Spacejam.com

Overview

The spacejam.com redesign was a project I created to revamp the original website for the movie Space Jam. I was introduced to the Space Jam website during a lecture on bad design. I personally love the website because it is a fun little time capsule into the web world of the 90’s, but there are some serious drawbacks. The site is very difficult to use and there are now many sections that don’t work or are completely useless. I wanted to create a new version that implemented much more intuitive ways for users to access content and removed parts of the website that no longer worked. I also decided to use all of the same assets from the original website to keep the same fun and campy feel.

Problem Space

I had to redesign how users can get to content and figure out each part of the website that didn’t work.

Requirements

• Use modern web standards to improve upon the overall UI
• Navigation improvements
• Keep some of the old school web look, but update the usability and refine things like readability
• Want to somehow keep star background, icons
• Get rid of things like clicking on the pictures, red text

Who is the User?

Our user is a younger person who has knowledge of the movie Space Jam from their childhood. This person might remember what websites used to look like and they may even know of the original Space Jam website.

Methods

• Sitemap: made a sitemap to help organize what can be consolidated and what can be cut from the original website
• User Flow: created a user flow to show how the sections of the website would be linked together
• Prototypes: designed hi-fi protoypes and uploaded them to Invision so it could be tested
• User Testing: interviewed multiple people to help evaluate the new redesign

Sitemap

I started my design process off by going through the original website and finding out what pages could be consolidated and what could be entirely cut out. I ended up cutting over half of the pages on the original website because it was either redundant, didn’t work anymore, or in some cases a very long piece of written content that most users were never going to read. I consolidated all of the remaining content into four different remaining sections; The Lineup, Junior Jam, Behind the Jam, and Stellar Souvenirs. Creating the sitemap helped plan out where the remaining content would go in each section.

User Flow

The next step was to create a user flow to have a reference point when connecting everything together through animated links in Sketch. This also lead me to the idea of having the website start on just the logo with a button underneath it that was labeled “Enter the Jam”. Once clicked on the, website would display a home page with four sections that could be accessed. In each of those sections there would be a hamburger menu which would allow for easier access to the other sections. There would also be a logo in the top left corner which when clicked would send the user back to the four-section home page.

Prototypes

I then moved on to create my high fidelity prototypes. I borrowed most of my assets from the original website and added some pictures of characters I found online. I uploaded the prototype to InVision using Craft to make testing easier later on. You can view the project here.

Original Home Page vs My Redesign

I kept the original star background, but as you delve deeper into the website it begins to take on a sort of warp speed effect. I believe this can help the user know where they are subconsciously. In most sections the content was centered, while still following Jakob’s Law by having the logo and hamburger menu in the top left corner.

Original The Lineup vs My Redesign

I decided to cut out the entire Cast Bios section in favor of having one page for The Lineup. The Cast Bios page was way too long for a novelty website like this. I opted instead to have a single page listing the character’s team, position, height, weight, and date of birth. When performing user testing later on, users really enjoyed the ability to click between these different dropdowns. They liked comparing information between the real NBA players as well as the Warner Bros. cartoon characters.

Original Junior Jam vs My Redesign

User Testing

Once I was satisfied with the prototype I began to compile some questions in order to perform some usability testing. I created a short script that would help me determine how effective each page was and if a user was ever lost.

1. How was your day?
2. What do you think you can do on this page?
3. What does this page tell you?
4. Do you like the way it looks?
5. Do you think it looks ugly?
6. Do you think it looks ugly in a fun way?

I like to start of with something unrelated to kind of understand where the user’s head is at and to put them at ease. The second and third questions are mainly to see if the pages actual application is being properly communicated. The remaining questions are to gauge if the user is enjoying the websites look and also if they are having a good time with it in general.

I interviewed five different people and I was able to collect some data from each of them. Here is what I learned.

• The logo on initial introduction page was too small, it also should have some sort of bounce. It’s a little confusing having just the logo with nothing else except the background.
• The icons on the second (home) page were too small and the text underneath them was hard to read.
• The Space Jam logo needed to be moved somewhere else on the third (the actual sections) page.

I took all of this into consideration and made the necessary changes. Initially the introduction page was just the Space Jam logo, which when clicked would take the user to the home page. This seemed to be sort of confusing for the users so I decided to add the Enter the Jam button. I also made the logo on the introduction page larger. When one of the icons was clicked the user entered a page that had the logo at the top middle. This wasn’t following Jakob’s Law and that’s why the users didn’t like it’s placement. The home page icons stayed the same because I wanted to stick to using all the original assets as best as I could.

Conclusion

I had a great time creating this redesign. It was a lot of fun taking something that was horrific to navigate and remodeling it to better fit the user’s needs. I learned a lot from developing a fully functioning prototype and uploading it to InVision, but where I gained the most experience was in user testing. Asking people questions while they interacted with the prototype was the most enjoyable part of the entire project. The data I was able to gain from these questions was incredibly valuable and really helped to push this project to an even higher level. I am grateful that I was able to learn so much from the users and I’m really looking forward to performing user testing in many more projects in the future.