O SmartRede é a principal inovação da Rede em produtos para pagamentos desde 2017. Com ele os clientes podem realizar pagamentos, controlar seus recebimentos, seus produtos em estoque e até mesmo realizar antecipação de recebíveis.

Nesse Projeto estive presencialmente na war room sendo responsável pelo UX e pelo Design do App Pagamentos, a principal aplicação do SmartRede para clientes realizarem seus pagamentos e administrarem seus estabelecimentos.

Durante o projeto foram idealizados e desenhados todos os fluxos de transações e relatórios de vendas para lançamento do produto em 2017.

Contexto

A Rede, enquanto companhia, nos dois anos anteriores ao projeto vinha perdendo uma considerável parcela da sua clientela para a concorrência que crescia no mercado. Isso vinha acontecendo porque a companhia não lançava um produto atualizado e inovador no mercado há alguns anos. Sendo mais preciso, as maquininhas que dominavam o mercado eram os POS, com sistemas operacionais e formatos físicos presentes no mercado nos últimos 20 anos.

Solução

Como resposta a atual situação a companhia decidiu criar uma parceria estratégica com a Poynt, uma startup que fabricava maquininhas de pagamento digital nos EUA, para juntas revolucionarem o mercado de maquininhas de pagamentos no Brasil e assim se posicionar a frente da revolução digital no setor.

Para operar as maquininhas fabricadas pela Poynt a companhia decidiu criar uma war room para desenvolver um app de pagamentos para ser o carro chefe na operação do produto.

Objetivo do Projeto

– Estabelecer um marco de inovação dos meios de pagamento no setor;
– Criar uma experiência UAU no fluxo de pagamentos do Smart Rede;
– Criar padrões de UX e Design para todos os futuros apps do Smart Rede;
– Descobrir novos usos para a tecnologia, sob demanda dos clientes.

Meus papéis

Product Design (no início)
Product Design Lead (no final)

O Processo detalhado

Discovery e Brainstormings

Na war room fizemos diversas dinâmicas com brainstormings para esboçar as possibilidades de fluxos para o app de pagamentos tendo como base os fluxos atuais já existentes no POS.

Nesse processo inferiu-se diversas novas funções para a maquininha. Diversas áreas da companhia apresentaram ideias para aprimorar o uso do equipamento com apps e novas funcionalidades que iriam além do uso para pagamentos.

Curiosidade: Existem muitas possibilidades de produtos financeiros ofertados em uma operação de pagamentos, com modalidades de créditos, tipos de cartões e bandeiras, além da possibilidades de cancelamentos, estornos de pagamentos, re-impressão de comprovantes e até mesmo aprovação de crédito através da própria maquininha. 🙂

Desenho da Experiência

Depois de muitos desenhos em lousas e folhas de sulfite, mapeamento de fluxos e jornadas do usuário com o time de negócios, partimos para o desenho das telas dos fluxos para aplicação de testes em usuários reais. Para isso, usamos o Axure como ferramenta.

Testes de usabilidade

Nesse projeto criamos uma cultura de parceria para beta testers do produto e tínhamos inicialmente sete estabelecimentos que orbitavam os escritórios da companhia para realização de testes e para pilotarem a solução:

– Um Café Cultura e um restaurante no térreo do prédio da Rede em Alphaville;
– Duas cafeterias, uma livraria, uma manicure e uma costureira dentro do conjunto de prédios que compõem o CEIC na consolação.

Nesses estabelecimentos convidamos clientes e funcionários e conduzimos testes de usabilidade utilizando os protótipos navegáveis criados em versão UX com wireframes.

Com os resultados obtidos com os testes refinamos a usabilidade, os fluxos iniciais e o tamanho e posicionamento dos elementos na tela.

O Processo de Design

Após a realização dos refinamentos com os testes de usabilidade partimos para a criação da identidade visual unindo a identidade da marca com padrões de design e experiência baseadas no material design.

Guidelines para Desenvolvimento

Como todo processo de desenvolvimento, alcançar a exelência e obter como resultado um app em conformidade com o que foi desenhado e idealizado seria um desafio. E para garantir que tudo estaria em conformidade, fizemos alguns ajustes de processo que na época não eram um padrão de mercado seguindo o modelo abaixo:

1. Após o design, desenha-se os fluxos com indicações de interação e navegação;
2. Entrega-se os assets para desenvolvimento, com especificações detalhadas + protótipo navegável;
3. Realiza-se uma review de design e ux, para garantir que os padrões especificados estavam sendo seguidos, com fluxos, cores, alinhamento, espaçamento, tamanho de elementos e fontes;
4. Após aprovação no review de design, libera-se a versão do app em produção.

