5UXConsiderationsForGroceryStoreeCommerce

Aug 7, 2017

A woman with a bag of peaches
We’ve seen eCommerce invade industry after industry, and nowadays you’d be hard-pressed to find a product that you can’t purchase online.
We’ve seen eCommerce invade industry after industry, and nowadays you’d be hard-pressed to find a product that you can’t purchase online. While some sectors have remained resistant to the eCommerce wave, it’s only a matter of time before they too are ushered into the digital realm.
Chief of these is the grocery industry, whose digitization hasn’t quite been accepted into the mainstream as standard online retail shopping has, but is certainly undergoing a period of rapid, tech-driven change.
5 UX considerations
Grocery eCommerce could soon be standard as more Gen-Zers millennials log on to shop (Source)
We’ve seen the establishment of online grocery services from major players in the industry, such as Walmart and Royal Ahold (Giant and Stop subscription services like Blue Apron HelloFresh.
And, of course, if there’s been one sign heralding the transition of grocery shopping to the online retail landscape, it’s Amazon’s blockbuster buyout of Whole Foods Market.
As more online grocery platforms arise, it’s crucial for a UX design agency to map guidelines specific to their needs. We shop differently for groceries than we do other products, so the UX principles of these platforms will contrast those that shape standard retail eCommerce.
We’ve compiled a brief list of these special UX considerations you need to take when designing for grocery eCommerce platforms.

Emphasizing The Shopping Cart

While online grocery shopping obviously isn’t going to abandon eCommerce’s cornerstone design feature, the shopping cart should take on a more pronounced role when designing for e-grocery platforms.
For typical online retailers, the shopping cart should be noticeable and recognizable, but ultimately take a backseat to the actual products. For grocery eCommerce, the cart should mirror how we shop for food in real life—a centerpiece of the experience.
walmart ecommerce
Take Walmart’s online grocery platform—their cart has expanded from its usual position in the top-right corner and now inherits the screen real estate usually occupied by the sidebar. Walmart’s UX designers understand their users need to be able to quickly review their cart’s contents at a single glance.

A How-To

As UX practitioners, most of us are naturally averse to how-to’s and tutorials, the logic being that if the platform needs a hand-holding walkthrough, it’s not user-friendly enough. Having said that, most grocery eCommerce platforms are a blend between normal online retailer and delivery service.
5 UX considerations

Prominent Categories & Organization

Every retail site should have a way for users to easily navigate their products through proper organization, using intuitive categories and filters that allow consumers to find what they need as quickly as possible.
In grocery applications, these categories have to be even more well-defined and accessible. Navigation should mirror the experience of shopping in a brick-and-mortar store. So what are aisles, the primary organizational unit of food shopping, if not categories and filters?
Referring back to the Peapod example used above, you see they even use the same terminology, including a “Browse Aisles” option in the toolbar. I’d actually argue Peapod doesn’t go far enough here—the Browse Aisles feature should be much more prominent on the page.

Customer Vetting

At first, this sounds completely counter-intuitive. What retailer would want to discriminate against their consumer base, only allowing a limited selection to shop?
Consider logging into an online grocery retailer, browsing their products, loading up your cart, filling in your payment and shipping information, and just as you’re ready to check out, you get an error message: this grocery service can’t deliver to your address.
It doesn’t matter if the service later expands to cover that user’s region or not—their business is long gone. First things first—confirm the user is eligible for your grocery delivery service.
5 UX considerations

Multi-Channel Offering

Most online retailers recognize the importance of a mobile presence, whether that’s a native app or mobile-responsive site. For grocery shopping, I’d argue it’s even more imperative. Grocery lists are usually lengthy and fluid, always changing as we add or change items last-minute.
Consumers should be able to fill up their cart on their desktop computer at work, then make changes on-the-fly with their smartphone as they cook dinner that evening, perhaps realizing they’re running low on cooking supplies or other culinary products.
Consistency across the two platform versions is key—users shouldn’t just be able to update their cart from their phone and desktop, but how they complete that task, and other tasks as well, should be about the same.

Conclusion

To summarize, the best online grocery user experiences digitize the characteristics unique to shopping at brick-and-mortar food stores, while also leveraging standard online retail conventions.
The blend promotes familiarity in two ways: how we shop in both the physical world and the digital one.
A grocery eCommerce company that partners with a user experience design agency can ensure their platform is a cut above the competition. Online grocery shopping may be wide open now, but it won’t stay that way for long. Make no mistake, grocery eCommerce is the future of how we shop for food, and taking advantage of UX design services is just the way to prepare yourself.
Clare Bittourna

Clare Bittourna

Clare Bittourna

Related Insights

Article
Food-beverage
A bowl of freshly picked tomatoes

eCommerce conversion rate optimization tips for specialty food and beverage brands

Gibson Toombs

eCommerce conversion rate optimization tips for specialty food and beverage brands

Article
Food-beverage
beer bottles

How to address common DTC alcohol fulfillment processing challenges

Gibson Toombs

How to address common DTC alcohol fulfillment processing challenges

Article
Experience Design
Woman having second thoughts about shopping online

Shopping cart abandonment: How UX design can improve conversions

Gibson Toombs

Shopping cart abandonment: How UX design can improve conversions

Article
eCommerce
Alt Text

eCommerce returns management: How is your business handling holiday returns?

Gibson Toombs

eCommerce returns management: How is your business handling holiday returns?

Article
eCommerce
Avalara Partner Spotlight

Avalara & Codal: Delivering compliant eCommerce experiences in a landscape of ever-changing tax laws

Gibson Toombs

Avalara & Codal: Delivering compliant eCommerce experiences in a landscape of ever-changing tax laws

Article
eCommerce
A group of people chatting at a workshop

Codal hosts roundtable discussion on enterprise eCommerce at the 2023 Shopify Partner Summit

Gibson Toombs

Codal hosts roundtable discussion on enterprise eCommerce at the 2023 Shopify Partner Summit

Article
eCommerce
A spotlight on Salsify logo

Salsify & Codal: Streamlining product experience management across multiple channels

Gibson Toombs

Salsify & Codal: Streamlining product experience management across multiple channels

Article
eCommerce
Alt Text

The 4 stages of AI maturity in eCommerce

Gibson Toombs

The 4 stages of AI maturity in eCommerce

Background image

Take your next step with Codal

If you're ready to make a real impact and grow with a team dedicated to innovative solutions, we invite you to explore our opportunities.