CRO Site of the Week – LUSH

This week, High Position’s “UX Vixen”, Libby Bearman has nominated LUSH as her CRO Site of the Week. As this week’s winners, they’ll be notified of their award via twitter, and will be sent something from the HP CRO Drawer – talk about lucky!

If you’ve come across a fantastic user experience, you can tweet your nomination to @HighPositionSEO using #CRONomination

Lush Logo

WHAT DOES THE SITE DO?

This is an ecommerce site selling an extensive range of cosmetics; from bath salts, to make up to perfumes.

WHAT DOES THE SITE SAY THEY DO?

“Fresh Handmade Cosmetics”

 WHAT DOES THE SITE DO WELL?

  • When the page loads, that huge image of the featured collection is the first thing you see. It’s attractive, eye-catching and the CTA is enticing
  • The brand’s monochrome colour scheme is used through the top level navigation and serves to show how easy it is to move around the site and therefore find what you’re looking for
  • More attractive product images are revealed as a you scroll, and the star ratings, cute descriptions and reviews all encourage click-through
  • It’s not just products the homepage showcases, news, articles and interesting facts about their ingredients all have a mention here with an album/mood-board kind of appearance a la the ever-popular Pinterest

Lush Homepage

  • The category pages follow the same theme as the homepage with a large feature image followed by more high-quality images and snippets of information peppered through the products on offer
  • The product pages, although similar, use a video in place of the feature image. I’ve moaned about banners, slider and animation before, and my opinion on the matter hasn’t been changed in light of seeing LUSH’s offering, but as a “How To”, I think a video is a nice touch
  • The friendly-but-informative product descriptions are cute and helpful, the product image is clear and scrolling reveals detailed ingredients listings and reviews with star-ratings for persuasive Social Proof

 Lush Product Page Example

WHAT ELSE DOES THE SITE DO WELL?

  • Part of the lure of LUSH products is the fact that they are not tested on animals and are ethically sound (they use human volunteers and sell palm free soap to help protect the orangutan). They’re also deeply involved in a lot of charity work in the form of donations and raising awareness. Some of these important USPs are communicated through on-brand icons in the site’s footer:

Lush's USPs

  • The “Add to Basket” overlay at the top of the product pages is highlighted when you mouse-over, and in adding it, you’re taken to a new page with a clear “added to your basket” message, so you’re in no doubt you’ve done it
  • Although you’re not given the opportunity to checkout as a guest, moving through the order form is quick with large form-fields and a helpful graphic at the top of the page so you know where you’re at in the buying process. There are helpful notes throughout and the order summry spells out the purchase

Lush's Checkout - Stage 2

WHAT DOES THE SITE NOT DO WELL?

  • Would more visitors be inclined to purchase if they didn’t have to create an account? Adding a “Chekout as Guest” option could capture those who’d otherwise abandon their basket – TEST IT!
  • That £3.95 is pretty steep for a delivery charge if you’re only spending a tenner on one product. Could LUSH offer a “collect in store for free” option so customers can browse online at their leisure but nip in on their lunch break to pick up their order? – TEST IT!
  • As I mentioned before, LUSH are famed for their charity work and animal-friendly vegetarian recipes. There’s no “About Us” section to really push this information to new potential customers and you have to scroll aaallllll the way to the bottom of the homepage to find their “Charity Support” feature. Maybe those icons in the footer could be utilised further up the page to link through to more information – TEST IT!
  • I am all for a responsive site, and the design of Lush’s site screams “mobile optimised”… but is it right for desktop? The higgeldy-piggeldy nature of the products and features can, at times, look a bit disjointed, but works so well on a mobile screen. Can anything be done to neaten-up the desktop version of the site? – TEST IT!

Lush - Mobile v. Desktop 

Congratulations, Lush, there are some fantastic elements to the website, and so you win something from the CRO Drawer! The language used helps communicate brand message without being sales-y and pushy, just informative and helpful - and those reviews mean your customers are getting real-world feedback too!

CRO Testing would help further enhance the user experience, especially on desktop, and promote wholesome and guilt-free pampering.

If you Test it; they will come!

CRO Drawer Prizes

Just look at all this crap!

The Importance of Contact Pages

It’s surprising just how often contact pages are overlooked when it comes to creating an interesting, user friendly website experience. There’s nothing more frustrating than spending time browsing an otherwise great website, only to find either a complete lack of contact information or a poorly designed and uninspiring contact page that actively discourages you from wanting to get in touch.

