Protegido: Usability Improve | Rappi

INTRODUÇÃO

Problema

Ao ingressar na SOB, ficou evidente que diversas iniciativas de redesenho em andamento estavam em andamento. No entanto, a ênfase mudou para a abordagem de questões críticas com intervenções mínimas de design e tecnologia. O foco principal foi aprimorar a visibilidade dos pedidos, simplificar a preparação e a entrega, otimizar o recebimento e o processamento e melhorias estruturais gerais no sistema de gerenciamento de pedidos.

 

Objetivo

O objetivo principal deste projeto é reforçar a eficiência operacional na SOB, abordando questões críticas no gerenciamento de pedidos. Especificamente, o objetivo é ampliar a visibilidade dos pedidos, agilizar os processos de preparação e entrega, otimizar os procedimentos de recepção e processamento e fortalecer a integridade estrutural geral dos pedidos.

 

Principais resultados (OKRs)

1. Aumente a taxa de conversão ponta a ponta (E2E) para 12,5%, refletindo maior eficiência no gerenciamento e atendimento de pedidos.
2. Melhore a conversão do menu de 76% para 85%, significando maior envolvimento do usuário e taxas de conversão.

DESCOBERTA

Problemas no mapa”>

Conduzi testes completos do produto, mapeando meticulosamente cada tela para identificar problemas. Os problemas foram categorizados em três níveis com base na gravidade: baixo, médio, e alto impacto. Essa classificação ajudou a priorizar a resolução de problemas que afetam a experiência do usuário.

Impacto vs Esforço

Então eu conduzi um oficina com as equipes de Produto e Tecnologia, durante as quais começamos a criar uma Matriz Impacto vs Esforço para priorizar as questões principais e delinear nosso roteiro.

Inicialmente, nosso foco estava em resolver problemas de alto impacto, dada a grande quantidade de questões que identificamos: 144.

144

“>”>Questões a serem
melhorar

“>”>BAIXO IMPACTO 30%
“>”>IMPACTO MÉDIO 34%
ALTO IMPACTO 37%

ONDE

Em alta
Impacto

55 QUESTÕES

33 QUESTÕES TÉCNICAS

60% DE ALTO IMPACTO

22 QUESTÕES DE PROJETO

40% DE ALTO IMPACTO

DEFINIÇÃO

Com base nos insights descobertos durante a fase de descoberta, segmentei estrategicamente as soluções em pacotes distintos. Essa abordagem permite a entrega incremental de valor, aprimorando os estágios cruciais onde as taxas de conversão são mais afetadas negativamente. Ao concentrarmos os nossos esforços nestas conjunturas críticas, maximizamos a nossa capacidade de proporcionar benefícios tangíveis de forma eficiente e eficaz.

“>ENTÃO DIVIDI ALTO IMPACTO EM A”>

3 pacotes de solução”>

“>”>Pacote 1

ENTREGUE”>

Tipos de cardápio – Melhora
Menu manual – Categoria / Produto / Coberturas / Contador de produtos / Calculadora de comissões

“>”>Pacote 2

EM DESENVOLVIMENTO

Cadastre-se + E-mail – Visualização de itens necessários por país
E-mail – Parceiro cadastrado
Resumo – Alterar Estrutura

“>”>Pacote 3

PARA DESENVOLVER”>

Documentos – Instruções para celular + Instruções para documentos digitais + Carregamento de esqueleto + upload de PDF
Cardápio (link) – Melhorar as instruções

IDEAÇÃO

Durante esta fase, iniciei a criação de fluxos de navegação e, ao mesmo tempo, organizei um Workshop de Críticas de Design envolvendo todos os Designers de Produto. Esta sessão colaborativa serviu de plataforma para apresentar propostas e recolher amplo feedback.

“>Pacote 1”>

Críticas de Design”>

Fiz um estudo para ver qual era o melhor fluxo, porque o antigo era muito confuso, muito longo e não tinha uma estrutura contínua.

Então levei esse tema para um Críticas de design e toda a equipe de design nos ajudou a escolher o fluxo melhor e mais eficiente.

TRANSFERÊNCIA E BIBLIOTECA

Transferência do projeto

Aperfeiçoei um processo de transferência para apoiar a equipe DEV com eficiência. Ao nos alinharmos com a equipe técnica e criarmos designs Figma detalhados com notas explicativas, agilizamos a comunicação e eliminamos a necessidade de chamadas de esclarecimento excessivas. Essa abordagem aumenta a eficácia da equipe de desenvolvimento.

Biblioteca local

Para aumentar a eficiência de uma equipe com um sistema de design básico e fragmentado, desenvolvi uma biblioteca local. Depois de convertê-lo em um componente de equipe e publicá-lo para reutilização em projetos verticais, organizar, reutilizar e criar novos componentes ficou muito mais fácil.

SOLUÇÃO FINAL

