/ Ecommerce

10 things your competitors can teach you about user experience in grocery e-commerce

How do the top grocers in Asia create a delightful user experience online?

The food & grocery vertical has one of the highest time on site and pages per view. Check out our analysis of 370 e-commerce websites across 5 verticals to learn more.

In this article, we zoom in on the 3 large online food & grocery stores in Asia with the best customer engagement and unveil how they create the grocery shopping experience online. The 3 companies are:

  • Coles Online
  • Woolsworth
  • Redmart
  • First, a look at their traffic and engagement...

    We have chosen 3 of the largest e-commerce companies in the Asia Pacific with English websites, highlighted in red below. For more details, refer to our Asia Pacific food & grocery market report.

    We also selected the 3 players that lead in terms of engagement metrics. Compared to the average of the 10 major Food & Groceries e-commerce companies shown above, Woolsworth, Coles Online, and Redmart have higher than average minutes on site and pages per view. The charts below show how these businesses perform in terms of customer engagement metrics:

    Now, let’s look at their user experience

    In this article, we focus on the home page, navigation and search functions of online grocery sites because these are the doorways to sales conversions. There are many other aspects to cover, but we’ll reserve that for another day.

    We highlight what we think are user experience (UX) patterns that work well. This is based on our experience from designing and building apps impacting over 100 million users for companies like Openrice, Apple Daily, DBS Bank and many others.

    Coles Online


    Website of Coles Online


    Search results for 'bread' on Coles Online


    Autocomplete search feature on Coles Online

    What works

    1. Site-wide layout: When we shop for groceries, the convenience comes from being able to efficiently find what we are looking for. Coles does a great job with this with by separating their page into a red (search), light gray (navigation) and dark gray region (checkout).
    2. Left vertical navigation: Most e-commerce websites have navigation spilled out horizontally. Because grocers have much more categories of stuff, the vertical left navigation is a sensible choice.
    3. Card-like product layout: Products are displayed in a row, in a card-like format, to facilitate exploration of similar products by different brands, much like how they appear on the shelves of grocery stores.
    4. Price comparisons: To assist in price comparisons, price per gram is shown and standardized across all bread products.
    5. Bought before: Groceries are perishables that we constantly have to replenish. Having a bought before function is great for highlighting potential replenishments and increasing basket size.
    6. Search: Prominent search bar that stands out against the red background of the header. Searching for ‘bread’ brings up a few unobtrusive advertisements. Relevant product categories are highlighted.

    What could be improved
    7) Shipping Policy: As a new customer, I’d love to know what their shipping policies are
    8) Autocomplete: Could benefit from additional features, like allowing users to streamline search by categories, or bolding suggested words.

    Woolsworth


    Website of Woolsworth

    Search results for 'bread' on Woolsworth

    Autocomplete search feature on Woolsworth

    What works

    1. Vertical left navigation: Because grocers have much more categories of stuff, the vertical left navigation is a sensible choice. Also seen on Coles and Redmart.
    2. Price comparison: To assist in price comparisons, price per gram is shown and standardized across all bread products. Also seen on Coles.
    3. Terminology: Use of word ‘Aisles’ makes the online marketplace immediately familiar to customers of supermarkets, making the Offline to Online transition more seamless.
    4. Autocomplete: Autocomplete feature is easy to use and unobtrusive.

    What could be improved
    5) Clutter: Website can look relatively cluttered as the content blocks are of varying sizes and formats. This technique is less effective in a food & grocery site than a fast fashion one. Stock graphics on the side to illustrate categories are not very useful and detract from the focus on products.
    6) Prominence of search: Search bar is small and harder to find especially when the graphics below draw attention away.

    Redmart###


    Website of Redmart


    Search results for 'bread' on Redmart


    Autocomplete search feature on Redmart

    What works

    1. Site-wide layout: When we shop for groceries, the convenience comes from being able to efficiently find what we are looking for. RedMart does a great job with this with by separating their page into a red (search and checkout) and light gray (navigation) region.
    2. Vertical left navigation: Because grocers have much more categories of stuff, the vertical left navigation is a sensible choice. Also seen on Coles and Woolsworth.
    3. Encourage first orders: Promotions and discounts stand out on the front page, focusing on people making their first orders. The focus on first-time customers suggests that it is a new company still trying to acquire a customer base.
    4. Easy filtering: Products can be filtered easily based on categories, brands, or price
    5. Autocomplete: Among the sites we surveyed, Redmart has the most fleshed out autocomplete feature. Products are suggested by category, helping customers refine their searches. On top of suggesting broad categories (e.g. skimmed milk, buttermilk), Redmart also suggests specific products and lists out their prices.

    What could be improved
    6) Sort order vs. ratings: While we love that ratings are included to aid the purchase decisions, it is confusing and a deterrent to sales that in a list sorted by popularity, the first few products have such low ratings.

    Conclusion

    In summary: 10 things you can learn

    1. Take advantage of how the eye tends to scan pages in an ‘F’ shape. Place product categories on the left side, and search bars in the top or middle.
    2. Grocery shopping is a routine activity, and people purchase roughly the same products every time. Providing a way to save ‘favorite’ products or show ‘bought before’ products is a great feature.
    3. List out multiple products in a row to allow customers to browse through catalogs quickly.
    4. Product categories should not be too specific, and should not be hidden beneath menus.
    5. Search is an important way for customers to find products. Optimize search to ensure results are relevant.
    6. Provide price comparisons by listing out the price per unit weight. This helps price-sensitive customers make faster purchase decisions.
    7. Ads can be included in search results, but they must be differentiated from genuine search results to build customers’ trust.
    8. Search filters are a useful tool, especially when many results are returned.
    9. Implement autocomplete widgets on your search bars to guide searches.
    10. The best autocomplete widgets are those that remain unobtrusive while helping people refine their searches by product category.

    Over to you###

    Thank you for reading, and we hope you have been inspired to use better web design to strengthen customer engagement. For more information on what we do at Metisa, reach out to us at hello@askmetisa.com.

    Justin Yek

    Justin Yek

    Partner & cofounder at Altitude Labs, creator of Metisa, former investment banker, public speaker, hobbyist musician

    Read More