← Renan MarçalPortal C6 Pay

PayGo · C6 Bank · 2020–2021

Portal de gestão para lojistas C6 Pay

Quando a PayGo entrou no ecossistema do C6 Bank, o portal passou a fazer parte da rotina financeira de milhares de lojistas ainda organizado pela lógica do sistema legado. Meu trabalho foi aproximar essa estrutura do dia a dia do lojista dentro do que a plataforma conseguia entregar.

Papel
Senior Product Designer
Impacto
−36% em chamados de suporte
−28% no tempo em tela
Equipe
1 PM · 4 Devs
Duração
6 meses
Nova interface do portal C6 Pay em perspectiva, exibindo o painel de gestão financeira para lojistas
o contexto 01

Telas e regras acumuladas no legado

O portal havia crescido por camadas, com telas e regras adicionadas conforme a operação precisava, deixando vendas, recebíveis e histórico organizados pela estrutura interna do sistema e distantes da sequência usada pelo lojista no fechamento.

Modal do portal legado exibindo tabela de transações com excesso de colunas técnicas
01

Conferir dados em várias telas

O fechamento de caixa dependia de cruzar informações entre diferentes áreas do portal.

02

Interpretar a lógica do sistema

A estrutura do portal reproduzia a organização interna do sistema, distante da rotina do lojista.

03

Recorrer ao suporte

Dúvidas operacionais simples frequentemente terminavam em chamados para o atendimento.

descoberta 02

Encontrar vendas não bastava para fechar o caixa

Com as próximas sprints já em preparação, a discovery aconteceu dentro dos refinamentos: reconstruí com engenharia como os dados chegavam ao portal e, com PM e CX, acompanhei as dúvidas que terminavam em chamados.

Os lojistas encontravam vendas e recebíveis, mas para responder "quanto vou receber?" ou "meu caixa fecha hoje?" ainda precisavam interpretar estados, cruzar telas e juntar os valores por conta própria; levei esse recorte para o time e propus começar a primeira entrega pela posição financeira do dia.

01

Vendas e recebíveis em áreas separadas

A estrutura do sistema distribuía as informações entre telas que o lojista precisava cruzar durante o fechamento.

02

Fechamento montado fora do portal

Estados e valores precisavam ser interpretados e combinados até formar uma visão do caixa.

ideação 03

Do resumo esperado ao que cabia na sprint

Durante a exploração em baixa fidelidade, perguntei aos lojistas o que esperavam encontrar em um "Resumo" e ouvi que o valor do dia, o total a receber e os prazos precisavam aparecer já calculados, muitas vezes com Stone e PagBank como referência.

Como o tempo era curto e nem tudo cabia nas primeiras sprints, levei esses aprendizados para os refinamentos com engenharia conforme apareciam; foi assim que "Condições comerciais" virou "Taxas" no menu antes mesmo de o restante do projeto ficar pronto.

Portal da Stone em 2020, com resumo de recebimentos, agenda da semana, simulador e últimas vendas
Stone, 2020. Resumo com recebimentos do dia, valores futuros e atalhos operacionais.
Portal PagSeguro em 2020, com saldo, próximas liberações e atalhos para tarefas financeiras
PagSeguro, 2020. Visão inicial com saldo, próximas liberações e acessos rápidos.
lógica 04

Três decisões para responder quanto vou receber

No resumo financeiro, os valores apareciam numa grade semanal, enquanto vendas, recebíveis e histórico ficavam em outras telas, obrigando o lojista a navegar entre elas e somar os valores para descobrir quanto receberia.

01

Ver o que entra hoje e nos próximos dias

No lugar da grade semanal, mostramos os valores de hoje, dos próximos 7 dias e dos próximos 30 dias.

02

Ler o caixa numa única sequência

Reunimos posição financeira, evolução dos valores e histórico na mesma sequência de leitura, evitando que o lojista montasse o cenário ao navegar entre áreas do portal.

03

Encontrar respostas antes dos filtros

A primeira tela passou a responder as dúvidas mais frequentes, deixando períodos, estados e filtros para a conferência dos detalhes.

visão financeira 05

A posição financeira antes dos detalhes

Nos chamados acompanhados pelo CX, encontrar vendas e recebíveis era apenas parte da tarefa, pois o lojista ainda precisava confirmar se os valores fechavam no fim do dia, necessidade que levou o resumo a abrir com a posição financeira e seguir para os detalhes usados na conferência.

Estrutura de informação do portal C6 Pay redesenhado, organizando dados financeiros em blocos visuais para lojistas
fechamento de caixa 06

Encontrar a venda que não fechava

Quando o total não fechava, o lojista precisava encontrar a venda responsável pela diferença por meio de várias consultas e ajustes de filtro na tela antiga.

Coloquei os períodos mais usados logo acima da listagem, com acesso direto a hoje, ontem, últimos 7 dias e últimos 30 dias, e mantive operação e status visíveis na tabela, perto dos dados usados na conferência.

O horário da última sincronização ficou no topo para que o lojista confirmasse a atualização dos valores antes de procurar uma divergência.

Lojista consultando a tela de Vendas do portal C6 Pay redesenhada, com filtros rápidos por período, operação e status para facilitar o fechamento de caixa
fundamentação 07

O que conferi antes de desenvolver

01

Chamados no fechamento de caixa

A concentração de chamados no fechamento de caixa definiu qual parte do portal entraria primeiro no redesenho.

02

Viabilidade dos indicadores

Mapeei com engenharia a origem e a consistência dos dados para definir quais indicadores poderiam entrar na primeira entrega sem apresentar valores pouco confiáveis ao lojista.

03

Navegação revisada com design

Nas críticas com designers da PayGo e do C6 Bank, revi a navegação e a hierarquia das informações antes da implementação.

04

Testes com lojistas

Testei a nova ordem das informações com cinco lojistas antes do desenvolvimento e ajustei o que ainda gerava dúvida.

impacto 08

Menos chamados e uma conferência mais rápida

Nos três meses seguintes à implantação gradual, os chamados sobre fechamento de caixa, recorte acompanhado com CX por concentrar as dúvidas tratadas no redesenho, caíram 36%.

Com a PO, acompanhei no Google Analytics o comportamento na tela de vendas e observei uma queda de 28% no tempo médio, sinal de que os lojistas estavam encontrando e conferindo as informações com menos esforço.

Também adaptamos componentes do design system do C6 às limitações da plataforma da PayGo e deixamos para a squad uma biblioteca usada nas entregas seguintes.

Próximo case Priorização de visitas comerciais