My colleague James Root has previously discussed web forms and the best practice when it comes to implementing these on your website. Considering web forms are often an integral aspect of any contact page, the advice to keep it simple and avoid giving the user a reason to not engage is sound and relevant here.

After all, if your website is your shop window then your contact page is most certainly your customer service desk and you want this to be as inviting and easy to use as possible! User engagement is key and what could be better than influencing more people to want to actively talk to you about your product or service?

Is Everyone Else Doing It Right Then?

The short answer is ‘no’ and one of the more interesting things about this is that even the biggest brands in the world can sometimes neglect their contact pages. Honda’s UK website is well designed and user friendly and we also know their pedigree when it comes to creativity. Remember some of the great TV ads they’ve come up with over the years? You’ll likely remember this one; it’s a particular favourite of mine:

It wouldn’t be unfair to assume that the same level of creativity would extend to all areas of their website design…

Honda

…not exactly the most engaging page you’ll see today right? Imagine if they had a contact page as engaging as their TV ads. Now that would make me want to get in touch!

Five Great Contact Page Templates

In Honda’s defence they do have a lot of information to communicate, and people will already be familiar with their brand and product. Their focus is to communicate as much information as possible, with the expectation being that people will already want to speak to them without any bells or whistles being necessary.

So, if you’re not an internationally recognised car manufacturer how can you ensure people will want to pick up the phone or fill in a form to get in contact with you? Having browsed some of the more interesting and original contact pages across the internet, I’ve noticed 5 basic designs which seem to be prevalent and have listed a couple of examples of each to give you some inspiration when it comes to your own contact page.

Keeping It Simple

People often like to say that less is more and when it comes to contact pages this has a certain truth to it. Making your design as clean and simple as possible makes it easy for the user to identify the key content on the page and put them at ease about making an enquiry or call. If they see the information presented as straightforwardly as possible then it makes the entire process a quick and hassle-free affair.

Step2reality

Marie_Catrib's

Step2reality and Marie Catrib’s really embrace this philosophy, with very simple but attractive contact pages. The required information is kept to an absolute minimum and looking at this even the most internet averse person shouldn’t have any problems firing off a quick enquiry to either of these websites.

Mapping Everything Out

Not just content with listing their physical addresses, many websites are now incorporating Google maps (or a variation of) in their contact pages so that you know exactly where to find them. This isn’t always strictly necessary but it makes for an interesting and relevant image that can have pride of place on the page. The following two websites have gone a little further with their map implementation:

Page9

Page9 haven’t done anything revolutionary here but having the entirety of the background a shot from Google Maps showing their location is a good way to implement the content and works well with the website’s minimalist, white design. The additional contact information is easily found on the banner to the left making the overall page engaging but still easy to use.

Buffalo

First and foremost, the contact page for Built by Buffalo is laid out very well and manages to communicate a lot of information without it being overwhelming or look cluttered. Additionally we can see that they have included their own custom built map, showing their location. Ah but what are those other heart shaped pop ups you can see? In a great move, Buffalo have also included links to other local businesses like coffee shops and restaurants on their own contact page. Not only does this help to liven the map up and make it more useful, it adds a fun and personal touch to the page and ensures that even at a basic level you’re getting a positive impression of Buffalo as a company.

Making It Personal

Despite what people may think, adding a personal touch to things can really make the world of difference. A greeting here or personalised message there may not seem like much but I know from experience that these small touches make it seem like a company is going that extra mile for me and that is something we can all appreciate.

Littlelines

Littlelines benefit from a fairly straightforward contact page in general but their prominent message at the top of page, saying they “want to hear from you” helps encourage the user to make an enquiry. Further down the page, the knowledge that your message will go straight to the company’s founder is additional assurance that your enquiry will be taken seriously.

Mixd

Once again Mixd benefit from a concise and well designed contact page in general. So where’s the additional persuasion? How about a big sign in capital letters saying “HELLO… we would love to hear from you” at the top of the page? Again this assures the user that if they were to make an enquiry it would be taken seriously and treated with respect. Not something we can say of all companies!

Getting A Bit Arty

Usability is one thing but when it’s married with a unique, artistic design then it’s hard to not want to engage (if the design works of course). Being something of a Neanderthal when it comes to appreciating art I won’t comment on what constitutes great artistic design but the two examples I’ve included are both easy to use and easy on the eye:

Lionways

Lionways’ contact page is very much in keeping with their website design and having the contact form look like a post card helps to integrate it into the overall design in a natural way while still providing you with all the relevant information you need. It helps that everything looks great in a classy, retro style.

