Website Design Analaysis: Polaroid

2017, gone in a snapshot, well, near enough…just enough time to squeeze in another website review. Where before we looked at websites with a focus purely on analysing the design, I’ll be reviewing uk.polaroidoriginals.com a little bit further, considering user experience and functionality.

Let’s start with the most logical starting point, the homepage. Originals use deliberate lazy loading animation to great effect. Now, there is the argument that as soon as you land on a homepage, you should be able to instantly navigate the site and see everything you need. The animation used on the Originals homepage is not only on brand and unique but instant. It allows the whole page to load and also captivates the attention of the user. Sure, if this was a static loading image, it would still catch your eye, but movement adds that little bit of detail and intrigues the user to stick around and see what happens. As a static image, the Polaroid camera becomes the key and main focus of this hero slider. However, when implemented into this animation, Polaroid Originals are allowed to reiterate their brand, and then push one of their products to the front door of their website. These 2 features were always going to be better than a branded slide linking to an ‘About’ page or a purely product based slide linking through to a product page. Simply put, they’re killing two birds with one stone.

Below this main image, and below the page fold, sits 3 call to actions. Slick, modern, crisp sans serif type is used to capture these boxes, which use images and a coloured overlay as a background. There is no denying the fact that these are quite simple, but they work and are further enhanced with implement functionality in the form of hover states. Check out the GIF below:

The gentle fade and slide in animation of the text is aesthetically pleasing to the designer’s (and hopefully the general user’s) eye. Looking at this from a different perspective, you can quite clearly see the time and effort that has gone into making these elements function as they do. If you’re looking for reassurance, a company that has invested heavily in their website, has likely invested heavily in their products. The site generates a general look and feel for the brand.

Polaroid Originals branding is dominated by the coloured spectrum, either present in their logo. This branding is reinforced through colour choices and imagery. For example, if their logo was simply black and white, it is highly likely that the colour brightly coloured images will look out of place, causing the homepage, and the site to feel disjointed.

While the bright colours, modern typeface, clean and spacious design make the design feel current, it works rather well with Originals retro style products, something not always easily achieved. You could also consider the spectrum brand to be quite retro and potentially hippy, with a well-known spectrum being a resounding factor on the cover of Pink Floyd’s ‘The Dark Side of the Moon’.

As you slide down the Polaroid Originals homepage you come across what tends to be a boring yet effective feature in a product feed (or carousel). Originals ‘Most Wanted’ feed is anything but boring, it’s unique and ‘original’ if you pardon the pun.

A trendy and considered ‘Most Wanted’ heading sits left aligned in the confines of the page, with a clean text link sitting beneath. However, the product feed, which uses cutout images of the products pushes the right boundary of the page, in other terms it gets cut-off. But don’t fret, a ‘>’ right arrow allows the user to scroll across a select few products. Even how this works is… I’m going to use a non-designery term, cool. With the size of this feed, it feels like the whole page, save for the header is flicked across to the left as the far right product (in the screenshot above) and two more products take centre stage.

There is often the argument to make features smaller on a website, and reduce the amount of scrolling a user must do. However, the complete opposite works for originals. Content is legible and given room to breath with that ever effective white space. The site’s designers and developers have divided the page up into segments through the use of white space, and the size of the content. This effectively means that each scroll a user makes, is in theory one segment, or at least, it has that kind of feel to it, vertical carousel-esque.

I’ll stop myself before I go too heavy on the raving about how good this site is. The design of the newsletter signup popup doesn’t feel very considered. With all the bright colours and white on the site, this black lightbox comes across quite harsh, as shown below. It feels out of place, and the animation of it appearing could have been better. I would have expected something similar to the load of the homepage image, and am sure a more on brand solution could have been found.

On a more positive note, while the designer is responsible for the layout and styling, designs can only be static. That’s where the developer comes in. Polaroid Originals is anything but static.

Above, I’ve shown another screenshot from the homepage. The background for this ‘Magazine’ segment does not have a default colour. This is determined by whatever article is listed first, hovering over different articles not only moves the selected article, clearly showing what you’re about to select, but also changes the background colour of the segment. This isn’t necessarily needed, but it is a nice to have and further portrays the effort gone into making this site. It’s also going to ‘please’ a lot of creative people, which is great, as you’re expecting photographers and the like to be just that.

In terms of other functionality, the site works to perfection and has a very responsive design, all the links work, hover states are effective and it is evident that it has gone through vigorous testing.

Is there anything as too much functionality? Well, yes. While I’ve been praising the considered hover states throughout the site, one of the pages goes over the top. Check out the GIF I captured below showing how the hover states affect that particular segment of the website.

This should really come with a photosensitive epilepsy warning. Hovering over each box changes not only the box colour, but the colour of the background and other boxes. I can’t fault the layout or the use of brand colours, but this does become very overpowering.

While I’m on the lows, have a look at the image below, taken from the store locator page.

What the hell is this? Seriously Polaroid Originals! Fair enough this a store locator page and does what it needs to do, but with all the effort gone into the rest of the site, why’d you have to chuck a Google Map in? Considering all of the stores are clustered in the Massachusetts and New York states of America, some time could have gone into designing a really nice and personalised map page. With the branding they’ve got and the functionality throughout the rest of the site, I’m actually disappointed by this page.

Let’s forget about this for now, and move onto something worth talking about.

Moving on to another page, the image above shows one of the product category pages. At first the category name is partly hidden, leaving it like this is quite a unique and trendy style, however, this is only a default. Hovering over the main image, which you can’t avoid if you wish to scroll down the page, pops the text up from behind the yellow banner, and it becomes perfectly legible.

Below this sits another product feed, but in this case, there are only 3 products available, meaning this feature sits cleanly on the page and doesn’t require a carousel.  Then below this, we come across something brand new to me. At first, you think they might be links, but you’re wrong. Each one is actually a carousel of sorts, allowing you to click through 3 images, check an example out below.

Now you’re lying if you don’t think this little gallery is pretty snazzy.

Moving on from the design and build of the site, we can now focus on the user experience and user journey. What’s the reason for a user to come to the site? The majority of users will be looking to A: purchase a particular product, or B: just be interested in finding out more about a product or a range of products. The homepage is instantly directing you through to a product, their newest one, which they want to promote and drive sales on. There are also the 3 category call to actions below this that also direct users further into the site. The product carousel also does the trick. And for those of us that are too lazy to scroll, or think we know instantly where everything will be located, we have category links in the header. A familiar search icon is also present, which actually takes the user through to a unique search page. Often with search features and filtering, an ‘apply’ or ‘run search’ button has to be clicked. On Polaroid Originals, you only need to start typing for product results to show and filter down as you continue to enter your search term.

Originals have also included a drop-down menu, using the normally mobile-based ‘burger icon’. From here links to key pages can be found, it’s the top-level navigation.

The menu also includes two featured categories and a place for users to sign into their account.

Overall, Polaroid Originals is a very well contained and structured site. While certain categories are pushed and featured, a main shop page can still be reached allowing users to explore all of the products they have to offer with ease. Functionality, I can’t really fault, apart from those few hiccups I’ve picked up on, and in terms of the design, this one is definitely going in the ‘Inspiration folder bookmark’ we’ve all got in our browser. No? Just me? The punchy branding, retro colours, slick typography and general use of spacing and imagery should leave you in awe.

All that remains for me to say is: Well done Polaroid Originals. I’ve fallen head over heels for your website, and your cameras are rather snazzy too.