Delivering Top-Shelf Experiences at a Leading Mexican Supermarket

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

Walk into a City Market in Mexico and you’ll quickly see: Top-tier retailer La Comer knows how to create a great in-store experience. Shoppers at the gleaming, handsome, and modern stores are greeted by rows of gorgeous fresh fruits, vegetables, meats, imported cheeses, pastries, gourmet chocolate, fine wines, exotic spices, and more. Dramatic lighting, sparkling displays, onsite chefs, a cafe and chic seafood bar, home delivery and express pickup— everything pitch-perfect for the upscale urbanite seeking quality gourmet, organic, and healthy fare.

La Comer

La Comer S.A.B. de C.V.

Predecessor established 1930

69 stores in Mexico City metropolitan area, Querétaro, Guanajuato, Morelos, Baja California Sur, Jalisco, Michoacán, Guerrero and Colima

Four “formats”: City Market, Fresko, La Comer, Sumesa

Target: Upper- and middle-income shoppers

Employees: Approximately 11,000

Revenue: $21.59 billion 

http://La Comer finanzas.com.mx/en/

Indeed, “quality attention and service [that] produces the best shopping experience” is a cornerstone of the publicly owned food retailer. Its strategy of offering upper- and middle-income shoppers quality-driven alternatives to “hypermarkets” is paying off smartly; annual revenue has surged from $14 billion pesos to more than $21 billion pesos since 2016. La Comer has aggressive plans to double sales in the next 12-18 months and reach 100 speciality stores in Mexico by 2023.

To help drive growth, the company is eager to discover new ways of offering industry-leading customer and partner experiences. La Comer knows that digital will be an increasingly important part of omni-channel retail. So it made sense to start exploring optimization opportunities for their mobile app, with an eye towards helping La Comer improve their connected customer experience.

 

The Performance Test Sessions

La Comer’s main mobile commerce app is “La Comer en tu casa”. Reviewers on Google Play give it  5.5 of 6 stars for online ordering and arranging delivery of in-store pickup. However, some have complained recently about difficulty downloading updates, slow response times, frozen apps, and device compatibility.

We conducted tests of the app from mid-February to March 9. We decided to keep it simple, focusing on basic browsing, selection and cart-check out.

Location:

Mexico City

Devices:

Moto Z2, Nexus 5X, Pixel

Mobile:

3G, LTE, LTE congested, poor connection

Carriers:

AT&T, Telcel

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.

At La Comer , testing revealed a range of issues and remedies that could greatly improve digital experience for users of the company’s shopping app.

In the rest of the post, we’ll walk through our finds and fixes.

The User Experience: Cart Session Play-By Play

It takes 18 seconds to load the bright green welcome screen with La Comer ’s orange and white pelican logo. In another 17 seconds, we arrive at the shopping welcome page. Twelve seconds later, at 0:47 seconds elapsed, the ordering page appears. Colorful ads for apples, fish, prepared food and more cycle through the top of the screen. We wait and wait watching a spinning wheel on a white background, apparently for the site to detect our location and local store. At 1:44, with no progress or produce, we end the test. 

Some tests were faster, and completed checkout successfully. Others did not.  You can watch a video of this session here.

What was going on behind the screen? Read on to find what we discovered and how top performance issues can be fixed.

Overview of Results: 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. Here, 37 tests revealed three main culprits:  

The other initial test: client-side benchmarking using Nimbleapp.

This HeadSpin tool lets you pinpoint issues that degrade user experience, early in the life cycle. In this case, the benchmark was eye-opening: 

A cold-start of the La Comer app on an Android 6 device took 10.9 seconds, with 16 slowdowns. For perspective, that’s many times slower than the benchmark apps (above). While an online grocer doesn’t need the speed of a top social service, users expect increasingly fast responsiveness — even before the spread of 5G. 

In short, initial testing identified major client and client-server issues in the La Comer  online shopping app. Now, time to go deeper.

Main Tests: Shopping Cart 

To ensure valid and meaningful results, HeadSpin runs and measures hundreds or thousands of performance sessions across several days. Let’s look at one particular round. For these sessions, we added another local carrier (AT&T). Here are key overall findings for all tests for La Comer:

This deeper and wider testing, built on first-round insights reveal three major new 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 the testing period:

Here’s another way to look at their impact. The Burst view below charts a typical performance session using the La Comer  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 

The minute-long stretch of spinning wheels on a blank background we saw in our cart-test test session, revealed the on-page content doesn’t load fast enough. Low Page content initially appeared in the “First Load” tests above; 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). Here’s the toll that Low Page Content took for La Comer:

The length of the line says it all: 7X impact (longer than optimum).

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 won’t affect everyday user experience today.  We expect this to surface as the tests were run on a production APK. It is likely that the pre-release builds will have appropriate resource selections and future automation of tests would not be hampered. 

Here’s why:

The app’s “Find Element” Appium command took much longer (52 seconds) than the recommended 500 ms. Upon inspecting the app with Appium desktop, and parsing through the sourceXML, it appears there weren’t many other possible selectors, such as resource-id, to the elements. That means Appium tests are forced to find elements with the xpath selector, rather than with faster selectors. As a result, the impact time is much longer than it should be. The reason: Appium is polling for the element while the app is loading or an animation is occurring. That prevents the element from being rendered until X number of seconds, which then surfaces as ‘Slow Find Element Command’. 

The issue surfaced because the tests were run on a production app’s APK, and will likely not be an issue with the 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

La Comer  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 

The final flag is for 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. In the La Comer  tests, it took, on average, many times longer on a 3G line in Mexico City. (Other lines did better.) It’s clear from the chart below that this issue is the single biggest drag on performance and digital customer experience.

Drilling down, we can pinpoint the problem to one server location:

www.La Comer .com.mx:80

The good news here: The offending server is owned by La Comer, not a third-party, so the fix is simpler. 

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.

Bottom line: As 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 Nexus 5X on a poor Telcel connection in Mexico City.

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: The initial and main battery of tests identified 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 analysis for La Comer also included 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?

Like other leading retailers, La Comer could expand its 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 like La Comer, 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 La Comer distribution centers in Mexico City and Guadalajara 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

La Comer is showing forward-looking leadership by seeking to optimize digital customer experience as a key part of its ambitious growth strategy.

Our tests revealed several areas for improvement in La Comer’s flagship grocery app. The latest version slowed — sometimes badly — during our online browsing and checkout sessions. The good news: adopting the straightforward fixes suggested by HeadSpin AI and our analysts would shave off nearly 2 minutes and 30 seconds from buyer experience on La Comer’s app, and enable automated testing. Those kinds of performance improvements would benefit virtually every transaction conducted via the La Comer app. 

Mexico is one of the fastest-growing ecommerce markets in the world. La Comer doesn’t compete directly with downmarket giants like Costco México, Sams and various regionals. However, many of these chains continue aggressively investing in ecommerce apps and technology. Their advances will inevitably raise customer, partner, and investor expectations, as will 5G. Premium brands know they must deliver digital experiences at least equalling a bargain brand. 

With deep commitment to quality and leadership that understands the importance of superior shopping experiences, La Comer has what it takes to redefine and lead the Mexican retail food sector in the 21st century. “¿Vas al Super o a La Comer?” asks the chain’s latest marketing slogan. “Do you go to the super(market) or to La Comer?” The desired answer is more certain when in-store and digital experiences alike are top-shelf.

Accelerate your Automation Skills

Introducing HeadSpin University