Delivering Top-Shelf Supermarket Experiences

Premium customers expect premium experiences. The smartest brands know that includes digital experiences, too.

Walk into any leading supermarket and you’ll quickly see that top-tier retailers know how to create a great in-store experience.  To help drive growth, these retailers are eager to discover new ways of offering industry-leading customer and partner experiences. Top grocery and supermarket companies know that digital will be an increasingly important part of omni-channel retail, and that means exploring optimization opportunities for their mobile apps to improve their digital customer experience.

Many retailers are starting to offer online ordering and in-store pickup services on their main mobile commerce apps, but for many users, that has often led to difficulty downloading updates, slow response times, frozen apps, and device compatibility issues.

Our experiences testing grocery apps have revealed a range of issues and remedies that have greatly improved the digital experience for users. Our tests keep it simple, focusing on basic browsing, selection, and cart check out. 

HeadSpin testing provides a  “3D” view of application performance across locations, devices and carriers. The ability to see through these different lenses makes it easier to isolate problems and the compound effect of various variables.

Read on to learn more about our common finds and fixes.

Test: First Load 

As always, testing starts with a “First Load Report.”

It’s just what it sounds like: A summary of limited results useful for initially identifying performance-degrading issues. Our tests often reveal three main culprits:  

Initial testing can help identify major client and client-server issues in these online shopping apps. Now, time to go deeper.

Test: Shopping Cart 

To ensure valid and meaningful results, HeadSpin runs and measures hundreds or thousands of performance sessions for our customers across several days. Here are key overall findings for grocery apps:

This deeper and wider testing, built on first-round insights reveal three major causes of slowdowns: low page content, slow find element commands, and slow server.

Individually and together, these issues significantly degrade app performance — adding between 50 seconds and nearly two minutes total to our sample shopping cart test sessions. 

Here’s what their impact looks like mapped across a testing period:

Here’s another way to look at their impact. The Burst view below charts a typical performance session using any grocery app. The orange waves show overall delays; the black portions detail the impact of the selected issue, in this case, Slow Server. Issue Cards across the bottom summarize impact. Clicking on them drills into deeper layers of technical detail on each.

Let’s quickly look at each key issue and its suggested remedy.   

Issue 1: Low Page Content 

Low Page content also appears on our “First Load” tests; turns out it’s a persistent problem that’s all too-common.

At best, busy buyers are left looking at a partial page. At worst, it’s a blank screen — or the dreaded “working on it!” animation. Obviously, neither is a hallmark of great digital experience. This culprit is often seen with slow servers (more below).

Suggested Fix

Looking at the orange impact region in the Waterfall view lets HeadSpin correlate root cause factors, such as long network requests, network saturation, or usage in the system time series. Any abnormal metric in this region can cause this problem.

Issue 2:  Slow Find Element Command

This is an interesting one, but doesn’t affect everyday user experience. This is something we expect to surface if the tests are run on a production APK. It is likely for pre-release builds to have appropriate resource selections and future automation of tests are not hampered.

Here’s why:

The impact time can be much longer than it should be because Appium is polling for an element while an app is loading or an animation is occuring. That can then prevent the element from being rendered until X number of seconds, which then surfaces as ‘Slow Find Element Command’. 

Often times, this issue surfaces because tests are run on a production app’s APK, but will likely not be an issue with pre-release builds. Also, this issue isn’t something a shopper would experience.  But it does mean performance testing would need to be done manually if the appropriate resource-ids aren’t available – a slow and costly proposition.

Suggested Next Step

Grocery apps could validate this further by running the tests on a pre-release build of the app and reconfirm that appropriate selectors are available for enabling automation of performance tests. It’s a behind-the-scenes, forward-looking validation with immense benefit.

Issue 3: Slow Server 

This is a common, high-impact problem. Ideally, it should take no more than 500 ms for an app to receive the first byte from the host. This issue can be the single biggest drag on performance and digital customer experience.

Drill down and pinpoint the problem to a specific server (or multiple server) location. The fix is simpler if the offending server(s) is owned by the company itself and not a third-party.

