Content and Layout on & Other Stories

Other Stories Landing

 

There’s something I really like about the landing page at & Other Stories. Its loaded with stuff that keeps my ADD busy, while cleverly showcasing a ton of interesting stuff about their brand. The seamlessly mix editorial content, product, collections of product, video/animations, promotional announcements and more. If someone told me they were going to do all that at once – I’d think it would turn out to be a mess! These guys, however, deliver.

Detail-driven browsing at SO Jeans

SO Jeans Browse

Shopping for jeans on the web is usually hard enough. Like any category where the user might have nuanced and sophisticated tastes, the usual mix of pictures and words just might not be enough to get the deal done.

SO Jeans figured the way to get through to a detail-driven customer was to be detail driven themselves. In addition to being able to sort by size, color and brand (which, lets face it — for a site with a lot of product, these are table stakes) they also let the shopper sort by visual descriptions of what they are looking for.

SO Jeans image filter

Low rise? Straight leg? No problem. Plus because its visual you can be more certain that the words mean what you think they do. It also means that these guys took the time to build the data on all of their product to power a feature like this — no easy feat, and one that’s sure to earn them some loyalty.

Super colorful and playful landing at Visbyh

Visbyh Landing

 

Visbyh is a fun little site that sells bright and colorful cases/accessories for iphones and your other favorite electronics. They are a company all about color, and the simplicity of their product. They make brilliant use of this simplicity with their landing page that shows off their colorful flavor, with subtle mouseovers that show off just enough of the product for you to want to click in to learn more.

Visbyh Landing 2

Simple and elegant at Retrosuperfuture

Super Landing 1

 

I will not start by saying I think Retrosuperfuture is an amazing name/description of a brand, nor will I acknowledge the mental jiujutsu of stampung “super” on every single one of your products. Brilliant.

That said, these guys have a very clean, very simple approach to their site, and their landing page does a great job of showing you the products and recent partnerships that they’re proud of.

Fun and practical browsing on Lole

Lole Women Browse 2

Lole is a colorful, activity-driven activewear brand that really pays attention to why the shopper is picking up the product. Their selling points include the techical details of fabric and fabrication, so they really want the shopper to know that there’s a difference in the product they’ve designed for running, tennis, yoga, etc. They are aimed squarely at their active customer, and as a result, are able to play up their purposefulness. Everyone is selling tank tops, Lole is selling a better way to play tennis. Definitely a win.

To boot, their browsing experience has a ton of best practices. Merchandised focus on high-relevance product, varied layout, and mixing in of promotional messages.

Lolë Women Browse

Fab’s 5 Rules for crushing eCom

fab2

This is old content, but I stumbled back onto it, and realized that it is more relevant today than ever.

The Fab team in Forbes shares some of the reasons they’ve been able to blow it out. Anyone who is building or improving their ecommerce is probably wondering how they can emulate some the success that Fab has had.

Here are their five guidelines. How many are you doing?

1: Sell stuff you can’t find on Amazon – Otherwise, people will just google for it cheaper and pick it up there.

2: Have a personality – The classic advantage of small, fun brands vs a goliath

3: Think mobile first – May not work for everyone, but if frequent email is part of your plan, people get those on their phones today more than ever.

4: Be social – Another classic advantage of being small. Talk to people, let them talk to you. Huge faceless companies can’t do this.

5: Go global from the start – Hello, the internet? Yes. Nothing but a little bit of Fedex between you and anywhere in the worldF

Interactive background/browse on Narciso Rodriguez

NR Landing 1

Very often, apparel brands will waste the landing page of their site with something that’s all image, and has no real way to connect people with the brand. Maybe a full page image, or sometimes no image at all. You know who you are. Thats why I love what Narciso Rodriguez is doing on the site. True to fashion, its all about the name, but the landing page itself lets you scroll through stories and product to really get a feel for what the brand is about.

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

Celebrating the best of everything.