The Colour of Conversion

Although there are many factors to consider when persuading visitors to your website to convert, as far as visual cues go, they don’t get much bigger than the use of colour. Because of this, colour psychology plays a starring role in the world of marketing. In this post, I want to specifically talk about a website’s colour scheme, including buttons, graphics and themes.

First, a little science

Colour psychology is the study of the effect colour has on human behaviour. Put (very) simply, when our eyes register a colour, electrical impulses are passed through the brain to the hypothalamus and the pituitary gland. These are responsible for the release of hormones which govern our emotions and behaviour. Different colours will dispense a different hormone cocktail and will determine how we feel when we see certain colours.

Red

Passion, Desire, Excitement, Energetic & Attention-Grabbing

If we’re talking passion and excitement, it’s unsurprising to see it used to highlight important calls to action. It would be kinda crazy if Café Rouge didn’t use the colour on their site, but their choice to go full on red background takes this idea further:

Cafe Rouge - Red Homepage

Passionate about French Food

Another red brand, Coca Cola use their signature red to accent the homepage and emphasise calls to action:

Coca Cola - Red Homepage

Attention-Grabbing CTAs

Blue

Peaceful, Calm, Honest, Loyal & Devoted

With connotations such as those above, it’s no wonder we often see this colour used:

Tesco - Blue Homepage

A peaceful and calm shopping experience?

Facebook - Blue Homepage

Honesty and devotion… very clever

Yellow

Confidence, Expression, Fun, Happiness & Enthusiasm

Wow – why wouldn’t you make your website yellow?

Lipton - Yellow Homepage

Exciting and fresh – tea makes you happy!

Somersby - Yellow Homepage

A little less garish, the pale yellow background actually serves to compliment the green in the brand colours.

So, should I go tell my boss now?

Ok. Realistically, I didn’t write this post to instigate a company rebrand or a change to the company’s style guide! So instead, consider these pointers for introducing colours to your site to highlight calls to action and to draw visitors’ attention to the important parts of your website. Guide them through the user journey with colour-coded sign posts.

Hallock’s study on colour preferences revealed that 35% of women said their favourite colour was blue, 23% said purple and 14% said green.

Rather an obvious example, but the Woman’s Weekly website uses blue, purple and accents of green on their homepage:

Woman's Weekly - Blue, Purple, Green Homepage

The calls to action on this page (such as “VISIT” and “Sign up”) use a darker shade of the pink/purple used in the logo. Using analog colours (colours next to one another on the colour wheel) is a great way of drawing a visitor’s eye to an important element on a page without introducing a brand new colour and potentially making a page feel a bit busy.

This same study revealed that 57% of men also favoured blue followed by 14% saying green and 9% saying black.

The men’s fashion site Style Pilot boasts a blue/green homepage with accents of black:

StylePilot - Blue& Green, Black Homeapge

However in this example, a complimentary colour (these are colours directly opposite one another on the colour wheel) has been used for the “START HERE” button – and it really stands out.

Saturation

Von Restorff’s Isolation Effect concludes items are more memorable if they stand out. This is why we often find saturated colours are used for links, buttons and any other important elements on a page. They will leap out at a visitor and therefore encourage engagement:

Ticket Master’s Red ButtonTicket Master - Red Button

Apple Store’s Green ButtonApple Store - Green Button

VistaPrint’s Blue Button

Vista Print - Blue Button

Whitespace

Perhaps the colour most over-looked in web design; white is such a useful colour when it comes to layout. Using whitespace can improve legibility, it can group relevant information and it can help direct attention to that all important call to action. The best example I can offer?

Google - The Perfect Whitespace Example

There is an enormous amount of literature out there on the meanings of colour and the “right” way to use it. The thing is, you’re never really going to know which ones will work best on your buttons and links unless you test them. And I’m not talking about going with a hunch about what you think will convert better. Channel your inner Eisenberg and instead ask yourself the question: “Why would a visitor click on one button versus the other?” and consider complimentary and contrasting colours according to your website’s style and branding.

If you’ve done any testing on your site’s buttons, share your findings in the comments. We love a success story at High Position!

CRO Site of the Week – Grovemade

This week Richard Price runs his eye over Grovemade and explains what makes them a worthy winner of High Position’s CRO Site of the Week. Like always, winners of this prestigious award will be notified by HP’s Head of CRO, James Root via twitter: @RootToMarket and be rewarded for their excellence with something from the CRO Drawer. Nominations can also be tweeted so please share and get involved!

Grovemade_Logo

What does the site do?

Grovemade offers a selection of high quality cases, covers and docks for Apple and general notebook products. What distinguishes Grovemade from other, similar sellers is the high quality of individual craftsmanship that goes into every product.

