When you’re setting up your shop or your booth at the market, you put a lot of thought into how customers will move through the space, from eyeing something they love to the point of purchase to walking out of the store holding a bag with your logo on it. Your website deserves the same care and attention.

How do customers move from the home page to the payment page? What will they see along the way and how will it guide them to the next step?

Here are three ethical fashion websites that elevate the ecommerce experience, making it beautiful and functional just like the products they sell.

3 Awesome Ecommerce Sites – And What Makes Them So Great / Elise Epp Design

01. Reformation

Slits, cut-outs, plunging necklines: Reformation shows just how sexy ethical clothing can be. It is a certified B Corp, making most of its garments at its downtown LA headquarters.

Reformation ecommerce site

What Makes It Awesome

Reformation’s website shows a really simple upgrade to the standard ecommerce page with rows and rows of pictures of products. All they did was make the pictures bigger.

Giving your products more screen space communicates value and gets your customers to take more time to look at each item. Think of it like a brick and mortar store: if hangers are crammed together so you can barely pull out a shirt, the clothes are probably less expensive; higher end shops give each item lots of room.

Once you click on an item, you get a gorgeous image slider at the top of the page and all the shopping buttons pinned to the bottom of the screen. As you scroll down, you see details about the garment and how it was made (including how much carbon dioxide it created and water it used during production!) – all the while the “Add to bag” section stays put in view.

(Side note: I love how the text above their “if you like this you might also like…” section just says “Oh, also.” Adding personality in two little words.)

Also, check out how simple their main menu is. Where it says Swim (in the screenshot above) it changes to reflect the page that you’re on; if you hover over it, you get a dropdown menu where you can select a new category. This menu is distraction-free and guides visitors to the best parts of the site. The first three items are about shopping, which means that just about anything your visitors do will land them on a shoppable page. ????

What I Would Change

The emojis in the top right leave me guessing. I mean, the search ???? and shopping bag are pretty obvious, but the ???? and ????????? Who knows what will happen if I click on those! And people don’t like clicking on things when they don’t know what’s behind them. I would get rid of the mystery emojis and find places to spell them out elsewhere.

I would make the Stories menu item and its submenu items more clear. Apparently stories actually means collections? Some of the collections have understandable names like “The Summer Wedding Collection,” but if your eyes first land on “This isn’t really the country” you likely won’t know what that’s about. (Or I didn’t.)

My advice: don’t get fancy with your menu titles. If people don’t know what it is, they won’t click on it.

02. Cuyana

Cuyana wants you to buy fewer, better things. They sell clothing, bags, and accessories that are meant to be passed down: classic styles imbued with beautiful details that last and last through seasons and trends.

Cuyana's ecommerce site

What Makes It Awesome

Cuyana devotes space to showcasing each piece they sell. In broader categories (e.g. Apparel) they show off the garments in a Pinterest-style mosaic gallery mixed in with non-linking images and text for added “white space.” But dig a little deeper (e.g. Tees) and you get more than just one little square to zip past – you get a whole section dedicated to each item.

This works especially well in small categories. For instance, Cuyana only sells one skirt, but when you click on Skirts, it doesn’t look like an underpopulated category. It looks like they took time and care to make one great skirt – and they want to tell you why you’ll love it. They tell you about the special details, show you what it looks like on a human, and show all of the colourways, all without having to click on a specific item. (Omg you can wear it as a top!)

What I Would Change

I would remove most of the top listed items from the side menu. It’s not obvious what the difference is between Spring 2017 and Spring Catalog. What are Preview and Edits and California Ease??? And I’d have to be convinced that Best Sellers is worth keeping there. Having all these extraneous menu items – and right at the top! – makes it harder to find the really valuable links.

Not every link has to be in your main menu – or in a menu at all. Still want to show off your spring catalog? Have a section on your homepage that shows a sneak peek and invites visitors to take a closer look.

My advice: don’t have more than four or five main menu items. You can have submenus (e.g. Shop > Bags > Totes) and you can have other menus elsewhere (like in the footer), but adding main menu items just distracts from the ones you REALLY want people to see.

03. Vetta

Have you heard of a capsule wardrobe? Vetta wants to help you build yours. They have three pre-defined capsule collections making up a total of 13 garments – all versatile pieces that can be worn multiple ways or mixed and matched to create lots of variety with a small wardrobe.

Vetta ecommerce site

What Makes It Awesome

Vetta’s ecommerce page makes it easy to build your own capsule wardrobe (by buying multiple pieces from their store). They offer large photos, size and colour selection plus an ADD TO CART button – all without going to a product page. And they do this while maintaining easy scroll-ability (it’s a word) and without feeling cramped.

What I Would Change

The individual product pages include a giant block of text that only the most determined shopper would actually read. But there’s useful information there!

According to *uncited* studies, there is an optimal line length for text. I’ve seen it as low as 50 characters and as high as 100. As humans get used to reading on wide screens instead of narrow books or newspaper columns this number is increasing, but even so Vetta stretches the limits. Their text takes up the full 1080px width of their site and one line of text is over 140 characters!

This text block could be made easier to read by:

  • keeping the text where it is but breaking it up into two columns
  • keeping the text where it is but making that section narrower (say 800px wide)
  • adding headers to define each section (recommended for the above two options)
  • moving the text area underneath ADD TO CART and providing tabs (e.g. How to Wear, Fit, Details)
  • editing the text so it’s shorter (which I’d recommend no matter what – it’s a bit wordy!)

My advice: keep your product descriptions succinct and easy to read. After all, the easier it is to read, the more likely your customers will actually read it – and why else are you sweating over writing them?

P.S. Should You Hire a Web Designer or DIY Your Website? + How To Get The Most Out of Working With a Product Photographer

Pin It on Pinterest

Share This