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.