What does the site say they do?

“We are a family of creators – close knit and a little crazy – handcrafting goods at out workshop in Portland, Oregon. We love what we do, and when work matters, it just keeps getting better. Our process is uncompromising, because we believe every product is a representation of who we are.”

What does the site do well?

  • It would be no exaggeration to say that the imagery is beautiful. The homepage is a real joy and makes for a very engaging landing page
  • The minimalist design speaks to the niche, exclusive quality of the products on offer
  • Although not immediately obvious, the entirety of the homepage is essentially a call to action. Clicking anywhere on the image takes you to the respective product listing page

Grovemade_Homepage

  • The ‘Collections’ page again makes fantastic use of imagery to categorise products by their respective materials and themes
  • This page also makes use of some clear and consistent calls to action

Grovemade Collections

  • Attractive, simple and easily navigable product listing pages

Grovemade_Product_Listing

  • Clean, concise product pages that again make full use of imagery while also offering relevant information such as the materials involved in construction and the exact dimensions of the product
  • There’s no zoom function but the selection of images allows you to view different angles of the product as well as different states of use which can be helpful for things like phone and Ipad cases

Grovemade_Product_Page

Clean and crisp product pages with a real emphasis on the product itself

  • I do like a well implemented blog and Grovemade is another website that makes excellent use of consistent, relevant blog content to supplement and enhance the website’s presence
  • There is some excellent social interaction, with activity across the site’s Facebook, Twitter, Instagram and Pinterest pages

What does the site not do so well?

  • I’m not a fan of the grey font/white background combination as it’s not particularly engaging and at times can be hard to read. This is especially true on product pages, where important product information isn’t emphasised and be easily overlooked – TEST IT!

Grovemade_Grey_Font

  • Grovemade have worked with some huge companies like Nike, Google and Youtube. Unfortunately this information is hidden away at the bottom of the corporate page and there are no case studies or testimonials to support this. Moving and adding this content to a more prominent area of the site could really help sell the Grovemade brand to users – TEST IT!

Grovemade_Clients

This client list is pretty impressive so it’s a shame it’s so hard to find and there isn’t any more information!

  • The page footer feels like a real missed opportunity. Admittedly not every user will scroll down this far but it can be a good place to add some additional calls to action and relevant links – TEST IT!

Grovemade_Bottom_Page

Congratulations Grovemade! Your site makes fantastic use of imagery, which makes for a welcoming and very professional shopping experience. With a couple of CRO tests I think you could make things even more engaging and add to the great content you already have.

LIKE WHAT YOU’VE SEEN?

Go CRO

Enjoy your reward, straight from the CRO drawer!

Drawer Prizes

CRO Site of the Week: Crooked Tongues

This week High Position’s Head of CRO, James Root, takes a look at Crooked Tongues. As ever, winners of this prestigious award will receive something from the HP CRO Drawer. All winners will be notified via Twitter. Nominations can also be tweeted so please share and get involved!

crookedtongues.com

What does the site do?

Online retailer of trainers, mainly old school re-issues.

What does the site say they do?

Erm… it doesn’t say. There’s no About page.

What does the site do well?

crooked tongues homepage

  • Stunning imagery – something a lot of e-commerce sites seem to get wrong time and again. Not here though as products are beautifully showcased
  • Good use of content chunking on homepage, using the images of the sneakers to draw the eye
  • Clear and user-friendly top-level navigation, with simple drop down menus, giving the user enough options, but not too many as to over complicate

crooked tongues nav

What else does the site do well?

Inspiring site search function whereby the Free Delivery Worldwide USP image transforms to a search box once the user clicks the search icon:

crooked tongues site search

crooked tongues site search reveal

Try for yourself; it’s slick. A great use of space via innovative, uncomplicated design (hat tip to the designer!).

  • Effective use of tabs on the homepage, below the fold. Showcases products clearly, with clear options: New Shoes, Best Sellers, Sale.

crooked tongues tabs

Product Pages

  • Price, size and add to cart all bundled together and are easily readable so user runs through the cognitive buying process quickly and easily: can I afford it / is it value for money? Do they have my size? How do I add to cart and buy?

crooked tongues product page

  • Again, excellent imagery, with plenty of different pictures. Nice zoom feature with flickable images
  • Add To Wishlist capability is attractive to today’s online shopper so good to see that function as well as Tags, a familiar function adopted from blogs and Social Media, namely Twitter (hashtags) and Pinterest.

Basket and Checkout

  • Cart is cleanly designed with clear CTAs
  • A 15 minute timer is set, used as a persuasion tactic by many online retailers.