Ultranoir

There are certain expectations that come with a name that includes the word “noir” and Ultranoir’s contact page doesn’t disappoint in this respect. Everything from the font to the imagery has a clear sense of theme and style and it helps that the contact form is well integrated and easy to use.

Thinking Outside The…..Square Receptacle

True innovation is difficult to achieve in many industries (and subheadings!) and making something as seemingly mundane as a contact page creative in both its design and execution is very difficult indeed. Like anything, creating something entirely different and fresh is where the real challenge lies and there are no hard and fast rules as to how to do this with your contact information. All I can do is show off two examples of contact pages that do things a little differently than everyone else:

Pixel_Wrapped

At first glance Pixel Wrapped’s contact page is clean and simple to use but hardly seems innovative. What I love is that by adding something as small as animating the keys on the typewriter to reflect your keystrokes in the entry form everything suddenly becomes much more exciting. Not only are you making an enquiry with the website but you’re also directly interacting with a piece of their content. Go ahead and give it a try, it has a surprisingly tactile appeal to it!

Wing_Cheng

Wing Cheng’s entire website is designed as the fold out pages of a book, with the contact form being the final page before getting to the “book’s” back cover. I can’t say I’m a huge fan of having the entire website’s content as a long, scrolling page but the look and execution of the design is fantastic.

Contact Pages Are Important – Make the Most of Them!

As I’ve stressed, contact pages can often be the quietly forgotten corner of a website where some of your most important information is left to sit idly by, never really fulfilling its potential. With a little time, imagination and flair you can turn that forgotten corner into something a little more special. Much like the examples above it can be done in any number of ways but most importantly you want a user to be confident and feel welcome when they want to get in touch with you.

If you’ve got any great contact page examples of your own feel free to share them in the comments section, I’m sure I’ve barely scratched the surface of what’s out there!

CRO Site of The Week – Early Learning Centre

Stepping aside from our usual CRO Site of The Week winners, this week High Position’s Marketing Manager, Rachael Bilby has crowned Early Learning Centre as winners of our weekly award. As ever, winners of this prestigious 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!

 

Early Learning /Centre Logo

One of the UK’s oldest household brands for children’s toys, it is certainly a nostalgic brand from my younger days, but not one that I am quite so familiar with today. At an age where I find myself rarely surrounded by children, I am a novice when it comes to buying toys so I was pleasently suprised to find ELC caters for the savvy and not-so-savvy customers like myself! Armed with a “list” (1 x Smart Trike, 1 x Bus “That You Put Shapes In”)…  I knew what I needed to buy and put the site to the test from a ‘real-customer’ point of view.

Early Learning Centre Homepage

 

What does the site do?

A famous highstreet name, the ELC site nicely displays their catalogue of products and promotes a number of toys on the homepage with seasonal offers, bold brand icons and a number of easy-to-glance-at category images.

What does the site do well?

Helpful Toy Categories

Instead of grouping toys by what they are, Early Learning Centre has really thought about age ranges, types of play and the most popular toy types, helping adults find the perfect toy (even the less savvy ones like me!). Plus, if you know what brand of toy you’re after, the use of logos make it even easier to find what you want from the home page.

Early Learning Centre Categories

 

Super Helpful Navigation

Mirroring my previous point about the helpful homepage categories – although busy – the drop down navigation has a great “shop by learning skill” section for each category. This looks very well thought out and to me it says – “these guys really are the toy experts” – I’m sure it is a very helpful feature for both savvy parents and clueless, child-free folk like myself.

Early Learning Navigation Options

 

Easy To Filter and Clear Category Pages

So, I quickly found my way to the Smart Trikes, without needing the handy search box (which works really well by the way!) and was pleased to find a tidy page with clear images, arranged by most-popular sorting and handy “suitable for X ages” information.

Early Learning Centre Category Pages

 

Great Product Page Information and Incentives!

Once on the product pages, information is not scarce and call to actions are very user friendly!

Early Learning Centre Product Page

Stock and Delivery Information = Hassle free.

ELC Delivery Information

Award Winning Toy = Reassurance of quality.

ELC Smart Trike Awards

Info on how this is “Good for the Child” = Confidence in my choice!

Child Development Info

Loads of Reviews = Extra reassurance.

Smart Trike Reviews

FAQs = Saves me the hassle of Searching Through NetMums!

ELC FAQs

Add to Gift List/Wish List = Super handy for parents!

