One-Sheeter: Best Practices for Home Page, Product Pages and ERP Integration

Friday, August 9, 2019Lindsay Hampson

Best Practices For Home Page, Product Pages and ERP Integration for Shopify Plus

Imagine this: you’re the world’s premier purveyor of shoes for emus and you’re looking to step up your ecommerce presence. Your killer marketing strategy has brought torrents of new traffic to your ecommerce store: now what? Garnering attention and gathering new eyes on your site is half of the battle, and now it’s time to convert them into paying—and hopefully returning—customers. Though every shopper is different, there are a myriad of best practices to consider when designing your home, collection, and product detail pages.

The first element to consider is the homepage—after all, it’s more often than not your one and only chance to make a good first impression.

Home Page

1. Images

The hero image and any other imagery included on the homepage are powerful tools because people respond viscerally and immediately to visuals. It takes less than 15 milliseconds for your brain to process an image, so making sure that your choice of photos or graphics say what you want them to say is a pretty big deal.

• Are the images effectively telling your brand’s story, or distracting from it?
• Are the colors complimentary to your brand’s?
• Are the images eye-catching? Or will they be easily forgotten?
• Are you using a slide show? 

You may want to reconsider: slideshows, especially automatically-scrolling ones, are widely considered to be bad UX. Why? For one, slideshows can be distracting and can cause a potential customer to navigate away from your shop completely. Additionally, they can cause accessibility issues with your website, or create a poor mobile experience.

2. Information architecture

The layout and hierarchy of your ecommerce shop can make a huge difference when it comes to converting casual browsers into loyal customers. Making sure that your ecommerce site is easily navigable and not too complicated will make shoppers feel comfortable and confident in making a purchase.

Are there more than seven navigation items? 

According to Miller’s Law, “the average person can only keep 7 (plus or minus 2) items in their working memory.” Anything above that threshold of 7 increases the cognitive load of the user, expending mental resources that they ideally shouldn’t have to use. An effortless shopping experience is one that doesn’t require much.

Keep Hick’s Law in mind: it states that “the time it takes to make a decision increases with the number and complexity of choices,” meaning, more choices will overwhelm your customers, possibly causing them to navigate away and shop elsewhere.

Is there more than one call to action (CTA) on the page? 

On a product detail page, ideally, there should only be one.
On a homepage, there can be more, but the main CTA should be clearly-marked and more prominent on the page than others.

3. Embrace the space

White space can be your friend—as long as it doesn’t push important content below the fold. Group related elements together, as stated in Gestalt theory. This theory implies that the mind understands that “the whole is greater than the sum of its parts.”

Keeping a good amount of whitespace around text can improve comprehension by making content easier to read. If a user travels through the homepage to this next element, then you’re already well on your way to making that sale. The next piece of your ecommerce site to consider is the collection overview. To keep the customer moving through the funnel, collection overviews should be rife with effective CTAs to ensure they end up in the right place. (One step closer to the checkout!)
 

Collection Overview & Collection Pages

1. Use Breadcrumbs

Much like Hansel & Gretel leaving a trail of breadcrumbs to trace their way back home, you can leave a digital version for your users. The importance is so that you can provide context for where a user is while on your site.  

If a user wants to travel back to a higher-level category, they’ll be able to do so easily.
Including breadcrumbs in your site’s design will help to keep visitors on the page longer and to decrease bounce rate once they’re on the page.

2. Keep to the left

Ever notice that most popular ecommerce websites feature their filtering on the left side of the collection pages? This is by design, and thanks to another law of UX. According to Jakob’s Law, users spend most of their time on other sites, meaning that they prefer for your site to feel similar to the other sides they’ve been on and already know.

3. All in the CTAs

One way to keep shoppers distraction-free and engaged in your ecommerce site, sharing just the right amount of details on the collection page is ideal. Show enough to persuade them into following a CTA, but not so much that they’ll be overwhelmed by the choices. Additionally, keep the products themselves in mind when selecting which details to include. Higher-priced items that would require a larger investment from a customer such as custom wingtips for your emu need a longer description, whereas emu socks can get by with a shorter one. This will help to prevent returns and disappointed customers.

Use badges to notify shoppers if items are on sale, popular, or low in stock. 
If applicable, include color swatches under product images so shoppers will know all possible options for an item before clicking through to a product page.