Esse processo, garantia a fidelidade e qualidade do design e da experiência.

Lançamento do MVP e os Aprendizados

Quando o desenvolvimento da primeira versão do app estava 100% validada, realizamos a instalação nas Poynts e distribuímos para o uso dos parceiros.

Primeiro aprendizado ao observar os clientes pilotando

Contexto

Todos os dias durante o projeto eu tomava café nas cafeterias e almoçava no restaurante, apenas para observar o uso dos clientes e o que eles falavam naturalmente. Uma coisa que reparei foi que as filas nos estabelecimentos quando estavam usando o Smart Rede começavam a aumentar. Então fomos fazer um discovery para entender porque isso estava acontecendo.

Discovery

Na investigação observamos que a ausência de delimitação entre os números do teclado digital faziam com que os usuários acabassem tocando por acidente o número errado, próximo ao número desejado. Como a exibição de senha era feita utilizando asteriscos (****), eles não percebiam o erro e isso aumentava a quantidade de erros de digitação, retardando o processo de pagamento e resultando no aumento da fila na frente do caixa.

Solução

Solucionar esse problema foi um desafio, visto que não podíamos colocar indicadores visuais como o toque no teclado, que deixava aparente a senha para pessoas na fila.
Testamos diversos modelos de design para o teclado, medindo o tempo médio das transações em cada versão e chegamos a uma solução. Ao delimitar o teclado com bordas de 4dps reduzimos em 80% os erros de digitação de senha em comparação a primeira versão do teclado. Isso deixou a experiência fluída e evitava a formação de filas no caixa.

Segundo aprendizado ao observar os clientes pilotando

Contexto

Nas observações que fazíamos uma outra mudança de comportamento chamou a atenção. Em horários de pico no restaurante e nas cafeterias as/os atendentes deixavam o Smart Rede de lado e utilizavam os POs. Então fomos fazer um discovery para entender porque isso estava acontecendo.

Discovery

Na investigação observamos que em horários de pico cada atendente utilizava de duas a três maquininhas ao mesmo tempo para agilizar os pagamentos e evitar a formação de filas grandes. Nesse cenário a Smart Rede acabava atrapalhando o processo, porque nos POS o processo de digitação e seleção de forma de pagamentos eram feitas de forma muito ágil e automatizada, eles praticamente nem olhavam o teclado, digitavam rapidamente tudo e já entregavam a maquininha para o cliente digitar a senha, enquanto iam para o próximo cliente com outra maquininha.

Solução

Como solução o nosso desafio foi modificar o fluxo e e deixar a escolha da forma de pagamento e digitação dos valores em uma única tela, ao invés de ter cards para a seleção das formas de pagamentos e só no final a digitação de valor e senha.

1. O fluxo anterior tinha 6 telas + seleção para impressão do comprovante;
2. O fluxo novo ficou com 3 telas e impressão do comprovante automático.

Ao fazer essa modificação tornamos o processo de cobrança 25% mais rápido do que no POS, porque com o Smart Rede o atendente não precisava manipular a maquininha para entregar ao cliente e o cliente acabava digitando sua senha e escolhendo não imprimir o comprovante, indo embora sem esperar que o atendente voltasse a atenção para ele escolher se imprimia ou não o comprovante.

Lançamento

Em 2017, ao final desse processo e depois de validado o MVP foi realizado o lançamento do Smart Rede para todo o mercado brasileiro.

Após o lançamento a war room se transformou em uma squad e passamos a desenvolver também os apps complementares para o Smart Rede que surgiram como ideias durante o processo inicial de discovery e brainstorm.

Acelera é uma ferramenta que vem para trazer velocidade, mobilidade e acesso a oportunidades em tempo real para os consultores Rede.

O Acelera facilita o dia a dia dos consultores na prospecção direcionada com credenciamento online, planejamento de rota do dia e acompanhamento do status do ponto de venda.

Contexto

Muitos consultores da Rede em seu dia de trabalho realizando visitas acabam identificando clientes para prospectar. Eles tinham que fazer contato com a central da Rede e fazer uma indicação do cliente para que o representante comercial da região pudesse ser notificado. O que acontecia geralmente era a perda do prospect por falhas no processo, na comunicação e na disponibilidade dos representantes comerciais para atendimento.

Solução

A solução foi criar um app para que qualquer consultor da companhia pudesse instalar em seu smartphone para realizar o primeiro atendimento, cadastro e solicitação de maquinha POS para o cliente prospectado.

Objetivo do Projeto