ELC Add to Gift List

 

Easy Checkout System

Once I had managed to find the items on my list, I head for the checkout and was pleased to see the usual information and options – Free Delivery, easy-to-update basket, plus a helpful “Phone Us If You Need Help” option. To me, this final option says that The Early Learning Centre really does want to provide the same customer care online as if you were to walk into a store and ask for help, which is refreshing for a popular High Street name. They also go on to offer “express” checkout for guest accounts with a helpful list of bullets as to why people should create an account.

Early Learning Centre Checkout

 

But, what could the site do better?

Overall the rest of my user journey was very simple and hassle free, with a straight forward payment system and the usual checkout functions a user would expect. However, no site is perfect does have a very busy feel and could do with a few CRO tests…

Make the most of reviews!

When looking at product pages the review information was brilliant. It was really in depth and the star ratings tended to be helpful as there were usually enough reviews for people to get a good idea of how popular the product is. But, I would have liked to have seen some star ratings on the category pages for easier comparion. Test It!

ELC Test Reviews

Try a Live Chat Feature

To better instill the “customer service is as good online as offline” I would like to see The Early Learning Centre test having pop up live chat – just as someone would approach a customer in store – especially a bewildered, kid-free novice like myself.

Overall The Early Learning Centre site is a fine example of how high street stores can successfully position themselves online, with customer-centric sites that (as far as I remember) reflect the feel and atmosphere of a customer experience in store.

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!

cro drawer stuff

CRO Site of the Week – Nest

This week Richard Price has chosen Nest as High Position’s CRO Site of the Week, with their great use of imagery and simple design making for an eye-catching choice. 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!

Nest_logo

What does the site do?

Takes seemingly everyday products and redesigns them with a focus on elegance and ease of use. Currently their range of products includes thermostats and smoke alarms, although it is their Learning Thermostat that takes centre stage

What does the site say they do?

“We’re Nest. We reinvent things. We take the unloved products in your home and make simple, beautiful, thoughtful things.”

“We take what’s familiar and look at it in a new light. Our team focuses on making technology that’s simple, fresh and helpful.”

“At the end of the day, look at our product and you’ll see a reflection of the people who made it.”

What does the site do well?

  • Attractive homepage that makes great use of imagery to engage the user
  • Makes sensible, limited use of a carousel to advertise their two most important products: their thermostat and the accompanying Nest app
  • Mousing over the “Store” icon opens a drop down menu with links to other online retailers selling Nest’s products. Useful if you have a preferred online retailer with whom you already have an account

Nest_Homepage

Making a thermostat interesting is quite the challenge but Nest certainly succeed at making it engaging!

  • Plenty of useful information on the energy saving benefits of the product and how to install it. The most interesting however is a scrolling timeline detailing how the product will self-adjust and ‘learn’ how to adapt to your needs over the course of a year

Nest_Timeline

From Day 1 installation all the way through to Day 365, when the energy efficiency really becomes apparent, the product timeline is a useful and engaging page

  • The actual product page couldn’t be any simpler really, making the buying of the product as easy as possible. All other extraneous information can be found elsewhere on the site

Nest_Product_Page

Simple right? The product, price and ability to add to your cart and checkout are all that are needed on this page.

  • Prominent Community and Support pages help foster a sense of inclusion with an exclusive, high end product and also assure users of the legitimacy and technical support they can expect
  • Well written, relevant blog content and a fantastic social presence. These guys have over 193,070 likes on Facebook and have tweeted over 9,000 times!

What does the site not do so well?

  • I feel that throughout the site the Calls to Action could be much stronger. This is particularly evident on the product information pages where the small CTA can get lost amid all of the information – TEST IT!

Nest_CTAs

  • The review page feels like a bit of a missed opportunity. Given how attractive and engaging the rest of the site is, this page feels rather bland by comparison - TEST IT!

Nest_Reviews

Review pages are a great way to inspire confidence in your product but in this instance this content could be much more persuasive

  • Despite their strong social presence, their social links are very hard to find. This is surprising given the focus on the ‘Nest Community’ and the strong online following Nest has cultivated over several years. Making these links more prominent will only help to grow this community - TEST IT!

Nest_Social

Congratulations Nest! You’ve made Thermostats about as exciting and engaging as they’ve ever been and your website is a real pleasure to use! With some CRO Testing I think you could make things even more user friendly.

LIKE WHAT YOU’VE SEEN?

Go CRO

Enjoy your reward, straight from the CRO drawer!

Drawer Prizes