crooked tongues cart

  • The checkout has also been well thought out, with clearly defined steps
  • Sage Pay logo and the word ‘secure’ are prominent and helps to alleviate any user anxieties regarding fraud
  • Checkout As Guest feature also allows quick checkout. Users are often put off (myself included) when you have to register prior to checkout

crooked tongues checkout

What could the site do better?

  1. Would shopping cart abandonment improve if there was further instruction to put users at ease? Common anxieties at this stage of the buying process are ease and quickness of checkout, payment security and shipping costs. TEST IT!
  2. There are six steps during the checkout process; this is far too many and could easily be simplified (I have run many tests on this area for different e-commerce clients to great effect). One page checkouts often have lower abandonment rates from my experience. TEST IT!
  3. CTAs on buttons. Whilst, in my humble opinion, the buttons site-wide are effective, have the CTAs been tested? Are you doing all you can to help customers add to bag? TEST IT!

As the winner of this week’s CRO Site of the Week, Crooked Tongues win some cr@p from the CRO drawer – look out for a package in the post!

Drawer Crap

LIKE WHAT YOU’VE SEEN?

Go CRO

The Basket Case: Helping customers Add To Bag

News Flash: The shopping basket is integral to your ecommerce site.

Ok, not exactly a breaking story, but when customers select their chosen products, they need to know those selections are being tracked, keeping a running total, and that there is a place to review what they’ve chosen before moving on to pay. Econsultancy offer some good examples of the way ecommerce sites dynamically update a customer’s basket when they’ve added a product but, as you’d expect, there’s a lot more to it.

When it comes to user experience, I shy way from the term “best practice” as without testing it’s difficult to know exactly what is best for your users. UXMovement, however, offer some pointers I think are worth considering when designing buttons and test plans:

  • The more real your buttons look, the more users will know to click it
  • The key to making your buttons easy to spot is to use high contrast colours
  • Use an icon that describes the action

Now, about that last point: Icons. For example, the arrow to show a user a click will take them to the next step; the padlock to show a user the page is secure; or the humble shopping basket / bag. The latter is widely recognised online as the icon of choice when showing customers where their chosen products are being kept as they continue to browse. When shopping online, the less users have to think about HOW to order something, the more they can think about WHAT to order.

The Text Link

Maybe you don’t need an icon at all? Arguably, with many users now understanding that the top right hand corner is usually where you’d find the basket, the simple text links certainly have their place in good UX. In some instances, the products on sale don’t warrant a stylised “View Basket” and a simple running total with a link will suffice. ASOS use text:

ASOS's Bag Text

When a customer adds an item to their basket, though, the basket extends below that text and users can’t help but notice it:

ASOS's Add to Bag

After a few seconds, the box disappears and the text link updates to show the basket total:

ASOS's Bag Text

It could be that text is adequate enough so long as it’s coupled with the basket preview? You’ll only find out if that’s right for your site if you test it, of course.

The Standard Trolley

A super-simplified version of the supermarket trolley icon is used by Amazon. These guys are constantly testing and updating to ensure they’re giving their users what they want as far as the online shopping experience goes:

Amazon's Add to Bag

When an item is added to the basket, users are taken to a new page, confirming their addition, and the trolley is updated with the number of items in it. There’s no running total, though:

Amazon's Add to Bag

The Shopping Basket

High street fashion brand, River Island, has adopted a monochrome design incorporating a shopping bag in the top right. There’s no title or text to tell users “this is your basket and therefore this is where your items will be added” but using the big, bold running total next to the icon is explanation enough:

River Island's Bag Icon

The call to action on the product pages here (ADD TO BAG) makes reference to the bag icon (which makes sense as when a user clicks the button with BAG written on it, their BAG will be updated). When a product’s added, the bag updates and a little graphic appears confirming the action:

River Island's Add to Bag

New Look use a similar process, however their bag – like Amazon’s – shows the number of items, rather than the amount the customer is spending:

New Look's Add to Bag

The Branded Shopping Bag

I personally love this practice! More and more trusted retailers with an established name on the high street have adopted this method of extending their branding and bringing that in -store experience to their online one.

The White Company, my CRO Site of The Week back in Jan 2013, use a branded shopping bag icon to show their users where the basket is. With a luxury brand such as this, the packaging of their products is as much a part of the pleasure of buying as the customer service and helps emphasise the quality of the product:

The White Company's Bag

Although I’d question the presence of the SHOPPING BAG text, users only have to glance to the top corner to see their running total and the number of items in their bag. What’s more is that with a simple click they’re taken to either the basket or straight through to checkout.

Other great examples of the branded bag come from Schuh:

