Friday, April 18, 2014

Review: Games Workshop Website

Since its release, I've heard some uniformed, negatively-themed armchair reviews of the new Games Workshop website on various forums and in comments sections throughout the Internet.  Of course, this shouldn't rankle me so much... it is the internet after all.  Uninformed pontificating is the delicious, fatty sauce over the open-faced hate sandwich that is website comments sections. Someone in the comments section of BoLS actually had the audacity to say that BoLS are corporate shills for GW because the author of the article dared to say the website wasn't half bad.

For that reason, I feel compelled to actually do a review of the site since I actually know what I'm talking about in this case as I am a front-end web developer. (Please don't judge me based on my blog... I chose to use Blogger so I don't have to put a lot of thought into the design... I do enough of that at work!)  Also please note that web design, even though people try to make it a zero sum game, is still a bit of an art and these are just one man's opinions.

Remember, this is a review of the site, not a discussion on Games Workshop customer relations policies.

Audience and Purpose

Before commenting on a design, it's important to gauge a website's actual purpose; its reason for being. This will help you define the parameters with which you will gauge the success or failure of a site. Granted, I don't own a copy of the requirements document for this site, but I think I can make a very good guess as to what it contained.

Who's the audience?  Games Workshop customers.  Who are Games Workshop customers?  People who buy Games Workshop products around the world from the website, retail shops, and independent retailers. What is the purpose of the site?  The purpose of the site is to sell Games Workshop products.

With that in mind, the site must do two things and it must do them very well:

  • Inform customers about the Games Workshop range
  • Sell Games Workshop products

Anything else is peripheral.  The peripherals include

  • Support current Games Workshop products which are not new releases
  • Communicate with Games Workshop customers

Inform Customers About the Games Workshop Range

Informing customers about new products can be tricky.  On the web, users are able to bookmark specific pages and sometimes glimpse past selling suggestions.  It's important to gently suggest products using visible, but non-obtrusive methodology.  Some websites have a terrible habit of slamming an advertisement or product suggestion in your face while your trying to get your business done.  This is very bad practice. Maybe a whitepaper somewhere describes the fact that it generates clicks for the product, but it alienates customers and you want to avoid that whenever possible. Besides, it forces many customers to install anti-ad software which completely defeats the purpose of the ad.

The first, primary vector is the home page.  In today's age of Google Search through the address bar, many users tend to just type a site there rather than using bookmarks.  Others simply bookmark the home page because they know sub-pages have a nasty tendency to disappear from time to time. New customers will, invariably, use the home page as a starting point when exploring a product range.  The home page is important for pushing new releases and communicating, at a glance, what products are available and how to find them on the site. After that, it's also important to also add new product information on the landing pages which many users will bookmark.

Home Page Feature Slider:

This is a rotating feature in the main body of the home page which rotates through new products.  The images are big and there's enough room to communicate the information a customer needs to make a good purchase decision.  This is a cool feature and it does help communicate the new releases well.

However, I must say that I think the slider will move too fast for many users.  The fact that the section is very big and can contain a large paragraph of copy should make this apparent. The controls should have a clear "pause" or "stop" button, especially considering clicking the controls doesn't stop the slideshow. Sliders are usually a detriment to people with disabilities. Also of note is the fact that the slider uses <div> tags.  I'd have used a <ul>, but that's more of a personal quibble.

Home Page Bottom Feature "Postage Stamps":

This is a natural methodology to use for additional new products. These features present good information about the products in a clean and efficient way. Unfortunately, the huge Feature Slider does push a lot of this below the fold for many users, but at the same time not everything can be above the fold.  As long as the admins keep something interesting and fluid in the top spot of this section to keep people scrolling when they come to the site, it should be fine.  Also, let's be honest, web users have gotten used to scrolling especially since parallax and other scroll type layouts have become something of a fad of late.

My one quibble with this section is the use of the phrase "View All" for the button which gives you more information about the product.  That's a little confusing, as if it's going to show you the full range that the product belongs to instead of all the information about the product. I'd have gone with "View more", "Read more", or just "More", or something descriptive like "View More Information".

Product Line Landing Pages:

When you click "Warhammer 40,000" in the main menu, the site takes you to a landing page for that line of products including a product picker and a features area.  Again, we're given a product slider which has no pause control and does not stop when you scroll through it manually. This should be changed whenever possible for disabled users and because it's just plain annoying.

