too many ethical fashion brands make this UI mistake

UI Mistake Ethical Fashion Brands Make.jpg

UI = User Interface | UX = User Experience

It's my [controversial] opinion that there's minimal difference between UX and UI, especially in small business e-commerce. Basically, UI is how something looks and UX is how people interact with it. Here's an illustration, courtesy of Patrick Hansen

Cool, now that's settled.

Stop putting "shop by ethic" in your main menu (please)

If I'm shopping for a vegan bag and click "shop vegan" in a site's main menu, the site delivers every single vegan item -- makeup, shoes, shirts, candles, and anything else the webmaster tagged "vegan." 

Barraging customers with unrelated items increases their frustration, not their cart value. In ethical fashion Facebook groups, most posts by consumers (not designers, bloggers, or brand reps) ask for help to find a specific product; "Any recs for organic bridesmaids dresses?" or "I need to find my husband some ethical, tall t-shirts." I've never seen a post that says, "I need to buy clothing made by refugees."

Stop putting "shop by brand" in your main menu (pleeeease)

Net-a-Porter, Moda Operandi, The RealReal, and Rent the Runway can organize products by brand or designer because their customers already know their designers by name. In fact, I've had my eye out for a Kate Spade Topliner Trench for years -- YEARS, I SAY! -- and conduct monthly searches for "Kate Spade Trench" on The RealReal and Poshmark.

Kate Spade Topliner.jpg

Ethical fashion brands don't stock Kate Spade, Givenchy or Chanel. You're doing your vendors and/or your private label a disservice if you expect visitors to click random names in hope of finding something they like. Sure, include which brands you stock on the website (preferably in the About Us sub-menu), but don't waste your menu's real estate on brands most people haven't heard of.

"Shop by collection" uses the same principle. Designers do this because they think like designers, not customers (or e-commerce managers). They expect users to click on what are, essentially, random words they've decided to name their new range.

Imagine this scenario: a shopper sees a cute black shirt on Pinterest and clicks through to your website, but receives a 404 error because that shirt's no longer in stock (note: redirect that dead link to your home page). The shopper then clicks the "shop" menu link but sees SS17, AW17, SS18, AW18. Having never heard of or engaged with your brand, this visitor -- who was ready to spend money -- will go back to the familiar: Pinterest.

Bounce rate is your best indicator of a poorly organized site. The bounce rate benchmark for retail sites is 20-40%. If close to half (or more) of your visitors are leaving after the first page, then you need to reassess your site's navigation. 

Back to basics: The Main Navigation Menu

Don't worry, depending on your web literacy, re-organizing your site's navigation shouldn't take a full workday.

For this example, I'll make-up a Shopify store that sells women's clothing and accessories. We'll call it MadeFAIR. 

Top Menu Example.jpg

Each top menu item (Shop Everything, Clothing, Accessories, Jewelry, Sale) are their own links that redirect to everything within those collections. The sub-menus house the sub-categories (also their own collections) so the person searching for a dress will redirected to a page full of dresses. However, after spending about thirty minutes making that graphic, I realized I forgot to place "new" under shop everything. It's too late, I've already uploaded it, so I'm committed now. 

Re-categorizing your inventory is tedious and time consuming, especially if you have a large store (hello, dropshippers), but creating separate collections for each product type will ultimately help your SEO by bulking-out your website.  Each collection page needs an H1 with the same wording someone would google and a short description. 

ETHICAL DRESSES
MadeFAIR's dresses are created from sustainably-sourced textiles and manufactured using Fair Trade labor practices.

Shopify users can create "smart collections" which, if used correctly, will speed-up your re-categorization. If you've already appropriately categorized your products on each product page, then you can create smart collections by setting Product Type is equal to Dresses on your collection page. The advantage of taking the time to do this now is any future products within that product type will automatically be filed into its collection. For more information, visit Shopify's help documents, or leave a comment if I've lost you.

The Sidebar Menu

Are there any orchestra geeks here? I played the cello for over a decade and I don't know how else to describe this e-commerce principle. Bear with me:

If a website's main menu is like the peg tuners on a string instrument, then the sidebar has the fine tuners. You should be able to tune a cello using only the pegs, but the fine tuners exist just in case you need a small adjustment. 

Nailed it.

Once you've narrowed-down your products into universally-understood collections, you can then add specificity in the side bar on the collection page: "Sort by Ethic" or "Sort by Brand" or "Sort by Collection." Color, price, and size can also be included here. Depending on your theme, you can make the sidebar look less cluttered by creating accordion menus. Ask your theme developer if this is possible, or comment below with your theme name and I can either tell you how to do it or direct you to the right place. 

Collection Page Set-Up.jpg

See your success with Google Analytic's "behavior flow"

Google Analytics isn't just for checking your hits, referrals, and bounce rate. There's a feature called behavior flow, which allows you to view your customer's journey from their landing page to checkout. A site with a poorly designed UI will see most of their customers drop-off after the landing page. Once you tweak your main navigation, you'll begin seeing 1) more landing pages and 2) more columns, because you've created a more intuitive site that urges people to keep browsing. For a more in-depth tutorial on behavior flow, click here, because I. Just. Can NOT get into it right now.

tl;dr

  1. Don't waste main menu real estate on "shop by ethic" or "shop by brand" or "shop by collection."
  2. Someone please find me a secondhand Kate Spade Topliner Trench (size 8 US, 10 US is fine, too).
  3. Categorize your items into common-sense collections.
  4. Use the sidebar to help customers narrow-down their search.
  5. Study your customer journey in Google Analytics' Behavior Flow to see where you can improve your UX. . . UI? UX/UI.

Did I miss anything? Do you disagree? Feel free to leave a comment to let me know.