O conceito por trás da solução final não era passar por uma revisão completa, já que uma reforma em grande escala poderia consumir vários meses devido às complexidades dos processos tecnológicos e de design. Portanto, nossa abordagem foi priorizar a resolução de bugs técnicos que não exigiam intervenção de design. Nosso objetivo era corrigir funcionalidades que deveriam funcionar, mas estavam com defeito.

No que diz respeito ao design, nosso foco estava em melhorar a usabilidade, implementando melhorias básicas, como tornar os botões mais acessíveis, garantir um fluxo contínuo em toda a plataforma, manter layouts de páginas limpos e organizados e simplificar a complexidade, alinhando-se aos padrões de mercado vigentes.

Dado que 50% dos nossos utilizadores acedem à plataforma através de dispositivos móveis, demos especial ênfase à otimização da experiência móvel. Além disso, pretendemos orientar os usuários de forma mais eficaz, incorporando indicadores de progresso e instruções claras para melhorar a jornada geral do usuário.

VERSÃO PARA DESKTOP | PACOTE 1

“>”> FLUXO ANTIGO

“>”>NOVO FLUXO

VERSÃO MÓVEL | PACOTE 1

Melhorias na hierarquia

Renovando a IU da página de seleção de menu, reorganizei sua hierarquia para melhorar a usabilidade, resolvendo a desordem e a ineficiência. Introduzi uma barra de ajuda com conteúdo em PDF e uma opção de chamada online para atendimento ao parceiro, além de um guia em vídeo passo a passo para cadastro de menu, agilizando o suporte ao usuário.

Criação guiada de menu

Para auxiliar os usuários, criei guias para garantir a aprovação do cardápio, especificando os produtos mínimos necessários e sugerindo quantidades ideais para melhores vendas. Além disso, implementei um processo guiado para criação de categorias e produtos, incluindo um indicador de estado vazio para solicitar aos usuários que comecem a configurar seu menu.

Criação de categoria

A criação de categorias do menu antigo era desordenada e confusa, apresentando elementos desconectados e práticas não padronizadas, como campos de entrada em menus suspensos.

Padronizei o processo redesenhando as interfaces de criação de categorias e produtos para compartilhar um padrão de UI em tela inteira. Agora, a seleção de uma categoria personalizada exibe um campo de entrada de texto abaixo do menu suspenso, garantindo uma experiência de usuário simplificada.

Criação de Produto

O processo anterior de criação de produtos era complicado, com questões como precificação de etapa única e insumos com defeito. O texto do espaço reservado e os botões que desaparecem durante a rolagem aumentaram a confusão. Na versão atualizada, agilizamos o processo, reduzindo etapas, agregando clareza com dicas e ícones e introduzindo um recurso solicitado para cálculo da comissão do Rappi e do faturamento do restaurante.

Complementos e Catálogo Final

Anteriormente, os usuários navegavam por várias páginas sem uma progressão clara, precisando voltar passo a passo. Para agilizar o processo, consolidei-o em uma página, revelando elementos dinamicamente e fornecendo um passo visível e um botão final para maior clareza.

Na versão final do catálogo, informações desnecessárias foram removidas, resultando em um design de catálogo mais simples e focado, com um botão final adicionado para facilitar o envio.

“>Pacote 1”>

“>Solução Visualização ao vivo

Nesta versão fiz um novo fluxo, inserindo um contador de produtos, suporte ao vivo acima do menu, muitos instruções sobre a categoria, produto e coberturas criação e oferta aos usuários etapas consistentes com visibilidade onde eles sempre terão visão sobre em qual etapa do fluxo estão e como proceder para a próxima etapa.

TESTE DE USABILIDADE

Para garantir a eficácia de nossas melhorias, conduzimos um teste de usabilidade abrangente envolvendo Brasileiro e de língua espanhola restaurantes. Nós nos envolvemos com 5 usuários de Brasil, Colômbia, e México para avaliar o desempenho de nossa experiência de menu manual redesenhado em cada país.

Nessa fase de testes, identificamos diversas áreas de melhoria, como o refinamento do agrupamento de complementos e a mudança da marca de “coberturas” para “complementos”, entre outros pontos críticos.

RESULTADOS

Ao focar apenas na entrega Pacote 1, ultrapassamos nossas metas de conversão de cardápio e nos aproximamos de nossa meta de conversão de ponta a ponta, restando apenas 2 pacotes adicionais.

Embora o projeto tenha sido concluído e alcançado todas as métricas, ele passou por divisão e transformação em outras iniciativas de acordo com a evolução das necessidades da empresa durante o desenvolvimento.

No entanto, serve como uma referência valiosa, mostrando o meu processo desde o início até à conclusão e os resultados positivos derivados da elaboração de soluções ideais para o cenário determinado.

Ver projeto

Protegido: Text Field: Design System | Rappi

INTRODUÇÃO

Problema

Nossa equipe de Design B2B enfrentou um desafio significativo: nosso Sistema de Design existente era rudimentar, faltando componentes cruciais e consistência. Esta deficiência não só prejudicou os nossos processos de design, mas também fragmentou a nossa identidade de marca, com cada equipa a funcionar como uma entidade distinta dentro da organização.

