Product as the Hero. Let them fall in love with it.

GG LegoBatman2

There’s a narrative that’s happening on your site whether you’re writing it or not. The only question is: who’s your protagonist?

In a well told story, the audience cheers for the protagonist. Is that your brand? Company founder/face? Something else entirely? Some sites are so poorly organized that people get bored and get out.

Some, on the other hand, are awesome.

Hard Graft:

I love these guys. Even from the landing page (as previously featured here), these guys are clearly all about product. They live and breathe product. And after getting you from the landing page to the product detail page, they take it to the next level.

hard graft Product 1

Crisp, uncluttered page. Its all product, a review from a dude with a Managing Director title. The leather looks so crisp you can practically taste it.

But then, if you click on the product: it takes over the entire screen.

hard graft Product 2

Full page shots. Multiple of them. Product in action, product on a desk. Product in use, product not in use. All with super-clean, focused photography. I don’t even need an ipad/laptop case, but i’ve got so much depth and detail on this thing, I can’t help but want it.

Now, is it crazy to suggest that you put product pictures on your site? Of course not. The crazy observation is that sites with focus on the product, rather than lists of features, expounding copy, and other extraneous picture are better at creating an emotional link between you and your customer.

Take a hard look at your product page. Do you have tiny pictures? Do you have paragraphs and paragraphs of text and bullets that no one cares about? Do you do that weird zooming thing where a magnifying glass follows the mouse pointer? (you know who you are.)

Get back to the basics, clean it up, and let your product be your hero.

 

 

Telling stories: There’s a reason we love your brand

Old Book 2

The landing page. Its the start of a narrative, the beginning of a relationship, and if you’re good — the opening of a great story.

Sometimes, the product is the hero. Sometimes, its something else entirely. However, the common thread is that the great sites start showing you the road to walk down, paved with yellow bricks and all.

In the first example above, we’re looking at The North Face:

Landing rotation The North Face

The story is clear, and comes at us from all directions. The North Face isn’t just slinging product — they are collaborating with top athletes from multiple disciplines to bring us awesome stuff. Cool photography and immediately believable.

It’s about adventure, adrenaline, and athleticism — in some out-of-the way spots all around the world.

The second example above is from the Yoox site over the holidays.

yoox.com landing color voice

Here, the story is a little different. It’s colorful and fun. Its evocative of the holidays, and the heartfelt silliness that comes from hanging out with our loved ones. Its playful, hints at presents (and who doesn’t love presents) and extremely interactive. Each color had a different scene with relevant product and a similar spirit.

Indeed, you can click right on the scenes to start getting lost in the store.

Finally, one of my favorite storytellers: J.Crew.

J.Crew Landing 1

 

Sure, the landing page shows you product, and good landing pages do that. But it does more — it starts telling you about the reason you came there. Were you looking for a cashmere sweater => come right this way.

No? That’s okay, maybe you came looking for a suit.

J.Crew Landing 2

You’re thinking about fabric, and the clothes, and before you know it, you imagine the places you’ll go, and the things you’ll see in the sharp new threads that you could have in a few clicks.

Ultimately, it doesn’t matter whether the shopper was looking for cashmere or a suit. The juices are flowing, the pictures are inviting, and the story of what might happen has begun.

 

Deep Dive: Greats Sneaker Site Walkthrough

Greats Landing 1

The Greats footwear site is effortlessly executing on so many best practices, I just had to pull the whole thing apart here. I was geeking out the entire time, and very nearly ordered all of their product in my exuberance. From landing to checkout, they’ve nailed details that even savvy ecom professionals might miss or screw up. Greats team, my hat’s (and shoes) off to you.

Landing Page: Lets just count up the things these guys are already crushing

  • Full-frame imagery
  • Well-executed product photography
  • Easy to understand product
  • Streamline path to the next step

Greats Landing 2

Putting your mouse anywhere on the screen brings up the name of the product, and its price, it begs for a click — which of course, is the point.

Greats Product 1

