Top 5 Things Designers Miss When Designing for E-commerce

Designing for eCommerce requires more foresight than just making your typography pretty and getting your layouts finessed. As designers we need to plan the experience of our store experience as the business goes through the natural ebbs and flows of running an imperfect business. Designers love to design for the "ideal" state, but we often forget the states websites are in in the non ideal states. Planning for these page states can vastly improve our customers experience when they visit the store, inventory is not in the ideal state that we plan for. What if the product sells out? What if we're in a huge site-wide sale, or the business pivots their product offering?

Here are the top 5 things we see designers miss

View this post on Instagram

A post shared by Lea Gucciardi | Arq Design | Shopify Agency (@arqshopifystudio)

1. Empty States for the Cart

The biggest design challenge you have is to move Cold leads (e.g. customers who have never seen the product before) from a prospect to a converted first-time consumer on their FIRST visit. All of these customers will never have had a product in their cart yet - maybe they don't know where to start! You’re missing out on a huge opportunity to guide your customer on a top selling product, if you’re not already designing for an empty cart state! Whether that’s a clever cross-sell or pairing quirky copywriting and aesthetic content, to create a moment of connection with your customer. An easy way to develop messaging that increases trust, is by setting up a purchase collection (i.e. “start here,” “most popular,” “customer’s start with”) to curate the new buyer who has choice overload or doesn't know which products to start with.

2. Missing or Hard to Find Search

Search is often an overlooked feature on the site, because search bars aren't the most aesthetically pleasing to design. But leaving out design for your search experience can be killing your high-conversion intent customers.

- Consumers who use search are 2.4 times more likely to buy. Searchers also drive more revenue, spending 2.6x more across mobile and desktop compared to those who don’t use search.

• 34% of users tried to search for non-product content.
• Up to 30% of e-commerce visitors use internal site search, and we’ve all seen this one: site searchers are 2-3x more likely to convert.

Source: Algolia blog - "40+ stats on e-commerce search and KIPs"

Search should be easy to spot, not hidden away or a barely there icon that’s tucked into the corner of your site! Especially if you have a deep catalogue, consider creating a search focused header design to allow your customers to find exactly what they want right away.

 

 

Some of our favourite search focused templates:

• Flex theme - Emporium template from Out of the Sandbox‍
• Flex theme - Bloom template from Out of the Sandbox‍
• Turbo theme - Florence template from Out of the Sandbox
• ‍Superstore theme from Pixel Union

3. Add Value Propositions

Be mindful and proactive about customer concerns that could potentially hold them back from completing a purchase from your client’s store.  You can include badges somewhere on your product page that address key features that address customers concerns before they add to cart. For example:

• Do you have a sale on or a price increase coming up?
• Are there any products low-in stock?
• Is this new or a best seller?
• Is it related to seasonal content or a new look book?
• How many reviews has this product have? Highlight social proof.
• Do you have an amazing return/refund policy or guarantee?
• Is there a free gift with purchase of special incentive to purchasing online? 

Blume does an amazing job using simple icons and short descriptions of 3 key value props: free shipping, money back guarantee, free gift with purchase.

 Our client organza saw huge up-tic in sales when they highlighted a money-back guarantee for this sensitive issue product.

4. Tactical Sales Messages

Your free shipping promo doesn't have to only live in a standard top bar (which we recommend having as they have been proven to increase conversion rates on first-time buyers). Consider putting a targeted message on product pages or collection pages for high value products that shipping is free with purchase.

This is an opportunity for a high value promotion piece of copy to be made persistent through the site, regardless where the customer lands. Your analytics will tell you firsthand that the customer is not always landing on the home page.

The most easy win is to include a site wide banner in your header to create less uncertainty around shipping.

5. Product Page States

Designing for different states on your PDP helps keep customers happy and in the know. What does it look like when your product is on sale, out of stock, low stock, or on pre-order? Nothing is more disappointing than adding an item to your cart, waiting an hour and trying to place an order only to find out that it’s out of stock! An easy solve would be an urgency message to inform the customer that there’s only a few left of an item, and to quickly grab what they’ve been eyeing. Accounting for different states will plan for the business and complexity in the above the fold content, to ensure your “add to cart” button is prominently featured. 

Marea wellness has a clear sold out state on their products but doesn't help customers find a product they can easily add to cart. 

Can you tell that this bathing suit is on Pre-order?

Add this checklist to your next design handoff

Cart

1. Empty Cart cross sale or featured collection
2. Include a tactical sitewide promotion message
3. Write some on-brand quirky messaging that inspires your customer

Search:

1. Make search easily findable
2. Mockup the Empty search state
3. Mockup a search results page

Value Propositions:

1. On your product detail page as simple 1 liners
2. Visual badges/stamps/seals

Mockup your different product page states:

1. On Sale
2. Low in Stock
3. Only a few sizes/colors/options left
4. No Reviews
5. Pre Order
6. Best Seller
7. Already in Your Cart
8. Promotion or coupon/sitewide sale

Did you know we offer white-labeled or partnership development services for designers who want to offer Shopify design for their services?

Shopify is our specialty and we love partnering with agencies and studios to turn their design dreams into a reality. Book a call with us, or visit our White Label services page to learn more.