WWE Site Proposal

During the lead up to Cyber Sunday, I went onto WWE.com to try to find out if I could vote online for the different categories instead of texting. Considering Cyber Sunday was the WWE's next big Pay-Per-View event, I was sure it would easy to find on their website. However, I found myself unable to find it. Eventually I found a small link in the midst of, I believe, WWE Shop links. It was then that I realized the site needs a major overhaul.

When you think of professional wrestling, you think of drama, excitement and chaos. In contrast, the website is remarkably square and stark. Much of the information is redundant. In all my time using the site I have never used any of the links in the left nav bar. Anything below the tabbed portion of the site, in my opinion, comes off as throwaway information. If it is important enough to warrant appearing on the homepage, its location so far below the fold decreases the likeliness of anyone viewing the information.

(for me, this is all that appears above the fold)

I set out to redesign the site in a way that the information would be more organized, and better represent the world of professional wrestling.

Design I

My first design takes the original top nav bar and re-imagines it as a vertical nav bar. The bar would be image mapped to create the links. Just as the unexpected often occurs in wrestling, the nav bar presents the user with something unexpected. The links are in the bottom half of the link, which not only makes it unique, but forces the user to view the page as a whole instead of just the top left region.

The content is located in the long rectangular boxes to the right of the nav bar. These boxes scroll up or down continuously, so you never hit the end of the list, instead it just goes around and around. And you'll never lose the left bar, because while the content moves, it remains static.

There are five images in each box, and by hitting the arrows on either side of the images, the user can scroll through the photos, videos, etc. for that day. Alternatively, they could hit the word "PHOTOS" to go to the main photo page.

When a user clicks on an image or its associated text, say the article titled "Undeniable Altercations" under WWE news, the WWE News box scrolls to the top positions and the article opens underneath it, taking up the height of the page. While the article is open, the user can still scroll through the other WWE News articles, going through each one if he chooses without having to close out the article. When he chooses another article, the first one closes and the new one opens. The user can close the article by hitting either the image of the article he's reading, or by clicking the close window button at the end of the article.

The best element of this design is the flexibility. You could add as many boxes as you wanted. As long as you keep the 7 basic boxes (latest, photos, videos, exclusives, wwe news, industry news, and shop) the site will always have more than enough boxes to fill up the site. So if you wanted to add a box for the next Pay-Per-View event, the new video game, or even an advertisement, this could be easily achieved by just adding in another box.

Design II

The second design is similar to the first in that its main feature is its content boxes. A similar nav bar can be seen, this time in a horizontal format. Like the first site, the top nav bar never moves, it is always at the top of the page.

There are a few major differences apart from the obvious aesthetic changes. Here, the content boxes do not rotate infinitely. There is a top and bottom to the page. This site has a greater element of interactivity and customization. There is a small button in the top left corner of each box. When a user clicks on this he will be able to choose what kind of content appears in the boxes. For instance, he might choose to see only photos related to RAW and the Divas, and only products specially selected for males of his age group. He might also choose to get rid of a box entirely, or to rearrange the order of the boxes. In this way, you can ensure that every user gets the most out of the homepage regardless of individual need or preferences.

DEVELOPMENT

The springboard for this site design was the main nav bar. I started with a full page design. None of the site’s actual content would be on the homepage. The links would take you to secondary pages where all the information could be found.

This design quickly evolved into the horizontal and vertical variations that appeared in the final versions. I originally wanted the red rays to be filtered over the black wrestler so that it would seem almost as if the “impact” was emanating from between them. However, it was decided that he got lost in the image. It was also said that Mr. White and Mr. Black didn’t look like they were wrestling. I decided it did look too much like martial arts, so I aimed to find new reference images.


Here Mr. Black is no longer behind the rays. The scribble effect of the rays is also a lot tighter and less loopy. Between this point and the final proposal, this part probably underwent the least changes.



The original vertical design featured two different wrestlers from the original design. It was eventually decided that Mr. White’s position looked a little odd in this format, more like a white blob than a person with Mr. Black waiting to catch him. So the picture changed, which meant the words needed to be rearranged. But the same concept remained of white words fitted to the red rays.

In the first attempt at the horizontal layout, there was no ad-space and the button design was different. Apart from a few minor changes, the overall design didn’t change much.

The article page of the vertical layout caused me some problems. I knew I wanted it to drop down from the content box, but I couldn’t put it on the red scribbles or it would be difficult to read. It wasn’t till I put the article on the page that I realized the gray didn’t stand out from the rest of the page. For a quick solution I added the drop shadow but I really didn’t like it, so I added the red border that can be seen in the final version.

In the original version, I made the links red, but it became obvious that they lacked the contrast needed to really stand out, so I decided to change the links to underlined white.

I originally wanted something to happen to the image that went with the article so show that it was selected. I chose to put noise over the image, thinking maybe it could be an animated noise effect in reality. I didn’t think it stood out a whole lot, so I dropped the idea in the final version. The image at the beginning of the article also got dropped along the way.