Schuh's Bag

This icon could maybe stand to be a little bigger and therefore clearer. However, their brown bags and acid green logo are perhaps distinctive enough get away with this teeny version.

Foot Locker:

Footlocker's Bag

What it is with the minuscule shopping bags?

And Topman:

TopMan's Bag

When you add an item to your bag here, the logo disappears and is replaced with the number of items in your bag and the BAG IS EMPTY text becomes the running total.

Taking That Branded Shopping Bag One Step Further

A company’s logo is a vital part of their brand identity. Obviously, some logos are more famous than others:

Penguin, McDonald's and Mercedes' logos

In some cases, however, part of the experience of that brand becomes as famous as the name or logo itself. Bloomingdale’s Brown Bag is a great example of this. Their packaging is so famous, that you can actually buy it.

Bloomies have, perhaps unsurprisingly, incorporated the brown bag into their online shopping experience:

Bloomgindale's Bag

Luckily, it’s a BIG Brown Bag, to fit lots of shopping in, how handy, thank you!

But they’ve taken it even further… You don’t just add an item to your bag here, oh no, you add it to your Brown Bag:

Image 11 - Bloomingdales' Add to Brown Bag

Branding #FTW!

Not every retail company with an online presence is in such an established position that the addition of their logo on a shopping bag icon will enhance the user experience. After all, mega-established brands (like Amazon) haven’t adopted this practice at all! However, an easy-to-spot link to a customer’s basket, perhaps with a basket total and a button to the checkout will all help in making the purchase process as quick and as simple for the customer as possible.

To find the “best” icon for your bag/basket/cart/bucket your best bet is to test it. But, consider the type of product you are selling and what therefore your users might expect. Like, if you’re selling tools, will you be wrapping up that claw hammer in pretty tissue paper and placing it inside a paper bag? Probably not – so maybe a hand basket will suffice. However, if you’re selling shoes or clothing, a shopping bag might hark back to the traditional in-store experience more than a trolley… although, I guess it would depend on where you shop…

 

 

CRO Site of the Week – Tokyo Laundry

This week Richard Price has an in-depth look at Tokyo Laundry and explains why they deserve to be High Position’s CRO Site of the Week. As ever, winners of this prestigious award will be notified by HP’s Head of CRO, James Root via twitter: @RootToMarket and be rewarded for their excellence with something from the CRO Drawer. Nominations can also be tweeted so please share and get involved!

Logo

What does the site do?

Tokyo Laundry offers a selection of fashion items for both men and women, with emphasis placed on how their range includes both casual and high end products. In addition, the brand is supposedly a fusion of Far Eastern typography and American collegiate styles.

What does the site say they do?

“Tokyo Laundry fuses a relaxed and casual style with an edge inspired by influences from the Far East to create a unique fashion lifestyle brand.”

“We offer a wide range of products to meet the needs of our customer’s lifestyle from casual clothing to higher end fashion. We also provide a range of accessories including belts, hats, underwear, shoes and bags.”

What does the site do well?

  • Clean and crisp design is achieved by using a sensible colour template. The white background is augmented by good font choices and in particular a red and black colour scheme that draws attention to key selling points
  • Prominent placement of unique selling points on the home page
  • Sensible implementation of social links – too often these are hidden away at the bottom of a website’s home page!

Home_page

What else does the site do well?

  • Extremely intuitive shopping experience. There are plenty of search filters that allow you to refine your search by the type of clothing, colour, size and price
  • Attractive product listing pages which include the welcome option of browsing an individual item’s different colours/designs without having to click on the item itself and go to another page

Product_lists

  • Product pages themselves disseminate information clearly and concisely and simply make for a very easy and pleasant shopping experience

Product_page

While the product pages don’t do anything radically original, they are set out very clearly and make the shopping experience much easier on the eye

  • Checkout process is extremely simple and all required information is clearly communicated
  • Checkout pages heavily emphasise how secure and safe it is to shop online with the website. It is often the fear of buying online and worries over the safety of payment details that deters some internet users from making purchases. Clear information like this can help allay those fears

Checkout_page

  • Well implemented blog content that is posted on a regular basis and more importantly is engaging and relevant to the website’s brand and products

Blog

Relevant, regular and well implemented blog content can do wonders for an e-commerce site

What does the site not do so well?

  • The size guide could be implemented in a more reactive and intuitive manner. Being presented with the sizing information for every product type for each gender is unnecessary when; for example, you are currently looking at belts! Having this information be reactive based upon the item a user is currently looking at would be helpful – TEST IT!

Size_Guide

