Living in a big urban centre can have its ups and downs. While you may live within a few hundred metres of a full-stocked grocery store, depending on your neighbourhood, you can easily find yourself faced with a 20 to 30 minute walk. Owning a car isn’t a realistic option for many, and a less than reliable transit system doesn’t help matters either, so what options are you left with?
Longos-owned Grocery Gateway is one such option, and allows you to shop for, buy and have groceries delivered right to your door at a time that’s (usually) convenient for you. It’s a great alternative to hauling heavy groceries home, and can save you significant time and money as well. The online experience Grocery Gateway presents for its customers, however, leaves a lot to be desired.
When in a grocery store, we’re looking for our favourite jar of spaghetti sauce, tub of ice cream or container of yoghurt. There are many visual cues that allow us to easily pick out the item we’re looking for from hundreds of others on the shelves. The human brain and eyes can do an amazing job of isolating certain colours and features; As we saw from Dan Roam’s SXSW talk last week, about 75% of the brain’s sensory power is devoted solely to vision. Much in the same way that you can recognize a friend from a crowd of other people, you’re usually able to effectively pick a recognizable and familiar product out of a crowded shelf.
Part of this comes from a (sometimes) logical and expected grouping by the shelf stockers in the store, but most of it can be attributed to brands that invest in package design that allow us to pick up familiar colours and shapes in the store. Grocery Gateway relies too much on text and the user scanning long lists of product names in making their selection. The name of the product is a secondary consideration when trying to select preferred foods. A visual view similar to that which we designed for the Toronto Star would do wonders in helping shoppers select familiar products in an unfamiliar environment.
There are pitfalls to designing an experience around the appearance of a product. As we’ve seen recently, much like on the Web, brands can alienate their best customers with misguided and poor rebranding. However, our experience is that it’s better to give users the choice on how they’d like to browse given a set of content with a wide breadth and depth. While Grocery Gateway uses product images while browsing for products, they’re often inconsistent in their presentation and are not given enough emphasis. Descriptions are also unnecessary at this level of browsing.
The last thing you want when you order a product online is to receive something you weren’t expecting – either the wrong product, or the correct one in the wrong colour or size. I’ve been surprised a couple times ordering through Grocery Gateway to receive products that didn’t match the size or freshness that I had expected.
While ordering a loaf of bread, trying to eat as healthy as possible, I picked ShaSha Co.’s Organic Multigrain bread. When it arrived, it turned out to be about half as large as a standard loaf of bread. Grocery Gateway doesn’t have any way of conveying relative size, nor do they have a way of showing how ripe/fresh produce is, always delivering bananas that are as green as grass.
Simple attributes could be designed into product pages to describe the qualities of a product. Size could use simple text links, like small, medium or large. Ripeness is a little harder to describe, but could use colours and richer controls like a banana slider that changes colour as the user interacts with it to indicate desired ripeness, as shown above (hat tip to Andy Warhol for the banana). Adding more fine-grained attribute controls with intelligent defaults would add immensely to Grocery Gateway’s shopping experience.
Shopping for groceries is a different type of online shopping experience than shopping for clothing or gadgets. While the latter tend to be fairly discrete activities, like buying an iPod or pair of shoes, grocery shopping tends to be a recurring weekly activity in North America. Knowing this, we can make smart design decisions around the items repeat customers buy on a weekly basis. Grocery Gateway’s “MyList” lets users add selected items to a favourites list, which is handy in that it lets you automatically add all of these items to your cart on your next visit, but unfortunately puts the onus on the user to manually add and manage all items.
An intelligent system that keeps track of purchasing patterns could ask if you forgot the milk if you’ve purchased it every time in the last 10 deliveries. Using the same system, grocers could also take advantage the opportunity to act as mentors in living a healthy life. By suggesting healthier alternatives to those you’ve added to your cart, users could see suggestions of low sodium and organic foods where possible. Those especially mindful of their place in the environment could go farther and suggest produce and other food grown locally rather than some that has been flown halfway across the world just to sit in a warehouse.
While Grocery Gateway has been great at making life easier by delivering goods on time in a pre-selected window, it has a lot of untapped potential with its online shopping experience. Customers are increasingly expecting more from online retailers, especially in this case where the frequency of shopping is increased. Usability, design and experience issues become magnified with each repeated use and can lead to quicker customer bailouts and decreased satistfaction.
When brick & mortar retailers move their products online, they often leave behind some of the core emotional interactions that make up their experiences. One could argue that feeling for the right avocado in the produce section is a pretty mundane activity, but it’s actions like this that put us in control of the food we provide for ourselves and our families. Grocery Gateway should embrace their very important place in their customers’ lives and use that opportunity to provide a superb shopping experience.