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.

 

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

Super simple: Pebble skips all the bs

Who said you had to get from a landing page to a browsing experience to a product page before you can buy?

The team at Pebble is onto something. While this won’t work for everybody, these guys do a very clean job of putting their introduction, their selling points and even their FAQ onto a single, well organized page that will also take your money (thank you very much)

Site funnels were soooo web2.0. Just get to the point.

(For those of you nerds who are keeping track, I tagged this as landing page AND as a product page as a bonus)

Show the stockouts: United Pixelworkers creates urgency

If you ask me, one of the hardest things to do well on the web is to create urgency. Why should your shopper buy NOW rather than tomorrow or two weeks from now? Flash sales are an obvious answer, but don’t work for everyone.

United Pixelworkers have a very cool solution. They just put it out there. Half the stuff on the site, you can’t even buy. It makes it feel like stuff is selling out all the time. In fact, the search bar lets you search through stocked out product.

You might think its counter-intuitive  but I think there’s a way any retailer with a bit of turnover can make this work.

Entertain and convert: Vat19’s landing page videos have them laughing all the way to the bank

Vat19 uses whimsical images and even more whimsical videos right on their landing page to sell their whimsical product.

Sometimes, the landing image itself contains a prompt for you to put it in the shopping cart. Because its hilarious, it doesn’t feel try-hard.

Lots to learn from these guys.

Bold contrast: Warehouse uses unexpected elements to put the offer first

The new Warehouse landing page mixes expected and unexpected elements to pull you in.

  • We’re used to seeing tiles and straight lines. The diagonal draws your eye up…
  • Right to the offer. If you came here looking for something (eg. denim) perhaps the 10 quid is all you need to jump off the fence.
  • They still delivered full frame large photography, with a picture that implied a large selection of product.
  • Brought some urgency too. “Limited time offer” is a little bland these days, but certainly better than nothing.

Start with search: Finish Line’s landing page puts focus on finding

The new Finish Line landing page does a bunch of my favorite things:

  • Full frame photography
  • Zoom shots that focus on details
  • Vibrant, inviting colors
  • And the piece de resistance –
  • SEARCH! on the landing page itself.

The standard nav is still available, but given how much shoppers use search, why not put it front and center?