– Prospecção direcionada com credenciamento online;
– Rota do dia planejada;
– Acompanhamento do status do ponto de vendas.

Meu papel

Product Design

O Processo detalhado

Inception

Reunimos os principais stakeholders para realização de dinâmicas e preparação do board do projeto. Nesse processo descobrimos que o projeto se transformaria em um produto amplo e de longa continuidade.

Discovery, Brainstormings e Blueprints colaborativos

Chamamos presencialmente alguns consultores e representantes comerciais, para participar de workshops com brainstormings e blueprints colaborativos, para mapear como seria o fluxo ideal de trabalho colaborativo entre todos e começar a esboçar junto com eles uma solução que pudesse ser utilizada pelas duas pontas de forma fluída.

Desenho da Experiência e Design

Com o material gerado nas dinâmicas em mãos chegou o momento de juntar tudo e começar a desenhar a experiência final do app e o seu design. Unimos todas as etapas do processo num fluxo único, com todas as informações necessárias sendo cadastradas pelos consultores, sendo agendada a visita e disponibilizada no roteiro para os representantes comerciais de forma automatizada.

Testes de Usabilidade e Aprendizados

Desenvolvemos protótipos navegáveis no marvel e reunimos novamente os consultores e representantes comerciais para aplicação de testes de usabilidade e coleta de feedbacks.

Contexto

Em uma primeira rodada de testes, colocamos consultores e representantes comerciais em uma única sala para rodar uma dinâmica e realizar o processo juntos. Funcionou bem, mas identificamos uma dificuldade entre os profissionais. Os consultores tinham receio de falar suas opiniões e problemas e isso travou o processo e impediu que nós pudéssemos coletar feedbacks verdadeiros deles.

Discovery

Discovery é uma disciplina de muitas facetas e agora precisávamos usar a técnica para descobrir porque o comportamento na dinâmica de teste não estava tão colaborativo como na primeira vez, durante os brainstorms.

Investigamos e descobrimos que os consultores estavam com medo de serem expostos depois, no dia a dia de trabalho. Porque depois da primeira dinâmica houveram conflitos entre as áreas, causados justamente pelos problemas que motivaram a criação da solução. Problema no fluxo de informação e na comunicação não fluída entre eles.

Solução

Fizemos mais duas rodadas de dinâmicas em dias diferentes com workshops para mostrar como as dinâmicas eram realizadas e porquê, para conseguir o engajamento e deixar os profissionais mais a vontade, seguros e descontraídos.

Na segunda rodada, pela manhã, separamos dois grupos em salas e andares diferentes. Em uma apenas os consultores e na outra apenas os representantes comerciais. Nas primeiras duas horas fizemos os workshops.

No restante da manhã rodamos os testes com os protótipos e coletamos feedbacks de melhorias do processo todo com os dois grupos, desenhando esboços do que identificaram como melhoria nas telas e funcionalidades.

Na parte da tarde juntamos os dois grupos para fazer uma convergência entre as soluções que eles separadamente esboçaram conosco.

Foi um sucesso, e acabamos descobrindo que a solução deveria ter um step a mais nas mãos dos consultores. Onde eles poderiam além de fazer um pré-cadastro do estabelecimento já realizar o pedido do produto, escolhendo através de uma tabela qual o melhor produto para já fisgar o cliente até uma avaliação mais profunda do representante comercial.

Na terceira rodada, reunimos os profissionais em outro dia, novamente em uma única sala e reaplicamos o teste com as melhorias coletadas do que tinha sido desenhado para o primeiro teste, adicionando agora os testes das funcionalidades esboçadas na segunda rodada.

Lançamento

Ao final desse processo realizamos o desenvolvimento e o lançamento do app. A adesão foi de 100% dos consultores. Que agora tinham em mãos uma ferramenta que também roteirizava suas visitas automaticamente e também era um lugar de fácil consulta de estabelecimentos para abertura e habilitação de novas contas para a companhia, sem precisar passar pela central de atendimento.

No futuro desenharíamos outra solução para os representantes comerciais onde aproveitaríamos todas essas informações para compor carteiras e rotas de visitas para oferta de novos produtos para os clientes ativados pelos consultores.

Ciclos de Desenvolvimento e Melhoria contínua

Após a primeira entrega e disponibilização do app para uso na companhia seguimos fazendo acompanhamento de uso e coleta de feedbacks via canal de sugestões no app, entrevistas com alguns consultores e representantes comerciais, além da coleta de dados e métricas através do próprio app. Essas informações reunidas nos forneceram insights e devolutivas para melhoria das funcionalidades e fluxos já desenvolvidos, para evolução do app com novas funcionalidades.