Website Analysis: Marvel

It’s time to analyse a website that’s a personal favourite of mine – marvel.com, home to Marvel Comics, who produce a variety of comic books and films.

You would expect an established company, like Marvel, who earn billions in box office sales to have an amazing (Spider-Man) website. I’d say, sure it’s good looking design, it utilises the company’s branding and implements a variety of graphical elements, but it feels a little dated, and quite honestly, I expected more.

Basically, I’m Tony Stark and Peter Parker has just been off fighting bad guys and split a boat in half – Tony was not happy.

Modern and futuristic, that perfectly sums up the Marvel Cinematic Universe. There are hints of this on the website, but it could definitely be improved. The first and the most obvious point about the design of the website is how narrow the pages are.

Of course, you want the content to be accessible to anyone on any screen size, but there is no need to keep the content bound to 960 pixels – just design and build a responsive website!

Header & Hero Image

Let’s start with the most logical place on any website (cue dramatic pause) the homepage, and in particular the header and hero image.

First of all, it’s quite narrow and the navigation bar is compact. If the website had been designed at full width, the navigation bar could have been spaced out for a cleaner design. The Marvel logo itself features a red box as its container. Annoyingly (for a designer anyway), this has been given a 1px black border which doesn’t feel necessary.

I’ll admit, I quite like the hero image and slider design, it is an unusual approach having elements angled this, but the design is too narrow, and can barely fit two heading words per line. As a result of this, the slider is taller than it needs to be and the captions must be given more thought.

Usually, you would want to make this snappy, informative, to the point, and with a strong call to action. Achieving this, while managing space, is an even harder challenge, and one which the heroes at Marvel have dealt with admirably (not all heroes wear capes).

Pop Culture Design

The angled polygon shape is used as a graphic element throughout the website, for banners, dividers, buttons, and backgrounds. It has become a useful design asset that makes the design that little more unique.

Sure, it would look absolutely fine, in fact, it would probably look cleaner if everything was at right angles, but that isn’t Marvel. This graphic element feels right for their branding.

It brings a pop culture vibe to the website and mimics many of the speech bubbles and the like you would find in a Marvel comic (I should know, I’ve read enough of them).

User Journey

Even though I criticised the website for being dated, I must admit, it is difficult to highlight flaws in the site’s usability. I’d say a fair proportion of the site traffic is looking for upcoming comic releases, or information on a comic book run (a series of comics).

Getting to your end goal is rather straightforward. It could be a complex index of comics and characters, but Marvel has broken the process down to allow easy user access. Simply put, you really don’t need Bruce Banner’s brain to find what you’re looking for.

As humans, we like not having to do much when we’re on websites, we crave having what we’re looking for, right in front of us. When following Marvel’s methodical steps, you reach your end goal quickly, without much fuss.

Functionality

With an intuitive user journey, you would expect functionality to be on the same Thanos killing level. On all my visits (and there have been a lot) to the Marvel website, I’ve only come across one niggling functionality issue.

Take a look at the carousel above, what do you notice?

It’s easy to scroll through the comics to the right, but one misclick and you go past the one you wanted, there is no obvious way back. There is a solution, albeit, not one you’re likely to try straight away.

The answer – horizontal mouse scrolling (which is admittedly, an uncommon feature on websites). While we don’t want or need everything in black and white, a left arrow here isn’t going to ruin the website, in fact, I’m sure most users would be grateful for one.

While your local comic book shop will be the place to go for your paperback copies, the Marvel website allows users to purchase digital copies.

This is a convenient and more environmentally friendly solution which requires eCommerce functionality on the website. Many of the pages on the site use close-to-black backgrounds (no you haven’t crossed to the darker DC Universe). Despite the fact it is often easier to read dark text on a lighter background (due to the way light is reflected), I can understand Marvel’s approach.

A single white title on the black is easy to read on its own and the majority of Marvel’s comics don’t have dark front covers. With these covers being packed with colour, the product image stands right off the page and is the first thing you notice, just like in a comic book shop.

Final Thoughts

There may be many positives that I’m able to pick out on the Marvel website, but in truth, I’m a little disappointed.

I want more impactful graphics, colours putting Ego The Living Planet to shame and a true reflection of the Marvel image. I don’t want to destroy my chance of a cameo in Phase 4 of the MCU, but it could be so much more.

There are plenty of fan-designed websites taking inspiration from Marvel films and characters, which Marvel could quite easily model their website on. The following (below) is a great example by Manuel Rovira.

Marvel, I address you directly. The fans don’t just want amazing films and comics that take us on emotional rollercoasters, they want a website that truly reflects the Marvel brand (okay, maybe I’m exaggerating a little but my point still stands!).

Excelsior!

Update: Doctor Strange must’ve used the Time Stone. We posted this back in June, it’s now July, and look who has a new website…