Having said that, the images are lovely and the paragraph space below is generous enough to really tell you a great deal about the product with the price featured prominently.  Below that are more postage stamps, but laid out in a very nice alternating left and right aligned image format with a simple line separating each one.  It seems like these are chosen manually by the administrator which is a good idea. You want to be able to push specific products when needed.

What's New and Pre-Orders on the Product Filter:

This is a hugely important feature.  With a lack of "New Products!" selling points on the individual product pages (this is a good thing, but the fact remains), it's important to have a place beyond the home and landing page where users can keep an eye on what's new.  The fact that this can be tied in to a price point, miniature type, faction, and other factors is a great bonus.

Sell Games Workshop Products

The most important thing about selling products online is to make sure customers can find the products they are looking for.  If they have a hard time finding something, they're more likely to either go to another site, use Google to find your product, or just not buy it at all.

Product Search:

It is very important to have a search which is visible and intuitive.  The Product Search is located in a prominent location with a large font.  Suggested results are quick to appear with prices included and have "Add to Cart" functionality included. If you know what you're looking for, you don't even have to navigate the site.  If you are looking for a generic item, such as a "Warboss", it gives you the choice of either going to a specific set of results for each section of the site which meets the criteria: "Warhammer", "Warhammer 40,000", or "Painting and Modeling".  It's clear from how the site search works that the main purpose of the site to sell Games Workshop products.

Your Cart Widget:

An interesting design decision has your running cart at the bottom right of the page, floating with you. When you click on it, the cart pulls up and displays a detailed list of products inside. This is actually a really nice feature. It saves space on the header while keeping you informed about your purchases.

Product Information Page:  

Each product boasts a clean page with a big image of the product (zoom is enabled for the newer products when available).  A quick-loading, easy-to-use image picker below controls the picture featured in this section and includes shots of the sprues for the modern models which is a great bonus. This top section communicates everything most users will need to know in order to get them to click that "Add to cart" button.  One small quibble is that the "Quantity" drop-down should be next to "Add to cart" instead of the price and the maximum quantity is only 10.

Below that is peripheral information about the product including a paragraph of descriptive copy.  Next to that, is a "Customer Service" section with Games Workshop's Delivery and Returns policy which is a nice feature. Below that are selling suggestions for the tools and paints for building and painting your model as well as other models related to the one being featured.  I'm a bit surprised, but pleased that the Customer Service section features more prominently than the suggested products. With the awesome product filter tool, these suggested products sections are not as necessary.

Product Filter: 

As I touched on earlier, this is a really nice feature.  It's not completely innovative, of course. Other companies have done this, however it's not always necessary or useful.  In GW's case, this feature is executed about as well as I've ever seen it.  The filters really help the user find what they want. The designers could have just sorted the products by banal factors like price point and product range, but there's far more here than just that.  You can sort by Force Org, Infantry/Vehicle, and army as well as price range and product range. There's also a "Special Availability" section with the Web Store Exclusives listed as a metric. The different sorts at the top of the list as well as the option of two views is also well-executed.  It's clean and helpful, though the addition of a text blurb on the list view would have been good; right now there's a lot of white space between the image and the order buttons.

This tool proves how important meta-data is to a website, particularly one which sells as many products as the Games Workshop website.  Other companies should take notice of this.  Sure, having a fancy site can be expensive, but it really doesn't take much to get your products categorized in a way which makes it easier for your users to narrow down.  I really applaud the inclusion of this tool.  Even someone planning on buying from their Friendly Local Game Store can use it to window-shop and get an idea of what they want and how much it will cost them before going to the store.

Note that my opinion here is also colored by a standpoint that too many filters are not a good thing. There could have been more granularity, sure, but I think it would have been too cluttered.  With too much granularity, you get to the point where you're filtering down to one product.  It's fine to have three or four products at your most granular level. That's enough for a user to find what they're looking for.

Support Games Workshop Products Which are Not New Releases

Of course, the priority must be to support new products and make sales, but there also must be good support of those which came before.  It doesn't seem as if all of the functionality are available for older products, even ones for the newly-released Codex.  These products are, however, fully integrated into the Product Search and Filter.

