Fazendo os apps do DIA se sentirem em casa

Para lançar seu próprio app de delivery rápido, o DIA fez uma parceria com o X5 Group, empresa da mesma holding de investimentos. O app foi construído sobre a plataforma do Около, líder de mercado na Rússia, e em julho de 2021 o X5 entregou um MVP customizado para o DIA.

Funcionava, mas tinha sotaque. Traduções literais com termos errados, ícones que não diziam nada para quem faz compras no Brasil, uma interface que gerava mais dúvidas do que respostas e um visual que não tinha nada a ver com o DIA.

Em agosto de 2021 comecei o redesign e, como a gente dizia internamente, a tropicalização do DIA Express. Quatro pilares guiaram cada decisão.

A regra era simples: nenhum elemento novo, a não ser que fosse necessário. Abrasileirar o app sem quebrar a estrutura dele. Deu pra fazer isso 100%? Não. Então as entregas foram divididas em fluxos que já existiam, fluxos que já existiam com as informações reorganizadas e funcionalidades novas, mas essenciais.

Dois problemas machucavam a jornada mais do que todos os outros: pagar e dizer ao app onde você mora. No MVP, todo checkout levava a uma tela pedindo todos os dados do cartão de novo. Sem carteira, nada salvo. Sem surpresa, muita gente desistia ali mesmo.

Com a chegada de um novo provedor de pagamento, o trabalho se dividiu em três: uma carteira para salvar cartões com o pagamento embutido no checkout, um fluxo de Pix e as partes delicadas de encaixar o Pix num supermercado.

O detalhe do Pix num supermercado: produtos acabam e pedidos mudam. Dava pra devolver uma diferença com um Pix reverso, mas não dava pra pedir que a pessoa pagasse mais. Então o Pix estreou sem substituições, e depois uma regra no back-end garantiu que qualquer substituto oferecido tivesse valor igual ou menor. Na primeira semana, o Pix já respondia por 40% das vendas do app.

O fluxo de endereço jogava a pessoa num mapa. A área de cobertura era minúscula, então a maioria caía fora dela e não sabia como sair. Quem conseguia seguir nunca via o campo de complemento, porque endereço russo não tem complemento. As reclamações se acumularam, muita gente desistia nessa etapa, e nosso Tech Lead ainda achou casos em que a API do Google quebrava o CEP, o que dava problema na emissão da nota fiscal.

O novo fluxo respeita como os endereços funcionam no Brasil e adiciona validações em texto e visuais pelo caminho, o que também resolveu aqueles problemas técnicos de vez.

Muita gente procurava o atendimento, em parte porque coisas básicas, como o estorno de compras no cartão, não estavam explicadas em lugar nenhum. Então o FAQ foi redesenhado em torno de um bot de WhatsApp montado com o CX Manager, com respostas curtas e simpáticas. E ganhou um rosto: a Diana, assistente virtual do DIA, que deixa o pedido de ajuda com menos cara de reclamação.

Cada tela foi redesenhada dentro do sistema que o X5 tinha construído, trabalhando como num design system: melhorando o UI kit e os componentes, o app inteiro melhora junto.

O redesign espelhou e traduziu os componentes existentes. Com ele pronto, o passo seguinte era um front-end com personalidade própria, começando por um novo header e footer, um checkout renovado e uma página de cupons.

O Club DIA existe para melhorar as compras nas lojas físicas do DIA, principalmente com cupons de desconto. Depois de muito tempo sem atualizações, as avaliações negativas se acumularam, e viraram uma lista bem sincera do que os usuários precisavam. A empresa também tinha seus próprios planos para o app, então uma reescrita completa do front-end entrou em pauta.

A Karen Colin, especialista em apps do DIA, já tinha feito a pesquisa. Com as descobertas dela e os objetivos do negócio, dei minha primeira olhada nos sistemas e serviços com que a gente ia trabalhar, e comecei a transformar conceitos em wireframes, usando o design system do DIA Express, o app de e-commerce da empresa.

O DIA trouxe a CWi para construir o app, e com ela veio um ritmo de verdade, com backlog, sprints e deploys. A Cristiane Butura assumiu o papel de PO, organizou o backlog, escreveu as histórias e conduziu as cerimônias. O Henrique Peter chegou com um olhar novo de UX, e juntos amarramos a lógica de botões, toasts e feedbacks, que existiam, mas ainda estavam bem no começo.

Aí entraram os desenvolvedores Philippe Silveira, Axel Felix Varreira e Andre Ervilha, e o QA Rodrigo Dutra, e as dez telas do começo viraram, mais ou menos, cem. A gente nunca seguiu uma metodologia em linha reta, mas sempre respeitou as cerimônias para revisar e refinar o que tinha construído.

O código antigo tinha sido claramente feito para celulares bem menores, tipo o iPhone 4 e 5. Para os padrões de 2022, os ícones e textos pareciam meio gigantes. Os blocos eram tão grandes que a home rolava com só cinco coisas para tocar.

Toda ação abria uma página nova. Tocou num cupom para ver os detalhes, página nova. Tocou numa loja no mapa, página nova. Padrões modernos como drawers e modais não estavam disponíveis na época, então a experiência cansava, que nem entrar num cômodo novo toda vez que você quer fazer uma pergunta.

A reescrita tinha quatro objetivos: um painel mais limpo e confortável; uma navegação que combinasse com os celulares de hoje; uma interface alinhada com a marca atual do DIA; e componentes e interações mais modernos. Para chegar lá, nós:

O cadastro antigo pedia muito pouco. Parece gentil, mas significava que as pessoas entravam no app sem os dados necessários para usá-lo, e davam de cara com a parede. Até a loja de cupons, a principal funcionalidade do app, exigia um passo extra que quase ninguém conhecia.

A gente queria um cadastro único que liberasse tudo, sem quebrar o sistema atual, sem criar APIs novas e sem prejudicar quem já tinha conta completa ou pela metade. O ideal: a pessoa digita o e-mail e a gente descobre se ela é nova, cadastrada ou um usuário legado com dados faltando.

O problema: o sistema, o Hybris, não conseguia consultar uma conta sem um e-mail e uma senha. Então a gente usou a criatividade. Mandávamos o e-mail com uma senha errada de propósito, e líamos a resposta:

O antigo "Minhas Economias" separava a economia mensal e a anual em páginas diferentes, quase sempre vazias, e não dava a ninguém um motivo para economizar mais. O novo deixa a pessoa definir metas, mostra números grandes e simpáticos, e traz alguns gatilhos de gamificação para manter o embalo.

Um sistema rígido, com pouco espaço para mudança, trouxe bloqueios de sobra. Eu queria diferenciar os cupons por cor de categoria, por exemplo. A página de cupons final ficou bem mais simples que a primeira proposta.

Mesmo assim, usamos o espaço que tínhamos para trazer componentes que deixaram tudo mais fluido: modais, toasts e um menu que desliza por cima da home.

Sem APIs novas, a missão era montar um castelo mais bonito, moderno e fácil de usar com exatamente as mesmas peças de Lego. Foi cheio de complicações, e os stakeholders ficaram felizes com o resultado. Eles já estavam planejando como usar o espaço novo, como a área de banners, e mais jeitos de melhorar a experiência na loja.