Although the information is clearly presented, being assaulted by a wall of numbers for all product types may not be the best approach when you are on a product page. Having the pertinent information be shown depending on your product type would be more useful.

  • I feel like I’m scraping the barrel here but the gift vouchers page isn’t particularly engaging and the search filters here (particularly colour!) feel entirely unnecessary. Perhaps treating gift vouchers less like a regular product listing page and more as a way of advertising other products and the brand itself would make them more engaging – TEST IT!

Gift_vouchers

Congratulations Tokyo Laundry! Your site is clean, crisp and intuitive to use and with a couple of CRO tests I think your could make it an even more user friendly experience.

LIKE WHAT YOU’VE SEEN?

Go CROEnjoy your reward, freshly picked from James’ CRO Drawer!

Drawer Prizes

CRO Site of the Week – Last.fm

Libby Bearman takes us through this week’s CRO Site of the Week winner, Last.fm. High Position’s Head of CRO, James Root (@RootToMarket) will be rewarding their excellence with something from the CRO Drawer and giving them a shout out on Twitter. Find out why Libby believes they deserve such an award:

Last.fm - logo

WHAT DOES THE SITE DO?

Put simply, this site is a vast, online music library, recommending new music based on what you’ve already listened to.

WHAT DOES THE SITE SAY THEY DO?

“Last.fm is a music recommendation service. You use Last.fm by signing up and downloading The Scrobbler, which helps you discover more music based on the songs you play…”

“…Scrobbles mean we can deliver personalised recommendations for every single Last.fm listener, every single day. We compare what you play to the scrobbles of millions of listeners around the world, meaning your recommendations are the result of more than 43 billion scrobbles and counting.”

 WHAT DOES THE SITE DO WELL?

  • There is no mistaking what this site does when you arrive at the homepage: Simple, 3-word headline, slightly more descriptive strapline and a super-clickable Call to Action
  • The red and black colour scheme offers a bold contrast against the white background, ensuring all the important information stands our immediately
  • The images of the artists featured on the homepage are clear, eye catching and tell you how many listens they’ve had for a bit of social proof to boot

Last.fm - Homepage

  • Signing up is simple. You can use facebook, or with just three fields to complete, you can create an account. There is a CAPTCHA at the end, but at least they explain why it’s there, removing some of the frustration:

Last.fm sign-up

  • The friendly language with straightforward instructions inform you on exactly what’s coming next… and those scrobblins (the lovable lil red mascots throughout the site) are pretty great!

Last.fm - Congratulations

WHAT ELSE DOES THE SITE DO WELL?

  • The “Your Recommendations” section mirrors the enticing homepage with helpful explanations for new music you’re yet to familiarise yourself with
  • The snap shot of “Your Library” is all interactive and clickable, encouraging you to continue to explore and discover new music
  • More clear and succinct Calls to Action allow for intuitive site navigation

Last.fm - what else is good

WHAT DOES THE SITE NOT DO WELL?

  • When browsing the music page, the feeling of “spaciousness” disappears. One of the main cuplrits is most definitely due to the introduction of adverts. Whilst most users appreciate the need to advertise, the execution here is intrusive: I am not enjoying that Euromillions guy following me around while I simply browse the music catalogue – TEST IT!

Last.fm - :eave me alone

Yuck!

Yuck!

  • After loving the red/black colour scheme on the homepage and sign-ups, it’s a shame to see it diluted with a (Euromillions!) blue on the charts pages and beyond. Surely, shades of red and grey would help that sleek design carry through? – TEST IT!

Last.fm - What's with all the blue

  • And finally, there are no social links on the homepage, which is strange as Last.fm make excellent use of Twitter, Facebook, Google+ and Instagram. These can be found on the about us page, but the links aren’t particularly engaging. – TEST IT!

Congratulations Last.fm! Your site has come on leaps and bounds as far as both aethetics and usability are concerned, but I think there’s still a way to go. With some clever CRO Testing, you could be offering an even more enjoyable user experience. You get some CRO Crap from James’ drawer! #Win!

 

LIKE WHAT YOU’VE SEEN?

Go CRO

Tweet Us Your Nominations

Recently come across a fantastic website? Tweet your CRO Site of the Week nomination to @HighPositionSEO using the hashtag #CRONomination.

CRO drawer stuff

 

Web Forms – Keep it Simple, Stupid

simple

There are many barriers to conversion – quality, price, immediacy, trust, efficacy, to name but a few so the need to make it simple for a prospective customer to enquire about your services is obvious, right? RIGHT? Why then do so may online businesses get this wrong?

