Request a Demo

Conversions by Design: 8 Design Hacks for your Grocery eCommerce Website

Global retail eCommerce sales are projected to reach USD$4.5 trillion—that’s a nearly threefold lift in online revenue—by 2021. And yet, we know intuitively that not all eCommerce sites are created equal: Shoppers have more options than ever before when it comes to the products they buy and the sources they seek out for those products, and nearly three-quarters of shoppers will abandon a retailer’s site because they can’t find what they’re looking for quickly or easily enough.

The competition for eCommerce dollars is fierce, and the most successful marketers today know that they can use technology and design to their advantage—to make consumers’ online shopping experiences as seamless and user-friendly as possible, thereby keeping them on their sites for longer periods of time, and filling their shopping cart with more products in the process.

If you’re looking to improve your customer retention and conversion rates, consider applying these eight smart design hacks that’ll keep consumers coming back to your grocery eCommerce site, and buying more when they do. 

1. Use technology to your advantage

The biggest reason eCommerce sites fail is because shoppers can’t find what they’re looking for. According to a study by Forrester, a well-designed user interface (UI) can facilitate better user experiences (UX), leading to a 400% lift in conversions. If your eCommerce sales are lagging, it may be time to invest in an updated UI that makes the most of your products and services. In today’s digital age, it’s critical to keep UX top-of-mind at all times as you design, build, test, and launch your new eCommerce site.

2. Make room for white space

If you want your products to be purchased, they’ve got to be easily seen. Allowing for more white space above and below lines of copy makes it easier for users to pick out that product they can’t live without—especially as more consumers shop on smaller screens these days than ever before.

3. Keep it clean

Some designs depend on the colours of the rainbow to call out different products, categories, and other points of interest. However, too many colours can distract and even make it difficult for shoppers to interpret a site’s navigation. Instead, suggests Heidi Pun of Design for Founders, pick a small array of colours and give each one a task. For example, consider selecting one colour for branding elements and choosing a complimentary or contrasting colour for your calls to action (CTAs).

4. Keep it consistent

Maintaining the same styles throughout your digital brand presence trains users on how to navigate your content. It means they’ll know what to expect, and will be able to find exactly what they’re looking for more quickly and easily, leading to faster conversions.

5. Make it fast

As an eCommerce retailer, your job is to get customers through the buyer journey as quickly and painlessly as possible. However, according to a Google study from September 2016, 53% of mobile site visits are abandoned if pages take longer than three seconds to load, and one out of two people expect a page to load in under two seconds. Mitigate your abandonment rates by facilitating the checkout and payment process using one-page checkout, single-sign-on and other time-saving tools. And consider following these simple steps to improve your site’s load times:

  • Optimize the images used on your site
  • Pare down JavaScript file sizes
  • Minimize the number of fonts on your page
  • Reduce the number of files that load at the same time when users visit your pages
  • Reduce or consolidate data and analytics tags that may slow down your site

6. Build engagement and sales with dynamic content

Based on Facebook IQ research, mobile-first shopping is up 18% in the U.S. and 56% from 2015. What’s driving this trend? We argue that greater interactivity is a key factor. Consumers want to feel connected with their preferred brands, and more big-name retailers have caught on to the power of dynamic content, like dynamic product views or videos, to build shopper engagement and increase the likelihood of purchase.

7. Don’t skimp on the (value-driven) CTAs

Ensure you’ve got a buy button on-screen at all times, no matter which page shoppers are on or where they are on your page. And while the presence of buy buttons is key, it’s equally important to focus on the message. And above all else, make your CTAs remarkable: Use clear, commanding and active language that gives real reasons for consumers to become customers on your eCommerce properties. This means communicating the value of products in clear and specific terms while avoiding old standby CTAs like ‘Buy now,’ ‘Submit,’ and ‘Click here.’ (For more ideas on how to get consumers’ attention when they’re using your grocery eCommerce site­­­, check out these seven steps to a high converting order button.)

8. Test, test, and test again

While it’s not specifically about design elements per se, the highest-converting eCommerce sites tend to be easy to navigate and save consumers time at every step along their path to purchase. But it’s pretty safe to say that these sites likely didn’t start as conversion machines from Day One. Instead, successful eCommerce marketers invest in user testing to determine the spectrum of different factors that can affect the likelihood that shoppers will spend their hard-earned dollars on their sites. By testing your grocery eCommerce site over time—and across multiple web interfaces and devices—you’ll gain a better understanding of how consumers engage with your brand, search for your products, and make buying decisions on your eCommerce platforms.

Bonus tip: #9 – Invest in a style guide

Looking for a way to maintain consistency across digital channels? Set out the dos and don’ts of your brand presence in print, online and beyond. And once you do set out your brand’s style, make sure to revisit it on a reasonably frequent basis—say, once a year or so. Why? Well, as new mobile devices launch every year, consumers continue to adapt the ways they use technology to search for, find, and purchase your products and services. Technology doesn’t live in a vacuum, and your site or app design shouldn’t, either.

 To learn more about how mobile will impact the grocery shopping experience of the future, download our Mobile Commerce Playbook for Grocers below. 

Articles and resources by the Mercatus team to help guide you on your eCommerce journey.

Speak with the Grocery eCommerce Experts

Thanks for Requesting a Demo!

One of our Grocery eCommerce Experts will reach out to you within 24 hours. In the meantime, we encourage you to check out our Resource Hub for the latest industry news and insights.