The FAQs and Errata have been moved to the Black Library site.  This is a curious decision.  Since the Search on the Games Workshop site (and the Black Library site for that matter) is a Product search, there's no way of finding the FAQs without knowing what you're looking for.  Woe to the new player looking for these documents with no frame of reference to tell them where to go.  Their Google fu might help, but that's a bit of a cop-out.

Communicate With Games Workshop Customers

One of the biggest criticisms of Games Workshop is their lackluster communication with their customers and fans.  The site does make a bit of a half-hearted attempt at this as it always has.  Of course, the site has the perfunctory "Contact Us" link, newsletter subscription link, and (adittedly nice) store finder map at the bottom of every page.  However, very little has been done to facilitate real communication with Games Workshop's customers.

The layout of the What's New Today Blog page seems like an afterthought.  The main body in the center is separated by the "Latest Posts" navigation to the left by a line and crowned with sales suggestions for issues of White Dwarf and Warhammer: Visions while the suggested products on the right are not separated. It's very easy to miss the fact that there is a navigation (or a Flickr pool) at all.  This page is in desparate need of a redesign as it is, from what I can tell, the only real web presence Games Workshop has to communicate on a fundamental level with their customers besides the YouTube channel.  Even the placement of the link to the blog, although at the top of the page, seems a little like an afterthought.  It's just a picture of the White Dwarf with no visual queue that it's a link until you hover over it and no real explanation as to where it leads.

I almost feel as if Games Workshop needs to separate What's New Today and the FAQs from their sales sites and just merge them together with links to their YouTube content on a separate customer communication site of some kind.  A Games Workshop Fan Portal of some kind would be an awesome addition to their web presence.

Independent Retailers

My local store owner told me that the website has also been very good for them.  It allows them to make orders for almost anything and many of the things that were once site exclusives are now available to independent retailers at a reasonable rate. I'm glad for this because, in the past, that relationship has been a bit rocky.

Other Quick Notes

I have a few other quick notes as I am running out of time to post this:

  • The shopping cart is very nice.  It's clean and easy to manage.  I wish there was a way to export the cart and for some reason there is still a weird maximum of 10 available to purchase multiple items.  I can't see a way of ordering more than ten of anything.
  • Really impressive mobile experience.  I'm very glad Games Workshop didn't spare the expense of making sure their site was built with responsive design in mind.
  • The H tags on titles are a bit wonky.  They seem to be set up to have the lower-numbered tags on the top headings and the higher-numbered ones on the bottom.  This is often how they are laid out, but not always.  Case in point are the headings on the front page postage stamp features.  The "Astra Militarum" heading above the Taurox tank is an <h2/> while the "Taurox" heading is an <h3/>.  Since the Taurox is the only thing in that box, and it does appear to be the focus of the section, not the Astra Militarum, the product title should probably have been in the <h2/> tag. That's a subjective opinion, though.
  • The horizon lines on the products are a bit weird.  They almost make the background images look broken.  I'd probably had the fade start at the bottom and work its way up into white rather than fading back into gray and a hard horizon.  That's just a design opinion on my part, though.
  • Site explodes in IE7.  Good.  It should, in my opinion. Let's be honest, Games Workshop's target market probably don't use IE7.  Having said that, I'd have put a message to IE7 users that they should upgrade with helpful links to browsers.  
  • I like the use of repeating imagery on the site for different functions. For example, the purity seal for the Customer Service sections is pretty cool.
  • The whitespace isn't too much.  Some sites are so desperate for a clean look that they over-do it with the whitespace.  I think this site is, overall, spaced pretty well and it's easy to see what goes where and which objects refer to which products.  The only exception is the What's New Today Blog.
  • The site uses a serif font.  I'm not as afraid of serif as some other designers are, but there's something to be said for using sans-serif on titles.  For my money, I quite like the fonts chosen for this site. They fits the Games Workshop brand. Many others would disagree, however.

In Closing

Well, that got long! In summary, I really like the new Games Workshop website. I think they put a lot of effort into taking their web presence into the 21st century.  In all, great job.  I just hope they work on their customer relations and product support in the near future.

I hope this helps folks understand the site a little better. Again, I don't have any insider information.  I just wanted to get a slightly informed and (mostly) positive viewpoint out there.