The obvious reason is because they don’t invest in conversion rate optimisation – or at the very least even think about the user for at least a moment. An application of a blend of web psychology and data analysis can help increase conversion rates, improve user experience and (end goal) increase sales revenue. A pleasant user experience would encourage word of mouth (or even better, social shares), enhancing branding also. And stakeholders could learn more about their target market along the way. It’s a no-brainer right?

In the past, I have examined contact forms, but here I want to look at other web form faux pas to (hopefully) emphasise the need for all online businesses to evaluate their conversion path and think about the all-important user.

Web Forms – TEST THEM!

Aside from a multitude of insurance engines that state ‘free quote’ but then capture your details after you toil through a multipage form and then state that ‘an agent will be in touch’, there are other examples of poor web forms:

British Gas offer a pain-staking six stage form with such irritating and non-essential questions as ‘middle initial’, ‘is your email address work or personal’, and ‘how long have you been living at your address?’. Don’t worry though as there are only six pages of this. It isn’t as if people have busy lives or anything.

british gas

Online Booking Forms

Pizza Express so nearly get it right with their online booking form. Simply type your location, add the date, time and how many people and ‘check availability’.

Pizza Express online booking form

You’re then offered a choice of the three nearest Pizza Express restaurants to your location. Select the restaurant then double check the date/time and input your details. All very quick and easy, but right next to the ‘Confirm my booking’ button there is a ‘back’ button. *CONVERSION CLAXON*

pizza express nuke button

What possible reasoning could there be for having a button right next to the button that you want users to press, and to boot, a button that would lose the data the user has already input? By employing a Nuke Button, you’re risking losing customers. Think about it.

Make it easy for existing customers

Huge amounts of time and investment is spent on winning business, so why give customers an excuse to take that hard-earned business elsewhere?

Let’s use an example that all of you can appreciate. Imagine you’re at home, desperate to tune in to another episode of Breaking Bad/Sons of Anarchy/House of Cards on Netflix. We’re talking the kind of TV that gets under our skin, keeps us wanting more, clucking for our next fix. But oh no, your connection is down. Damn you Virgin/Sky/BT/Internet provider! You’re gonna have to troubleshoot – or failing that, enquire about your issue to get it fixed ASAP – and you’d rather do this online now than have to phone a call centre half way across the world – or in Scotland.

Virgin Media provide a classic example of how to make it difficult for your customers. Hitting the homepage is a minefield in itself, but having found my way to the Existing Customers dropdown menu it still isn’t abundantly clear where I need to go in order to troubleshoot my issue.

Minefield - don't sell me stuff, I have a problem. Fix it fast!

Minefield – don’t sell me stuff, I have a problem. Fix it fast!

Let’s take a look at the options:

virgin existing customer

The link I need to click is actually the Service Status link, but who would think of that when they’ve lost internet connection and want to troubleshoot? Service Status? Mine is that I don’t have any service! HOW DO I FIX IT, I NEED MY SONS OF ANARCHY FIX! No thought for the user whatsoever. Keep it simple, stupid.

To see an example of troubleshooting that works, look at Sky. It’s important to stress that having worked for BSkyB, I’m no fan of Rupert Murdoch’s corporation so there is no bias here whatsoever, but you gotta give credit where credit is due.


LIKE WHAT YOU’VE SEEN?

Go CRO

 

CRO Site of the Week – Saucony

This week High Position’s CRO/UX Expert Libby UX Vixen Bearman takes a look at Saucony’s microsite for the Kinvara 3 running shoe. As the winners of this award, they will be notified via Twitter by High Position Head of CRO, James Root (@RootToMarket) and will receive something from the coveted CRO Drawer. What did they do to deserve such an accolade? Read on… 

Saucony Logo

Saucony Kinvara 3

WHAT DOES THE SITE DO?

This is the microsite for Saucony’s “Kinvara 3”, one of their most popular running shoes. In a nutshell, this parallax, story-telling website offers an overview and breakdown of the technology behind the shoe.

WHAT DOES THE SITE SAY THEY DO?

“At Saucony, we exist for runners. Runners inspire us, bring us new ideas, force us to be better. They drive our design and engineering. They keep us competitive. They keep us hungry. They keep us honest.”…

“At Saucony, a good day is when we get to run. A great day is when we inspire someone else to run.”

WHAT DOES THE SITE DO WELL?

  • Short, punchy headline including a memorable slogan at the beginning of the “journey”
  • Vivid, acid green background, while eye-catching, actually harmonises with the product images to help them pop out of the page
  • Using red for CTAs (green’s complimentary colour) means users just can’t miss ‘em

K3 - Homepage

  • The smooth animation into the first chapter of this story takes you to a predominantly grey backdrop with the flexible outer of the shoe taking pride of place in the centre of the screen.
  • Interactive elements on the page are highlighted using the familiar green from the previous page…

