TomatoesBananasBroccoliWatermelon

Changing the way people add (groceries) to cart, for LATAM’s most premium brand

Transforming Tottus’s problematic grocery e-commerce shop into the group’s best performing store, increasing market share by more than 50%.


what we did

Research
Design
Development
User Testing

platforms

iOS
Android
Web
API
React
Typescript
NextJS
Sentry

Meet tottus

Falabella is one of the largest retail and financial services companies in Latin America, with more than 500 retail locations across Latin America.

Tottus is their flagship supermarket chain, focused on quality and a premium in-store experience. Unfortunately their online grocery delivery was not cutting the mustard.

Client shopping
The challenge

What we were up against

The existing online shopping experience was mired in technical issues, and while customers were “adding to cart” they weren’t completing orders.
We needed to elevate it to the level of their in-store experience — and do it across two different countries.

This was critical in a market where grocery delivery is growing fast, with local and international competitors that could quickly steal away customers.

People workingPeople workingPeople workingPeople working
the strategy

Creating cohesion across complex teams

This massive project involved the Tech, Design, Marketing and Logistics teams in order to deliver a truly great shopping experience.

Building Back Trust

The first thing that stood out during discovery is that most customers that bought online never came back.

Not only that, a ton of customers that went through the entire shopping process would abandon their cart right before payment. After talking to them, we quickly realized that these customers did not trust the site.

It was losing Tottus more than 70% of their long-term customers.

  • Warning icon

    No indication that products were not available.

  • Clock counter wise icon

    There were no updates on order status or changes.

  • Question mark icon

    Nowhere to input preferences (like choosing how ripe they wanted their bananas).

Designing for trust

There’s nothing worse than placing an order than getting a call saying “We don’t have that in stock.” To avoid any more awkward calls or half-delivered orders, we designed the UX with the Stock and Logistics teams to ensure every item ordered was an item on the shelf.

Every online shopping trip starts by asking for a customer’s location, ensuring every single thing on the screen matches the in-store stock. We also created graceful ways to replace items, especially for products that frequently went out of stock.

Screenshot of Tottus appScreenshot of Tottus appScreenshot of Tottus appScreenshot of Tottus app
Fruit image

This massively reduced customer complaints and cart abandonment. Giving customers back the confidence to do their weekly shopping using the app.

Promos are a Go Go

Supermarkets and promotions go together like peanut butter and jelly. One of our goals was to give the marketing team control over all content so they could add coupons, new campaigns, or contribute to the new recipes section.To keep it easy, we created a modular design system so new pages and assets could be published in a minute while maintaining the site’s design and functionality.

Screenshot of Tottus app
Screenshot of Tottus appScreenshot of Tottus appScreenshot of Tottus app
Screenshot of Tottus appScreenshot of Tottus app

As good online as it is in store

Turns out, most of the internal issues were related to last-minute copy and pricing changes, which were handled by a complex ticketing process owned by the Engineering team.

Annoyed by this process, the Marketing team ended up editing copy on the site via Google Tag Manager. Which is as creative as it is horrifying.So we scrapped that process and created a new CMS that let the Marketing teams write, preview, schedule, review and publish all pricing, promotions and copy without going through the Engineering team at all. By building accessible tools, we were able to streamline systems and prevent inventory errors — without any of the red tape.

App screens

Building a headless infrastructure

We ended up choosing CommerceTools, an API-first ecommerce platform that could easily be integrated with Tottus’s systems, as well as Contentful, a great CMS for helping manage content across all their products.

By tying all this together with Typescript, React, Next.JS, and a handful of APIs coupled with a CDN, we were able to ship a blazing fast architecture that could handle all their stock and logistics complexity in a few milliseconds, helping create a great customer experience.

What happened next

The #1 store

The site quickly became Tottus’s best performing store

Happy users

Abandoned carts were a thing of the past

Sales are up

With its new digital-first strategy, Tottus increased market share by more than 50%

Then we tackledpayments

Soon after launching Tottus, we started working on FPay, a wallet from the Falabella group focused on fast peer-to-peer payments.By taking advantage of their massive retail presence, we were able to quickly build an app featured in-store to millions of customers. A helpful tool for all, a perfect brand move for Falabella.

Screenshot of Tottus appBackground shape
CardCardCard
Johan Bergström's profile picture
Johan Bergström

Tech Consultant

Falabella Labs

"Aerolab's talent for creating compelling user experiences that drive conversion is unparalleled. They helped transform a complex eCommerce experience into an intuitive interface that was both beautiful and easy to use."