Gap: Drop Down Call to Actions

I’ve spotted Gap using drop down call to actions a couple of times, and every time it surprises me why I don’t see it used more on other sites. For brands with a vast product selection or numerous categories its the perfect, and obvious, solution.

Gap Drop Down Call to Action

It’s a technique that is particularly useful for home and landing pages where are visitors most engaged but the space for content is restricted. Not to mention, it’s this content that you should be most focused on commercialising and getting the customer through to the most relevant product for them.

Gap drop down CTA on MobileAnd what of mobile? Gap could have made this feature troublesome for users on mobile, but instead they sensibly got rid of it altogether and replaced with individual CTAs, while on tablet the original function remained on tab rather than hover, demonstrating a considered cross-device approach even when advancing the call to action for desktop.

A Cinemagraph Starring Red Online, Ralph Lauren & House of Fraser

While browsing the Red website this week, something caught my eye. Not in the way that something might leap off the page; rather, just a glimmer of unexpected movement.

Red, House of Fraser & Ralph Lauren Cinemagraph BannerAs I looked closer I discovered that what distracted me was a handbag gently swinging from a model’s hand, and I realised that this was the first time I’d experienced a cinemagraph put to genuine use, rather than reading an article about why they’re awesome.

Well, I’m now convinced that they are awesome, and that one day they’ll transform flashing banner adverts into the subtle and elegant messages that they have the potential to be.

For those who don’t know, a cinemagraph is a still image with an isolated animated element, like eyes blinking or leaves blowing. However, upon trying to insert one of these banners into my own post, I discovered that the Red examples are in fact video files  so I couldn’t manage to share one (they should be in gif format when created properly). But I urge you to visit the Red website while they’re still live and take a look for yourself!

If you happen to read this post and they’ve disappeared from the Red website, then below is beautiful example from the people who invented the process, Cinemagraphs TM.

via Cinemagraphs TM

via Cinemagraphs TM

The thing I found most curious about the cinemagraphs on Red however, wasn’t the file format, but the content that they’re promoting and linking to. While I expected to be sent to the House of Fraser website, instead I was lead me to an article about Lauren Ralph Lauren (stocked by HOF).

Where’s the conversion in that?

At the bottom of the article is a shopping feed, but that doesn’t even work efficiently because the customer has to scroll through the items and can only click on the central one, rather than the three displayed at any given time. Even linking to a full ‘edit’ category in the HOF website would have seemed more practical to me.

It’s a shame that the teams at Red and House of Fraser have gone to so much effort to create this lovely content yet haven’t optimised it to gain revenue, but regardless I think its a gorgeous and forward-thinking effort!

Finery: Persuasive Gifts

The high street fashion website Finery launched recently, and its pretty nice I think. To be fair, a brand founded by the former Fashion Director of ASOS and an ex-Topshop Design Director can’t really go wrong. I could sit here all night and chat about the website, but I’m going to focus on a detail that I really like – personalised persuasion tactics, or at least those that feel personal even though they’re actually so simple and generic to execute but feel so…. real.

1. The Free Gift

Finery | Free Gift Promotion| Amy Sillince

Source: finerylondon.com

“Tell five of your friends about us and earn a gift worth £20. Just log in to invite them!”

What’s this lurking in the top left corner when I look for my shopping bag? A free gift? For me? You give me £20 if all I do is tell my friends? OK! And just like that, Finery gain new data, new visitors, more reach and probably a sale as well.

And its not even £20 cash, its probably a dustbag tenuously priced at £20. Finery – 1, Customer – 1 (so they think).

2. The Personal Discount

Finery | Discount Pop Up| Amy Sillince

Source: Finery.com

Really we’re just getting into semantics here because this promotion acts on the same principal as above, all things considered. But, what I like about this one is the constant reminder that you have a discount to spend – the bar rests at the bottom of the screen throughout the site.

Plus, by calling it ‘My Discount’ the visitor immediately takes ownership of it as something they need to use rather than just acknowledging it’s there if they want it.

To really push this concept into a joined-up strategy, I’d make one suggestion: Take the same message put it into a re-targeting display campaign. That way, the point they’re trying to make really won’t get forgotten and puts this somewhat tedious channel to good use. Maybe they already are doing this, but I haven’t come across it myself, having looked out for it.

Footnote:
While I’m not really here to talk about the fashion, I do have the urge to comment. It’s as if Finery filtered out all the tacky, trashy commercial crap that their former employers insist on churning out to take teenager’s pocket money, and left us with those odd gems that do take you by surprise on the high street. My one reservation: Judging by the usual quality at Topshop and ASOS, what does that mean for a brand that’s a fusion of both?

Smythson: Product Quick View Hover State

I browse the Smythson website quite frequently as a reference in my job and was pleasantly surprised when I discovered this little update in the New Year.

A hover state on product listings is always helpful, and we all welcome seeing a different angle or close up, but Smythson have put it to a far better, more efficient use. Not only have they exploited the true potential of the hover, they have found an elegant and user-friendly solution to the eternally clunky, and not-so-quick, product quick view feature. Because, its never really a quick view when a slow-loading pop up provides information more easily digested in the product page, leaving you wishing you’d just damn clicked into it in the first place.

Quickview Hover| Ecommerce Blog | Amy Sillince

That is, until now: With one stroke of my trackpad I understand the key features of a product and some background to its design/collection – information to help me better understand the item at a glance . This is certainly something that’s important when browsing 50-odd products that look just about the same, leaving me need only to browse deeper into the ones that I know are really are for me.

Quickview Hover| Ecommerce Blog | Amy Sillince

However, while the feature is delightful I do think they should be more selective about the information that’s offered. It looks as if it’s just pulling the first three bullet points of the products features rather than being a considered edit. For example, on a purse they should describe the internal details rather than the fact it has contrasting panels and a gold zip; I can see that thank you very much. It would be simple enough to resolve, either by re-ordering the order in which features are listed, in the PDP, or by adding an extra field at the product import stage.

And lastly, there’s just one feature I’d add: A carousel on the image to offer the customer the opportunity to browse through angles on the PLP too.