Saucony Kin3

… and offer either more detailed explanations about the shoe or bold images

K3 - Sketch

WHAT ELSE DOES THE SITE DO WELL?

  • Each step through the site brings with it more detail, more images and snappy facts about the heel-to-toe drop and weight of the shoe, delivering a wealth of information in easily digestible chunks
  • Quotes from experts involved in the project help validate the product and again provides the user with more information without overloading them with jargon
  • The navigation on the right hand side of the screen means you can skip back and forth through steps without it taking away from the user experience

K3 - more information

 WHAT DOES THE SITE NOT DO WELL?

  • The idea of the parallax effect is to fake a 3D website. The Kinvara 3 site’s interactive elements move with the mouse… away from the mouse… and I actually think it makes them more difficult to interact with. Not impossible, but by making those elements “move away” instead of “pop out” it’s clunkier than it should be. – TEST IT!
  • That handy navigation on the right disappears during the final stages of the journey. Once you’re choosing your colour, you’ve no choice but to move to a sign-up page, and then start all over again. By keeping the navigation in place, users can continue to hop around and enjoy the ride – TEST IT!

K3 - missing nav

This isn’t so much a test recommendation, but it is one of my pet hates on a website: Bad Grammar :(

Saucony Grammar Police

No such thing as mens

see?

*and breathe*

Huge congratulations, Saucony! The Kinvara 3 site is eye catching, fun to use and above all, engaging. You get some stuff from the CRO Drawer! #Win!

 

LIKE WHAT YOU’VE SEEN?

Go CRO

You can tweet your CRO Site of the Week nominations to @HighPositionSEO using the hashtag #CRONomination. We’d love to hear from anyone who’s come across a particularly fantastic website!

Drawer Crap

CRO Site of the Week – Qwertee

Every week High Position’s CRO/UX team analyse a website that has stood out from the crowd. We like websites that are easy to use and encompass innovative features to enhance and enrich user experience – this week Richard Price runs the rule over Qwertee. Winners of the prestigious CRO Site Of The Week award will receive something from the HP CRO Drawer. All winners will be notified by High Position Head of CRO, James Root via twitter: @RootToMarket. Nominations can also be tweeted so please share and get involved!

Logo

What does the site do?

Sells printed t shirts for an initial limited 24 hour period, based on designs referencing a range of pop culture from a variety of independent artists and designers.

What does the site say they do?

“When it comes to tee shirts here at Qwertee we offer “One Tee Shirt, One Day Only, One Incredible Price”. We work with some of the finest artists/designers in the world to bring you an amazing new design every day of the year.”

What does the site do well?

  • Homepage very clearly advertises the main product with clear pricing and how to buy
  • Prominent links underneath main products link to each artist’s catalogue of designs where users can vote for their favourites in the hopes they will be the next ones to be printed
  • Unique use of a timer that tracks how long until a new daily design becomes available and when the current one expires. For reference this is at 11pm every day!
  • Clear site navigation through drop down menus across the top of the home page

Home_page

What else does the site do well?

  • Encourages user interaction with an ongoing voting process and an active forum where users can discuss designs and even swap shirts if they have missed a previous design

Voting

  • Very simple checkout process with all stages of the transaction clearly separated and no obligation to sign up to the website or make an account

Checkout

  • Excellent social integration with extremely active Facebook, Twitter, G+, Pinterest and Tumblr pages that further encourage user interaction through offers and competitions

Social

What does the site not do so well?

  • Big missed opportunity with the website’s blog. Considering the level of user interaction the site encourages, in the past two years there have only been two blog posts. Having lots of content here would help grow the brand and community even more – TEST IT!

Blog

  • No easy way to browse through previous designs or filter new designs when voting – just a single page that you have to scroll through. Adding a way to refine your search on these pages by genre, date rage, artist or even colour would be helpful – TEST IT!

Previous_Tees

  • Rather muted colour design with several shades of grey being the primary colours. Helps to highlight important information but might be more engaging in a more diverse colour scheme – TEST IT!
  • Size and measurement guide is hidden away in the Help & FAQ section. Would be much more helpful if it were placed on the homepage alongside the shirts themselves – TEST IT!

Congratulations Qwertee your clean and simple design, easy checkout process and excellent social interaction make for a unique and engaging shopping experience. With CRO testing could you make your website even more engaging and get even more sales?

 

LIKE WHAT YOU’VE SEEN?

Go CRO

As the winner of this week’s CRO Site of the Week, you’ve won yourself some stuff from the CRO drawer – look out for a package in the post.

Drawer Crap

CRO Site of the Week: Moz

This week High Position’s Head of CRO, James Root, takes a look at Moz. As ever, winners of this prestigious award will receive something from the HP CRO Drawer. All winners will be notified via twitter. Nominations can also be tweeted so please share and get involved!

Moz.com

What does the site do?

Moz – provides SEO tools. Digital Marketing and Analytics tools and resources for all things inbound.

What does the site say they do?

“Moz started up in 2004, and we’ve been on an epic ride ever since. From our beginnings as an SEO consulting company to launching the first Pro app in 2007, we’ve tried to stay true to our core beliefs—TAGFEE—and to deliver an exceptional experience for our community and subscribers. We owe a huge thanks to our community for joining us on this awesome journey, and we hope that you’ll continue to be a part of our story.

We just launched our Beta of Moz Analytics, which is our most exciting product yet. But the best is yet to come. Check out the timeline below to learn more about our past and to get excited about where we’re heading in the future!”

What does the site do well?

Homepage

  • Firstly, Moz rebranded so this is noted on the homepage with a link to a blog post by Rand Fishkin, detailing the rebrand
  • Value proposition is clear, using positive words like ‘better’, ‘will help you’, : ‘THERE IS A BETTER WAY TO DO MARKETING. Your customers deserve it. We help you do it.
  • Engaging snapshot of product is unmissable
  • Two clear buttons providing two options for users; ‘Free 30 day trial’ –> clicks through to a web form OR ‘Take a tour of the software’ provides an in-depth look at the product.

Moz homepage

  • Below the fold is a more subtle link to an informative showcase video.
  • There are three chunks of content with buttons inviting users to ‘Explore our Tools’; ‘Explore our Resources’ or ‘Explore our Community’. CRO ALERT - These buttons are all identical in terms of aesthetics – would they benefit from being different colours? Test it via MVT!

Moz homepage footer

What else the site does well…

The Free Trial page is delightfully laid out:

  • Clear instruction – ‘Start your free trial in three easy steps!’ and the user is left with no confusion regarding the price – ‘Moz Analytics is free for 30 days, then just $99/month.’
  • The web form contains large and inviting field input areas and straightforward billing options. There is also a secure payment verification badge to relay any fraud anxieties that often cause users to hesitate rather than buy.
  • Clear FAQs are present on the same page, and are sticky so remain on the all-important right hand side of the page when scrolling.

Moz homepage signup form

  • Also, there is an excellent CTA on the form submit button – ‘Start my Free 30-Day Trial’, although I would love to run a test on colour and size – and indeed CTA – on this button to make further improvements.

Moz submit button

Another area that would be great to test and improve is the number of web form fields. Having run many similar and hugely successful tests in the past, I would be confident that are carefully considered test variation would increase conversion rate of signups  - amalgamate first and last name fields and add in a postcode finder function to increase usability speed further are just two elements that would make for an interesting test.

Products Page

  • Effortlessly effective nav displaying clear links to Tour, Pricing, Why Moz and Tools and Data. visible link to excellent video about Moz and showcasing the product effectively.
  • It’s human nature to always ask ‘what’s in it for me?’ Again, Moz answer this with a fantastic value proposition: ‘The only marketing analytics software that gives you all your inbound marketing data in one place, beautiful data visualizations over time with custom reporting, competitive insights to help with research, and actionable recommendations to improve your performance.’

  • Clear Start My Free Trial button – you can’t miss it, yet it isn’t offensive and is incredibly clickable.

Moz products page

  • Scrolling on this page – and indeed this site – is a delight as the informative content is displayed beautifully, with texture, colour and graphics that sells itself in its best light.

Moz products page scroll

  • The payout line is so simple, yet so clever: Welcome to Better Marketing. Welcome to Moz with the user once again presented with the Start My Free 30-Day Trial button and a link to the Take The Tour page

Take The Tour page

The Tour page showcases the product in an innovative and ingenious way that very few websites can execute.

Moz tour page

  • The 3D imaging of the page as a physical object allows the user to buy into the notion that this is a ‘thing’ that they are buying, not a bit of software that they may use – at least that’s my perception of it.
  • The map pins provide further detail and a close-up of the product in a simple, yet beautiful way
  • The left hand menu is clear and clickable

What could the site do better?

At first glance, not a lot! But there are a multitude of tests that could improve conversion further, including the aforementioned button tests and web form test. There are no visible signs that CRO is taking place, so get testing – or better still, send for an expert. Ahem…

As the winner of this week’s CRO Site of the Week, Moz have won some cr@p from the CRO drawer – look out for a package in the post!

Drawer Crap

LIKE WHAT YOU’VE SEEN?

Go CRO