CRO Site of the Week – HelloSundayMorning

This week High Position’s “UX Vixen”, Libby Bearman, takes a look at www.hellosundaymorning.org as her CRO Site of the Week. As this week’s winners, they will be notified via Twitter by High Position’s Head of CRO, James Root (@RootToMarket) and will be awarded something from the CRO Drawer. #win

HelloSundayMorning Logo

WHAT DOES THE SITE DO?

This Australian-based company is a sort of community for people who are looking to change their drinking habits. They encourage those that sign up to choose a period of time to go without alcohol, set up personal goals to achieve within this time and share their experiences to inspire others.

WHAT DOES THE SITE SAY THEY DO?

“Hello Sunday Morning is a movement towards a better drinking culture. Our purpose is to provide a platform for individuals to create meaningful change in their lives by taking a short break from alcohol. By sharing their story, each person’s stand is a unique and essential contribution to a better drinking culture.

Hello Sunday Morning is a way for any individual to take a break from drinking and recreate the drinking culture around us. Since 2010, over 20,000 people have signed up to go 3 months or more without alcohol, and blog about their journey on Hello Sunday Morning.” 

WHAT DOES THE SITE DO WELL?

  • A succinct sentence on the homepage indicates what HSM are about immediately, and the wording “one Sunday at a time” makes it sound more easy or manageable
  • Images of Happy People doing Active Things over-laid with inspiring statements encourages visitors to watch a video and explore the site further
  • The main goal is to get people to sign up, and that blue “Join, it’s free” button is almost impossible to miss!

 HSM - Homepage

  • Scrolling down the homepage, a simple 5-step explanation as to how HSM works is made all the more attractive with Monotone Plus Colour icons, that react as you mouse-over:

HSM - Homepage 2

  • Still not convinced? Clicking “Why do an HSM?” reveals some pretty persuasive statistics:

HSM - Homepage 3

WHAT ELSE DOES THE SITE DO WELL?

  • Sign up is super easy. It can be done through either your facebook or twitter account, or you can create an anonymous account. There are no distractions, the form is short and just to make double-sure you don’t get lost, the form field you’re completing is even highlighted as you’re using it:

HSM - Sign Up

  • From the Facebook Likes, to the attractive Community page AND a kind of “Sunday Counter” in the site’s footer, I’m constantly reminded that this is a huge community I am becoming a part of… the fact that it’s huge suggests it’s successful too. Social Proof, much?

HSM - Community

  • They also sell merch. If you’re looking to help people feel they belong to a  group, what better way to do so than by showcasing happy group-members wearing the team colours with pride? Pictures of REAL people being active, happy and hangover-free encourages sign-ups and purchases:

HSM - Store

WHAT DOES THE SITE NOT DO WELL?

  • Number-wise, that Sunday Counter is impressive, but it’s hidden all the way down the bottom of the page. Maybe introduce a variation higher up the homepage to ensure increased visibility, further enforcing the Social Proof – TEST IT!
  • Their social media buttons are waaaaay down the page too. Perhaps I’m being picky, but this is an online community and so the Facebook, Twitter and Vimeo accounts are really important. Move ‘em up the page so users don’t have to search for them – TEST IT! 
  • I actually don’t like carousels. I can just about put up with the one on the homepage, but the store front’s animated banner is so flicky and distracting. I know it’s fashionable, but they don’t convert and make the user experience jumpy and unpleasant. Choose one attractive banner and offer a click through to a gallery for more images – TEST IT!

HSM Store - Test It

Huge congratulations, HelloSundayMorning! Your message is clear and so is your website! With effective use of imagery, friendly language and descriptive Calls to Action,  you’re definitely pulling off a fantastic user experience. With a little bit of CRO Testing, could you make the HSM Idea that little bit more irresistible?

LIKE WHAT YOU’VE SEEN?

Go CRO

Tweet Us Your Nominations

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

Drawer Crap

How Good Value Can Boost Revenue

5 ways to experiment with upselling based on value

People are spending more money online than ever before and one of the main reasons that people turn to online vs. offline – aside from convenience – is the opportunity to seek the very best value for what they are intending to buy. From frequent “low-involvement” purchases like your weekly shop to bigger, grand expenditures like a new TV – the UK is, like many, becoming a nation of price checkers and deal-seekers.

With this in mind, it is more important than ever before for online brands to portray value in their offering and with a few old-school sales tactics it could be easier than one may think. Check out my five favourite ways to present great value on your site:

1. The “Cheaper Alternative” option

