In this opinion piece, the creative director of GMG Digital, John Isaac (pictured below), decides upon a spot of online grocery shopping and discovers the chief protagonists still have a long way to go…
A Current Affair ran a story on 27 May 2015 featuring Woolworths’ supermarket-themed warehouse where online orders are picked and delivered by dedicated staff equipped with a basket and mobile device. Set up like a traditional supermarket, ‘personal shoppers’ walk through the aisles and pick your order. The Woolworths representative began explaining the concept, benefits and the delivery process and I have to admit, at this stage I was feeling excited. I would love to witness a virtual show down between Coles and Woolworths while Aldi sits on the sideline.
I admit I’m not a regular viewer of ACA but since seeing the commercial about this story, I thought I’d tune in.
The online grocery shopping space in Australia is still relatively new and no one seems to have perfected the digital shopping experience yet. The potential is massive and all it takes is one company to deliver a delightful online shopping experience combined with an efficient and convenient to-your-door delivery service and they could potentially dominate the market for a very long time. Aldi disrupted the in-store shopping experience successfully, but we’re still waiting for a digital master.
Woolworths recently launched their new online grocery shopping service. The site left me scratching my head. I guess I expected something different, something more refined. I believe there are enough learnings in the digital world these days which enable us to build useful and engaging features and elements on an online shopping site. We should by now, understand an online shopper’s needs.
I spent seven minutes on the site until I’d seen enough. Here is what I discovered during the seven-minute period:
First Impressions
When I first landed on the page, there was no clear direction. Where do I go? What do you want me to see? If you want me to shop for groceries, then show me the way. There was no real focal point to grab my attention. I didn’t know whether to begin browsing through the products or start running through the tiled content. The first thing I did notice was the left-side image carousel which I knew would be a navigation tool, however, there were no instructions or calls-to-action. (More on the carousel and search box later.) My attention was then drawn to the tiles which take up the main real estate. These tiles consisted of: Sore Throat Lozenge, Woolworth Flowers, AFL tickets, Milk etc. but the single tile which really caught my eye was the one titled ‘New To Online?’ By clicking ‘Discover More,’ I was taken to a page with more tiles. On this page, there was mention of free delivery and a free 1-month delivery saver. Information such as this should hold prime real estate on the home page as it’s a strong selling point. Instead, I had to click two or three times to find out more. So, since we’re pushing for convenience, telling the potential customer you provide free and easy delivery should be a major priority.
A big reason why Ikea have been so successful with their physical stores, apart from offering cheaper furniture, is that they spent time understanding customer behaviour. A strategy called ‘way finding’ was implemented in their stores to direct foot traffic in certain directions. You will notice that the ‘shortcuts’ within an Ikea store aren’t immediately visible (the signs are quite small) and that’s because they want to be in control of your movements. So next time you’re in Ikea and wonder why your feet are so sore, you know there’s a valid reason. You don’t have to follow the arrows on the floor. You can always cut through an entire department using a side door, you just have to find your own way.
Give Me A Search Box
Online shoppers are now more demanding and expect user-friendly features. The good ol’ search box has been reinvented and many sites are now making it their main feature. The main reason is that data suggests online shoppers are looking for variety and instead of searching for something specific, they are more inclined to search for the main phrase and let the auto-suggest feature display a list of results. So if I type ‘Pizza’ the search box can reveal some suggestions for me. This is handy as there are more and more new products being shipped to market every day.
The problem with Woolworths’ search box is that it’s tucked away above the left-side carousel and it doesn’t make me jump out of my seat. It’s quite small and looks like it’s hiding in the closet instead of coming out to play.
Barnes and Noble is a great example. The search box immediately grabs your attention and clearly provides direction. The user understands they can search through a large volume of products and can also search within a specific category. Barnes and Noble are so confident with their search feature that it even overpowers their own logo. They also believe the potential customer will benefit from this feature hence why it is in direct view. Make us believe what you believe!
What I would suggest for Woolworths is to place more emphasis on the search box. The current text within the search box is fine. Time and time again I have seen heat maps where the search box is red hot and from personal experience, search boxes have let me down. It’s simple, give people what they want and don’t make them jump through hoops. This adds more happiness to their experience.
Do You Deliver???
Let’s be honest here. Grocery delivery services in Australia are still a growing market. There must be a reason why certain companies in the US are exploring the possibility of using drones for home delivery and promising same day delivery as well. I’ve heard it all before whenever I mention the US as an example, Aussies say “There is more demand in the states and their population is much larger.” But the way I see it is if demand isn’t met, then there is an issue regardless of geographic location. If one Australian company gets it right, the others will follow.
On the ACA program, the Woolworths spokesperson was explaining the home delivery concept. It reminded me of Coles’ attempt where your only option is to select from available delivery windows throughout the week and are charged based on your selection.
So if grocery delivery is an area of concern or needs to be explained and Woolworths is attempting to provide a better delivery service than Coles, why aren’t I being bombarded with delivery related information on the home page? Explain it to me as soon as I land on your home page.
Above is the Diapers.com example. Now, this example may be a little extreme, but you can see how strongly they feel about shipping. There is a constant reminder within the header (above the search box) thanks to a nice little green plane and heading which also features a ‘learn more’ link. This is ideal for people wanting to know more about delivery options, but the other benefit is it continuously builds trust and faith as the user understands there won’t be any surprises later on in the shopping journey. A quick educational piece such as this can go a long way.
What I would like to see on the Woolworths’ site is a delivery truck icon or a small banner close to the Checkout button in the header. I still consider the grocery delivery concept to be quite foreign to many Australians and believe it requires clarification and improvement.
In the above screenshot, the right-side table is where you select the time and day you wish your goods to be delivered. You get to select whether you want to pick up your groceries, have them delivered or decide later, however this section isn’t highlighted or made clear. The font styling is too similar to the standard body copy. When I entered an address though, it quickly displayed the correct address. Such an important content block should be immediately recognisable.
The Iconic (www.theiconic.com.au) handle this issue well. Delivery info is clearly visible in the header. They may be selling a different product but the user psychology remains the same.
Guests Not Welcome – Do I Know You?
It still baffles me why so many Australian sites refuse to allow users to transact as a guest. It’s a simple concept. User purchases as a guest but is required to enter their email address only. User makes payment and is thanked for their purchase. User receives a confirmation email with a receipt of their purchase. User enjoys the quick checkout process, does cartwheels and will hopefully one day return to the site again. It’s a win-win. Seller makes money. Buyer saves time.
Woolworths doesn’t have this feature, but they’re not the only ones. Now many may claim this is no big deal but UX studies clearly show the more obstacles you place in a potential customers’ way, the more they’re likely to jump ship. This is another reason why many more sites are implementing a single page checkout process because it’s more efficient.
Less page loading and fewer clicks creates greater momentum and drive customers to the checkout much quicker.
Another benefit would be that once you’ve grabbed the customers’ email address, you can begin sending them updates and offers, enticing them to return or become a member.
Foreign Navigation & No Mega Menus
At first glance, the left-side vertical carousel looks nice. The images are great. However once you start using it, you realise the list never ends. It just keeps going and going and you don’t know where you are. It’s unclear where 1 category ends and where another begins and it’s just not straight forward or simple. Accordion style collapsible tabs would have done the job.
I found out by accident that you can actually click on the small faint numbers which run down the left-hand side. Again, there was no direction with this feature and I had to figure it out for myself.
Vertical menus can be very effective if executed well and the only way to achieve this is to keep it simple. While using the carousel feature on the Woolworths site, I was reminded of the VicRoads UX case study presentation at the UX Australia Conference. They had made a strong case for reintroducing the vertical menu combined with a clean horizontal slide out menu.
You can appreciate the number of products Walmart and Target offer on their respective sites. You can see in these examples that the left-side vertical menu expands out into the main container. It may not be the most visually stimulating list however, it is nice and clean.
The US version of Target takes it a step further than Walmart. The vertical tabs are nice and solid making them more readable.
Home Depot serves up another great example of a usable search box with a category selection option. Simple text based menus yet very effective.
Here’s another example. The main categories are listed clearly along the menu while the simple drop down also displays the number of products within each sub-category.
With Woolworths’ image carousel, I couldn’t help but wonder how much time and money went into the photo shoots and art direction. Again, Woolworths are not the only one.
Quick View – The Unsung Hero
One of my favourite features is the Quick View. You see a product thumbnail and instead of clicking through to the product page, you can access product information in the form if an overlay or popup (see example below). This allows the user to quickly access the product description and if they wish, add the product to their cart immediately.
One of my favourite sites is Forever New. Now clearly I’m not a customer because I’m not into women’s apparel however the site itself works brilliantly. It’s quick, minimal and gets straight to the point. Their Quick View feature is lightweight, effective and a perfect example.
Product Titles & Descriptions
I’m a fan of Jamie Oliver and have purchase his branded products before, so I thought I would find them on the Woolworths website. I noticed 2 things once selecting the product:
1. It wasn’t clear if I was presented with a popup or overlay. As you can see in the screenshot below, there is an X in the corner of the box but it looks like its floating. In fact, the entire product section is too small.
I was actually expecting to be taken to a product page but I guess the idea was to dynamically serve the content instead of loading a new page which is a feature I am a big fan of but in this case, it just fell short.
2. The product name doesn’t appear. Instead it gives you a description E.g. “Created with Jamie Chicken Fillets…” and only when the alt tag appears are you able to see the actual name and brand of the product. Extremely annoying if you are looking for a particular flavor or variation.
In this example, Jamie Oliver offers more than one variety of chicken breast and in the screenshot below it’s the crispy parmesan tomato variety, only that information is nowhere to be seen apart from the alt tag. Instead of displaying ‘Product Description’ the name of the actual product should be displayed.
Too Many Distractions
When my intentions are to browse a product catalogue, the last thing I need is pointless distractions. The main container should be dedicated to product related information allowing users easy and efficient access to products. Woolworths serves up a variety of tiles on their home page which lead users down a different path. I’m a firm believer in content structure and hierarchy. Presenting top level information should be priority number one while secondary information can always be placed in a smaller menu within the header, footer or sidebar. The main real estate should mostly be used to sell products because after all, that’s what you do.
In the above screenshot, for some reason, a video tile appears among the product grid. Now I understand it is a new website, but why interrupt my browsing experience? It’s the same as pushing a trolley down aisle 5 at 6pm while you dodge and swerve around the night fill staff. It’s just another obstacle which shouldn’t be there.
You may notice at times when you land on a site, there is a collapsible banner at the top of the screen notifying you if your browser is outdated or displaying a special announcement. The user has control over closing or hiding the banner. When Realestate.com.au launched their new site, they did something similar notifying users that they were on a new website but could still access the old. The banner was nice and clean and put the user in control of their journey.
The Biggest Challenge – In Store Experience vs Online Experience
I believe this is something which many online companies don’t even think about or simply ignore. How do we provide an online experience which is similar or consistent with the in-store experience?
We are slowly being programmed to use the self-checkout service in-store and while many people dislike the concept, many use it out for convenience or out of curiosity.
Maybe I am being a little harsh towards Woolworths but as I’ve mentioned throughout this article, they are not the only Australian company who could be doing it better. The Woolworths spokesperson on ACA did say it was a new site and clearly its early days. I’d encourage most Australian online retailers to implement traditional UX strategies and conduct extensive user research before picking up a colour pencil.
It is my belief that using an 80/20 approach is ideal for such large-scale projects, 80% being ongoing UX strategies, testing, refinement and a robust data-driven analysis, while the 20% is actual visual design. If we don’t respect a user-centric approach, how can we expect online customers to keep coming back? Time and time again I see companies and clients placing little to no emphasis on UX and moving straight to visual design because they can’t wait to get their hands dirty. These people don’t realise that the fun part is in all in UX.
I say this amid Myer announcing recently they are cutting jobs from their Docklands office in Melbourne and alarmingly most of the jobs are in IT and Marketing. I don’t know what’s happening behind the glass walls at Myer, but one would think that IT and Marketing are essential to driving online sales. So if a major brand such as Myer is closing down stores and downsizing their head office because of a revenue slump, isn’t it time we focus more on the digital world?
John Isaac is the Creative Director at GMG Digital. You can connect with John at LinkedIn.
