Making DIA's apps feel at home

To launch its own delivery app quickly, DIA partnered with X5 Group, a company in the same investment holding. The app was built on the platform of Около, the market leader back in Russia, and in July 2021 X5 delivered an MVP customised for DIA.

It worked, but it had an accent. Literal translations with the wrong words, icons that meant nothing to a Brazilian shopper, a UI that created more questions than answers, and visuals that didn't sound like DIA at all.

In August 2021 I started redesigning and, as we said internally, tropicalizing DIA Express. Four pillars guided every decision.

The rule was simple: no new elements unless they were necessary. Brazilianize the app without breaking its structure. Was that completely possible? No. So deliveries were split into flows we already had, flows we had with a new arrangement of information, and new features that were simply essential.

Two problems hurt the whole journey more than any others: paying and telling the app where you live. In the MVP, every checkout sent you to a screen asking for all your card details again. No wallet, nothing saved. Unsurprisingly, many people gave up right there.

After a new payment provider came on board, the work split into three: a wallet to save cards with payment embedded at checkout, a Pix flow, and the tricky bits of fitting Pix into a supermarket.

Here's the catch with Pix in a supermarket: products run out and orders change. We could refund a difference with a reverse Pix, but we couldn't ask someone to pay more. So Pix launched without substitutions, and a back-end rule later made sure any replacement offered was of equal or lower value. In its first week, Pix already accounted for 40% of the app's sales.

The address flow dropped people onto a map. The coverage area was tiny, so most of them landed outside it and didn't know how to get out. Those who could continue never saw a field for the address complement, because Russian addresses don't have one. Complaints piled up, a lot of people left at this step, and our Tech Lead even found cases where the Google API broke the postcode, causing trouble when issuing invoices.

The new flow fits how addresses work in Brazil and adds text and visual checks along the way, which also fixed those technical problems for good.

Lots of people were contacting support, partly because basic things, like refunds for card payments, weren't explained anywhere. So the FAQ was redesigned around a WhatsApp bot set up with the CX Manager, with short, friendly answers. And it got a face: Diana, DIA's virtual assistant, who makes asking for help feel a little less like filing a complaint.

Each screen was redesigned within the system X5 had built, working like a design system: improve the UI kit and its components, and the whole app improves with them.

The redesign mirrored and translated the existing components. Once it was done, the next step was a front-end with its own personality, starting with a new header and footer, a fresh checkout and a coupons page.

Club DIA exists to make shopping in DIA's physical stores better, mostly through discount coupons. After a long time without updates, negative reviews had piled up, and they turned into a very honest list of what users needed. The company had its own plans for the app too, so a full front-end rewrite was on the table.

Karen Colin, DIA's apps specialist, had already done the research. With her findings and the business goals, I got my first look at the systems and services we'd be working with, and started turning concepts into wireframes, using the design system from DIA Express, the company's e-commerce app.

DIA brought in CWi to build the app, and with them came a proper rhythm of backlog, sprints and deploys. Cristiane Butura took on the PO role, organised the backlog, wrote the stories and ran the ceremonies. Henrique Peter joined with fresh eyes on UX, and together we firmed up the logic for buttons, toasts and feedback, which existed but were still very early.

Then developers Philippe Silveira, Axel Felix Varreira and Andre Ervilha, and QA Rodrigo Dutra, joined in, and the ten screens we started with became, more or less, a hundred. We never followed a methodology in a straight line, but we always respected the ceremonies to review and refine what we'd built.

The old code was clearly made for much smaller phones, like the iPhone 4 and 5. By 2022 standards, the icons and text felt a little enormous. The blocks were so big that the home screen scrolled with only five things you could tap.

Every action opened a brand new page. Tap a coupon for details, new page. Tap a store on the map, new page. Modern patterns like drawers and modals weren't available back then, so the experience felt tiring, like walking into a new room every time you want to ask a question.

The rewrite had four goals: a cleaner, more comfortable dashboard; navigation that fits today's phones; an interface in tune with DIA's current brand; and more modern components and interactions. To get there, we:

The old sign-up asked for very little. That sounds kind, but it meant people got into the app without the data needed to use it, and then hit walls. Even the coupon store, the app's main feature, needed an extra step that most people didn't know about.

We wanted a single sign-up that unlocks everything, without breaking the current system, creating new APIs, or hurting people who already had full or partial accounts. Ideally, the user types their email and we figure out whether they're new, registered, or a legacy user with missing details.

The problem: the system, Hybris, couldn't look up an account without an email and a password. So we got a little creative. We sent the email with a deliberately wrong password, and read the answer:

The old "My Savings" split monthly and yearly savings into separate, mostly empty pages, and gave nobody a reason to save more. The new one lets people set goals, shows big friendly numbers, and adds a few gamification triggers to keep them going.

A rigid system with little room to change brought plenty of blockers. I'd wanted to colour-code coupons by category, for example. The final coupon page ended up much simpler than the first proposal.

Still, we used the space we had to bring in components that made everything flow better: modals, toasts and a menu that slides over the home screen.

No new APIs meant building a more attractive, modern and usable castle with exactly the same Lego pieces. It was full of complications, and stakeholders were happy with the result. They were already planning how to use the new space, like the banner area, and more ways to improve the in-store experience.