Suggested Fix

The first step in HeadSpin: click on the message blocks in the highlighted problem hosts. This gives you a sense of what resources these hosts are serving to the app. Do you expect these hosts to be slow? Are they performing a lot of server-side work before sending their replies?

Alternatively, if the hosts are part of a CDN (content delivery network), is it possible they’re serving resources from the wrong edge? Confirm that the physical location of the request’s destination IP is where you think it is. (You might be surprised.) Once you’ve isolated the problem server, these basic measures, based on millions of data points analyzed by HeadSpin AI, often are enough to fix the issue.

Potential Improvements: Huge Speed Gains

Because testing and monitoring is about fixing problems, the HeadSpin tool begins generating potential solutions for each issue right after the first runs.  

As the platform continues testing and learning, it also continues generating additional insights and options for speeding up specific problems. Here’s an example.

This screen lets you understand, try out, and choose different options for remediating any selected high-impact issue, on any device or network. The column at left shows the range of choices for fixing the biggest negative user experience issues.

The above example shows that for one app, the darker selected area (p95) shows, 5% of user flows could be at least 2m 39 seconds faster by fixing all the user experience issues identified for a Nexus 5X on a poor Telcel connection in a specific location. 

That’s just one example. Any issue or combination of device, network and location can be analyzed and optimized in the same way. Organizations can interactively decide the most cost-effective ways to deliver the most optimized service to the most users. Again, not theoretically, but based on real-world networks and devices.

Automated Testing and Fixes

To recap: Our experiences with grocery apps identify three major, high-impact problem areas. 

These issues most harm app performance and, by extension, user experience. But testing is not a “one-and-done”; improvement should be ongoing and continuous. 

HeadSpin’s analyses for apps also include automated, ongoing, live testing and remediation. The value is obvious: The more the HeadSpin system “learns”, the more that individual and overall performance drags can be automatically spotted and fixed.

Let me quickly point out a couple of cool things about this capability and view. 

First, it’s a great example of how much can be corrected in just one minute.

Second, HeadSpin uses built-in AI to generate a Python script to automate testing. Here’s a real example:

The benefit: No need to devote trained technical staff to do slower and more expensive manual testing, or write code to automate the process. HeadSpin lets you continuously refine and improve performance and digital experiences with a drag on precious technical resources. 

Next Step: Internal Processes?

Retailers can expand their use of testing and optimization beyond mobile consumer apps. Savvy brands are beginning to apply HeadSpin’s digital testing, monitoring and analysis to behind-the-scenes functions to improve operating efficiencies and gain competitive advantage.

A leading U.S retailer, for example, uses HeadSpin to help optimize its supply chain for flawless re-stocking and delivery. The screen-grab below shows performance monitoring and testing on a Zebra internal inventory device doing bar code scanning.

For premium chains, applying intelligent, automated testing and monitoring to internal workflows offers several benefits to company, partners, suppliers and, ultimately, customers. New apps being introduced in the store, for instance, can be tested and optimized before being put into employee hands. That reduces needless delays, frustrations, disruptions in service and resistance to the new technology.

For shoppers and suppliers, better-performing inventory apps and systems could help ensure timely, efficient flow of goods from distribution centers to company stores. Better front-line intelligence would help ensure that shelves stay stocked with everyday and seasonal items, as well as things like hand sanitizer and disinfectant wipes for special situations like the COVID-19 outbreak.

Bottom Lines and Post Log

Top retailers are showing forward-looking leadership by seeking to optimize digital customer experiences as a key part of their ambitious growth strategies. With shoppers now adopting online grocery shopping faster than ever, these chains will have to continue aggressively investing in their ecommerce apps and technology. 

Adopting the straightforward performance fixes suggested by HeadSpin AI and our analysts can benefit virtually every transaction and behind-the-scenes function conducted by these retailers. Reach out to us to see how HeadSpin can deliver the insights you need to deliver to your users the top-shelf digital experiences they deserve.

Accelerate your Automation Skills

Introducing HeadSpin University