In markets where brands are challenged by being the best value, with the lowest prices there are some instances when showing cheaper alternatives provide a win. For instance, supermarkets that sell a great range of own-brand products – with great margins – might promote the odd product to tempt people away from brands and keep customers happy by shaving pennies, and pounds, off their food bill.

Aldi is possibly the most famous supermarket for taking this approach recently – with their high proportion of own brand products versus the odd branded (although not well known) stock – it’s become quite the memorable campaign:

Slightly more subtle is My Supermarket’s use of “Swap & Save” on their handy money-saving site. Without the politics that supermarkets face with upsetting their branded suppliers, My Supermarket calculates and recommends savings as you shop, allowing you to trade items and even switch between supermarkets to get the very best deals.

My Supermarket Swap and Save

My Supermarket Cheaper Alternatives

At the end of your shop you can even work through all saving recommendations – cutting prices (and maybe quality) where you choose:

My Supermarket All Savings

My Supermarket Saving Centre

2. The “Most Popular” option – aka. Asymmetrical Framing

Quite simply, this is when companies “frame” and display the most ideal option for customers to buy, by making it appeal more than other options. As demonstrated by Shopify, their “Most Popular” option is the friendly looking middle ground package – with a healthy list of features plus clear examples of what you don’t get – but do those things matter? After all, it’s an extra $100 dollars and “most” other people don’t need them. Looking at the cheapest option, I assumed it was too basic and in fact, I almost didn’t pay any attention to the basic package.

Shopify Assymetrical Framing

This approach is being tried and tested across a number of sites but really it originates from an old adage of corner shop owners and if they wanted to increase sales of their more expensive wine. Originally they would have stocked two types of wine, a cheap option and a bottle for a couple of quid more. By introducing an even more expensive alternative into the mix (which wasn’t expected to be sold), shoppers began to buy more of the middle option – keeping the corner shop owners very happy!

3. The “Buy Together and Save” option

A great way to squeeze that bit extra of money out of people is to offer an irresistible combination of products – offline the perfect example is going to the cinema. Do you buy just an overpriced cup of Coca-Cola, or pay the extra £1.00 and go for the “Popcorn Combo”, which probably should have cost a tenner separately?

This can also be applied online in a number of industries but one of my favourite executions of this is within the travel sector. Expedia aren’t shy to let people know that booking flights and hotels together is on average 15% cheaper – and expedia don’t promote the fact that it’s also easier to book together too!

Expedia Buy Together and Save

The good news doesn’t stop there either – when searching for the perfect getaway it’s clear how much money can be saved. How believable these deals are may be questionable but it’s certainly eye catching!

Expedia Buy Together Savings

Ironically – the Expedia iOS app only lets you book flights OR hotels at the moment. #Fail. Let’s hope they update this soon!

 

4. The “Price per XX” options

For savvier shoppers it won’t be too surprising that working out the cost of a product by “Cost per Weight/Size/Volume” or “Cost per Use” is a great way to compare values of products versus alternatives. Although some products might not be suited to this approach, when margins and scales of economy work in your favour, this can be a great way to get people to spend that little bit more.

Marks and Spencer is one of the first “big brands” I have noticed to adopt this approach online and make a decent job of using “Price per 100ml” to show the value of their fragrance range:

Marks and Spencer Fragrance Pricing

I would really love to see this rolled out on sites like Selfridges who sell branded perfumes in different size ranges too! If I didn’t have to manually calculate that buying the 50ml bottle of perfume would save me about £15.00 based on how much the 30ml bottle costs, I’d probably quite happily spend that little bit extra for the bigger bottle. Although margins may vary – at the end of the day Selfridges would still be getting an extra £28 through their books than if I bought the smaller bottle. #CaChing

Selfridges Fragrance Pricing

5. The “Spend More to Get Free Delivery” option

Another one of my favourite sites for User Experience is Benefit Cosmetics and they are a great example for my final tactic – the “Spend More to get Free Delivery” idea. It’s concluded that in the UK shoppers respond better to free postage offers than saving percentages off the price of items, even when the latter has been the better saving.

More and more online stores are realising the value in free delivery and so with many enticing products and treats on offer, Benefit realise it won’t be too difficult for their shoppers to top up their basket and spend £40 for free delivery:

Benefit Cosmetics Basket Feature

So, if you are looking to drum up revenue – and Average Transaction Value – have a think about how these up sell ideas could make a huge difference to your site.

For more User Experience advice, contact the experts today.

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…