Objetivo

Dada a ausência de uma equipe dedicada ao Design System, elaboramos uma estratégia para resolver esse problema coletivamente. Com um designer de produto orientando a equipe e designers individuais encarregados da criação de componentes, decidimos aprimorar nosso Sistema de Design de forma incremental. Nosso foco neste trimestre foi o desenvolvimento do componente de campo de texto.

Principais resultados (OKRs)

1. Desenvolva um componente de campo de texto que atenda aos padrões de usabilidade e se alinhe à identidade visual da marca.
2. Reduza o tempo de iteração do projeto até 20% incorporando o componente de campo de texto em nossos projetos.
3. Facilite a colaboração entre equipes integrando perfeitamente o componente de campo de texto em várias interfaces de produtos.
4. Estabeleça uma estrutura escalável para a criação futura de componentes para garantir a melhoria contínua em nosso ecossistema de Design System.

DESCOBERTA

Para estabelecer as bases para a criação de nossos componentes, inspirei-me nos componentes do Google e no Material Design, permanecendo aberto a insights de outros sistemas. Minha abordagem envolveu mapear componentes concorrentes e auditar nosso cenário de design interno. Isso permitiu o desenvolvimento de uma solução de componentes unificada que atendeu às necessidades de todas as equipes, garantindo consistência na interface do usuário e na funcionalidade, ao mesmo tempo que acomodava diversas variações de componentes.

Componentes
nos concorrentes

Busquei inspiração em líderes do setor como Google, Airbnb, Uber Eats e nas interfaces web e iOS da Apple. Embora a biblioteca mais recente do Google estivesse prontamente disponível para referência, reuni capturas de tela dos componentes do campo de texto de outras plataformas para estudar seus vários estados e designs.

Componentes
em equipes Rappi

No Rappi, solicitei que cada equipe separasse seus componentes de campo de texto e os fornecesse para mim. Isso permitiu uma comparação completa entre as equipes, permitindo uma compreensão mais profunda da identidade visual de cada equipe, dos requisitos exclusivos e das abordagens para atender às necessidades específicas em seus respectivos domínios.

Baseado em Estrutura
em design de materiais

Combinando informações das equipes da Rappi e padrões da indústria como o Material Design do Google, sintetizei uma estrutura de campo de texto exclusiva. Ao mesclar insights internos com padrões de mercado, criei um sistema abrangente.

DEFINIÇÃO

Para garantir a estrutura ideal para nossos projetistas e acomodar diversas necessidades, baseamos nosso projeto em descobertas completas. Estabeleci uma anatomia de componente central e, em seguida, adaptei variações adicionais para atender aos requisitos de nossas equipes de design, incorporando mensagens de suporte, estados, ícones, tamanhos de texto grandes, códigos e chips.

“>”>Anatomia dos Componentes

A anatomia do componente refletia de perto os princípios do Material Design, mas incluía um recurso de contorno, aprimorando sua capacidade de mostrar claramente vários estados. Esta escolha de design facilitou explicações completas tanto para nossa equipe quanto para as partes interessadas, garantindo uma compreensão abrangente da estrutura e funcionalidade do componente.

Estados e Variações

Derivado das preferências da equipe, os estados e variações do componente foram otimizados para capacidade de resposta em desktops e dispositivos móveis, excluindo aplicativos móveis. Esquemas de cores definidos para estados de erro, foco, desativado, padrão e preenchimento, com uma cor de destaque que aprimora a experiência do cursor. Posicionamentos de ícones padronizados permitem opções em ambos os lados, um lado ou nenhum. Vários tipos de componentes foram estabelecidos, atendendo a necessidades como texto longo, validações de código e chips.

SOLUÇÃO

“>”>Uso de componentes

Para uma experiência de designer perfeita, consolidei todas as variações, estados e elementos em um único componente principal, simplificando o uso ao oferecer tudo o que é necessário em um só lugar, agilizando assim a eficiência do fluxo de trabalho.

Todas as variações

Elaborei meticulosamente uma gama abrangente de variações abrangendo vários estados: padrão, foco, foco, foco com espaço reservado, preenchimento, preenchido, desabilitado, desabilitado preenchido e erro. Essas variações foram aplicadas em todos os tipos, incluindo posicionamentos de ícones (esquerda, direita ou ambos), áreas de texto, validações de código e chips, garantindo versatilidade e cobertura completa.

Introdução
para o componente

Para fornecer uma compreensão abrangente da funcionalidade do componente, desenvolvi uma documentação completa cobrindo sua introdução, anatomia, especificações e diversos exemplos de uso em diversas páginas e produtos, servindo como um guia valioso para os usuários.

Regras de uso

Para garantir o uso contínuo e manter padrões de design consistentes ao mesmo tempo em que resolvo possíveis problemas, estabeleci diretrizes claras detalhando como cada componente deveria ser utilizado, incluindo especificações de largura máxima e outros detalhes críticos para preservar a consistência e evitar discrepâncias.

Ver projeto