Product Page: This, too, has a ton of textbook and innovative wins on it.

  • Interactive product – the thing you think is just the product image, is a 3D rotating feature
  • Construction – They show the simplicity and detail of the product, and even manage to show it de-constructed, so you an see all the components of the show.
  • Not 1, but 5 different images of the product on-model
  • Crisp call to action
  • Other product (just in case)
3D Shoes
3D Scrolling on the shoes
The peices
Construction / De-construction

 

Which of course, takes us to checkout. they keep it clean and simple, without any extra needless steps on the way out.

Greats Checkout 1

 

All in all, a masters class in how to get this done. Any retailer without a massive amount of product needs to copy everything these guys do.

Greats team – I don’t know you, but I wish I did. Kudos.

 

High-value Contact Acquisition at Marine Layer

Marine Layer Contact Collection

 

Marine Layer is a fun brand that found a humorous way to collect contact information from their shoppers, inject a bit of humor, and showcase one of their key selling points all at the same time.

Clothing is tough on the web because you can’t touch the fabric. These guys offer you to ‘cop-a-feel’ of said fabric, but of course, they need your contact info and address in order to do so.

Anyone looking to  boost their email and has something relevant to give away– take note here.

Innovative Parallax scroll on Krystal Rae

Krystal Rae Landing 1

The Krystal Rae site is a gorgeous site to start with, and does a great job of using interesting visuals right off the bat. However, what caught my eye was that while casually scrolling down the page, a picture that I thought was just a normal model/merchandised shot, was actually the entry point to a really cool experience.

Krystal Rae Landing 2

As you scroll, the model changes outfits. And as a result, They actually showed off a ton of their product without needing me to click into the shopping section.

Krystal Rae Landing 3

 

Very cool, and definitely a best practice for anyone with an interesting, model-driven merchandising strategy that wants to play with the ever-trendy parallax feature on the web.

Krystal Rae Landing 4

Sears gets personal, in a useful way

Sears Email weather targeted

Sears (via their social platform, Shop Your Way) sent me this email over the winter, and on a snowy day at that. I couldn’t help but smile. They are obviously using some personalization tech — but rather than use some invasive-feeling detail scraped from a social network (“Saw you checking into a bar at 2AM, last night. Want to buy some coffee?”), they are using my geolocation and the weather report to remind me that I might need snow gear.

I thought it was cool, and I’m sure a few people who got this were like “Oh shoot, I totally need a snowblower.”

Saucony’s Shoe Advisor hits the spot

Saucony Browse 1

Saucony rolled out a new feature they’re calling Shoe Advisor – I’m calling it the perfect way to shop for sneakers. They replaced the useless filters that you tend to see on shoe sites with real use-case driven filtration.

Do you want to race? What do you run on? Boom, Boom, and as you click, the tiles live-rearrange in a way that invites you to keep playing.

Plus, each step has education built in. Maybe you’re not sure if you have high arches or not:

Saucony Browse 2

This could be done for nearly any category. How do people use your site? How are you helping them narrow down the product they want?

Easy cart mouseovers on J.Crew

J Crew Cart Mousover

 

I think one of the most annoying things that can happen during a happy checkout process is when you find something awesome, drop it into your cart, and then when you want to check on it, you have to click into fifteen different forms and screens just to find it.

J.Crew’s new feature takes all the hassle out of a simple confirmation. Hover the mouse over the little shopping bag tab, and it shows you exactly what’s  in there.

BCBG brings trendy relevance and video

BCBGMAXAZRIA SHOP TRENDS browse and video

 

The BCBG Maxazria site does something very few apparel sites seem to be doing ==> help you find just what you’re looking for. While most sites only let you pick a category like tops or pants, the “Shop Trends” menu item opens up to let you shop by Lace, Floral Paint and more. The results pull up everything within that trend – whether its a dress, a belt, or a pair of shoes.

If a healthy dose of helpful relevance wasn’t enough, they also have fun videos in most of the category headers. Very much a best practice.