Website Analysis: National Geographic

I don’t usually start these website analyses with a section about the company, but I’m going to make an exception for National Geographic because of the impact their brand has on both the design and usability of the site.

Understanding How National Geographic Keeps Running

National Geographic, is one of the world’s leading non-profit science, nature and education societies. The website they have is visited by thousands of people daily – from travel photographers to scholars performing historical and cultural research.  A key aspect of their company is their National Geographic magazine, that features adverts, which allows them (as a non-profit business) to pay wages and bills.

As you would expect, their website is no different and features numerous banners ads. Despite featuring corporate brands, the banner remains holistically National Geographic. Why? Well, from a National Geographic POV, it ensures users are reminded that they’re on the National Geographic website, but it also gives their partners press. Besides, people naturally have respect for National Geographic, and having your logo present alongside theirs immediately gives you an extra level of credibility.

Take this Subaru advert as an example. It retains both the branding of National Geographic and Subaru (and was most likely put together by a team from both companies). A car, yes, that’s Subaru, but a car covered in mud? That seems geographic. See where I’m going with this? We subconsciously make the connection between National Geographic and Subaru through the use of a photograph.

If you check out National Geographic’s new site, you’ll immediately come across the aforementioned Subaru banner ad. You’re probably thinking it must have cost a fortune, right? Of course it did, and rightly so, but from a design POV, it retracts from the National Geographic logo and the header, and shifts the focus onto a third party.

From a business perspective, I totally understand it. An agreement was made, one that benefits Subaru in terms of advertising (and subsequent reach), and one that benefits National Geographic from a financial POV. Despite that,if we focus on the design and user experience from a consumer perspective, it’s far from ideal.

Design & User Experience

Let’s take a look at it again. You’ve gone to nationalgeographic.com, perhaps to research a place, or maybe gain some inspiration for photography, right? You didn’t expect to be a target of display marketing. Admittedly, while you might expect to see adverts on websites, you can’t help but feel the placement could be a little more considered. After all, the header is a key feature, and the advert pushes it down the page, which impacts usability negatively. I would be really interested to see a heat map of this page to see where people glance first.

In terms of design, I can’t fault the banner ad (except maybe to say I’d have liked it to be full width). Although, we must remember affiliate banner ads tend to be static images. Perhaps the developers and designers working on this site would have been better making this part of the webpage as a responsive feature? The header itself is clean, minimalistic, and on brand. However, there is one thing eagle eyed users will notice (like me) – the alignment of the options in the top header bar.

If you look closely at the image below, you can see that ‘shop’ and ‘’subscribe’ appear to be sitting 1 pixel higher than ‘sign in’. Admittedly, while this doesn’t affect usability, these little errors really need to be ironed out because it looks more professional and, well, right (as a designer myself, seeing this is infuriating).  

Let’s take a look at it again. You’ve gone to nationalgeographic.com, perhaps to research a place, or maybe gain some inspiration for photography, right? You didn’t expect to be a target of display marketing. Admittedly, while you might expect to see adverts on websites, you can’t help but feel the placement could be a little more considered. After all, the header is a key feature, and the advert pushes it down the page, which impacts usability negatively. I would be really interested to see a heat map of this page to see where people glance first.

In terms of design, I can’t fault the banner ad (except maybe to say I’d have liked it to be full width). Although, we must remember affiliate banner ads tend to be static images. Perhaps the developers and designers working on this site would have been better making this part of the webpage as a responsive feature? The header itself is clean, minimalistic, and on brand. However, there is one thing eagle eyed users will notice (like me) – the alignment of the options in the top header bar.

If you look closely at the image below, you can see that ‘shop’ and ‘’subscribe’ appear to be sitting 1 pixel higher than ‘sign in’. Admittedly, while this doesn’t affect usability, these little errors really need to be ironed out because it looks more professional and, well, right (as a designer myself, seeing this is infuriating).

Side Menu Feature – Yay or Nay?

Let’s examine it closer. Instead of just overlapping the existing content, or even pushing the entire page to the left, the side menu covers the page, along with featured articles, in a convenient grid. In theory, a user could see this as a new page, which would be an unconventional user experience, but equally, unconventional does not necessarily mean poor. Most important, all menu links are accessible and the feature articles can direct users further into the site.

In terms of functionality, the menu page is interesting. The yellow hover state tells you what you’re about to click on, and the articles in the grid change which creates multiple quick links. This is very useful for users and means more articles can be pushed as opposed to a rigid five article structure.

How Minimalist Is Too Minimalist?

National Geographic also adopts a similar approach for their search option. Instead of a traditional search bar, we get a full page, which is something we’re seeing more and more recently in web design. It makes it clear and obvious what you’re searching for without any distracting calls to action.

Quite interestingly, National Geographic takes a different approach to the standard hero image and slider, opting instead to feature their most popular and latest articles.

The designers and developers who put this together could have made these images two static images. As you can see, we have five popular stories on the left that are short and succinct, plus two large images, followed by two smaller images on the right. Some effective functionality has been implemented here, as the right column scrolls faster than the left, ensuring they end at the same point. Yes, I know, this isn’t a must have on any website, but it is a ‘nice to have’ feature that enhances the experiences for the user. It also conveys the sentiment that National Geographic care about their customers and don’t take half measures (which is reassuring).

Following that, we have a section for ‘Photo of the Day’ on the homepage. Again, touches of class have been added, this time through parallax scrolling on the image, which in a way, gives the impression the user is seeing more than what the photographer intended to be in the frame.

Banner Ads – Necessary or a Nuisance?

If we go all the way back to banner ads for a moment, we can notice another one further down the homepage – this time for Outdoor Classroom Day / Persil. It fills the full width of the page, and despite being a good ad, looks out of place on their website. The National Geographic logo is present, yet the whole ad just feels, well, weird. National Geographic… if you want to promote, create a new section on your website! I don’t think a banner ad like this deserves so much attention under any circumstances. The ad fills your entire browser window, and on a laptop or small screen, you’re going to have to scroll a lot.

Footer & Final Thoughts

Finally, I’m going to give the footer a look. More often than not, the footer is a place to find links to main pages on the site. Yet National Geographic continue to be unorthodox and opt for a more minimalist approach.

As you can see, we’ve got links to legal and required pages on the right, along with social media links, and then a newsletter signup on the left. It appears to be set up in thirds, with the newsletter signup taking up two thirds of this. In my mind, this is a little excessive. The input field, and the button, are both way too long. Why not place the input label outside of the box and move the button 20, or maybe, 30 pixels to the right? If they did that, it would look neater and not as stretched.

I know I’ve only focused on the homepage, but you must remember the homepage is the most important page of any site. It will likely be the first port of call for most website traffic. If you don’t like the homepage or find it hard to navigate, you’ll more likely than not, leave the site. After looking around the National Geographic site, I have to admit, I can’t fault it, despite how unorthodox it is. Interaction, functionality, and usability are all good. Like I said earlier, there are a few niggling design points including odd spacing, alignment issues and range of buttons sizes and style, but on the whole, they have a really good looking and modern website.