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?
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.
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.
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:
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:
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.
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.
Cart
Search:
Value Propositions:
Mockup your different product page states:
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.
More articles from the Arq team on Shopify, Wellness, Trends, email, and more.
.png)