Though it should go without saying, always, always include the price along with items on the collection page. 
Quick view is a great option to feature so that users can learn more about a product without traveling to an entirely new page. If your prospective customer clicks through to a product detail page, congratulations! They’re only a few steps away from purchasing a pair of your finest footwear for emus that money can buy. Like all other elements, product detail pages—or, PDPs—must also adhere to UX best practices to keep conversion rates high.

Product Detail Page (PDP)

1. Images (yet again)

Much like your homepage, your product pages need the best images to show off your emu shoes in a way that will entice shoppers to make a purchase. 

Is your product imagery well-lit, high-quality, and large enough to be zoomed in on without appearing grainy or pixelated? 
Does the choice of photo clearly display the item in the listing?

2. Add some value

Though not entirely necessary, other elements can be added to PDPs to increase conversions. Reviews: including reviews will make customers feel more confident in their choices. Reviews with photos can also show shoppers just how dashing their emus will look in their own pair of emu shoes.

Recommendations: giving visitors recommendations for similar items could help them find what they’re looking for easier, or, could inspire them to add an extra item to their cart, increasing average order value.
 

Final section

You’ve done it. You’ve brought a customer all the way through the funnel and they’ve added your one-of-a-kind product to their cart. Shopify has perfected the ecommerce cart but you should be mindful that there aren’t any CTAs that would distract shoppers away from completing their purchase. Additionally, Hick’s Law applies here as well: don’t give users too many options for shipping, as the burden of choice could lead to them abandoning their carts, leaving their emus shoeless and you without another sale under your belt.

Because you’re a UX master at this point, the customer has shared their address and payment information, selected their shipping option, and completed their purchase. Success, right? Well, not just yet, because there’s still an entire journey that needs to take place before a large, flightless bird can strut around in your emu shoes.
With the right webstore images, info and space, customers wanting your shoes for emus will flock (pun intended) to buy. Your next problem now that demand is covered is going to be high volume fulfillment.

This section is not as exciting as snapping emus. in shoes, but it is extremely vital to keeping your customers happy. You need to find a way to deal with the manual work your growing online business is making for you and your staff. In other words, you need to tackle ecommerce order fulfillment and contemplate process automation by way of back-end integration.

Let’s dive in. If you started seeing greater demand, but kept everything else within your business processes the same order >> to >> delivery time would be long. 

1. Customer orders off your webstore
2. Item flows to you to be manually rekeyed
3. Fulfillment
4. Order Update
5. Shipped

If you started seeing higher demand, but integrated your webstore to your back-office ERP or accounting system, automatically order data would flow and timeline would be much faster. You see, two steps in the business process are completely eliminated because data is synched to flow, in near-real time, bi-directionally between your systems. So, your same customer who places an order on your webstore will get their package on their porch faster. 

1. Customer orders off your webstore
2. Item flows to you automatically
3. Fulfillment
4. Order Update
5. Shipped

Let’s look at an example. Most merchants get at least 20 orders or more a day. Say that 10 of these shoes for emus orders came overnight:
→  10 overnight orders
→  20 orders = 5 hours to process for some customers →  10th order = 150 minutes to fulfill (2.5 hours)

The result would sadly be your shoes for emus business getting a bad customer review as the emu fan waited for their order, and it was late – or worse – it was wrong.

Why does automation work?

1. Increase customer experience and satisfaction (reduce errors and WISMO cases)
2. Reduces friction in your business during fulfillment as your customer is not waiting on human intervention for the majority of the order
3. Optimize to save time (online sellers are busy sellers)

Shoes for Emus: Final Section

So to the ecommerce manager of shoes to emus, it is a really smart call to integrate ecommerce < > back-office systems. But it is not free. So why pay a vendor for eCommerce fulfillment process automation? It cuts fulfillment time in half and reduces lead time to get an order to a customer. Plus, it allows you to compete with Amazon’s fast ship high bar.

So long, farewell

We hope your emu-loving imagination guided you through some key steps in customer acquisition and order fulfillment. Grab hold of these nuggets and start optimizing your ecommerce business, such as. 

• images
• information arch
• embrace the space
• breadcrumbs
• keep to the left
• CTA city
• add value
• manual fulfillment vs. automated fulfillment

Next steps

Download the Full One-Sheeter by Noticed and eBridge Connections.

>>  Request a Demo
>>  Map Your Ideal Integration