← Renan Marçal Portal C6 Pay

PayGo · C6 Bank · 2020–2021

Portal de gestão para lojistas C6 Pay

O portal de gestão do C6 Pay ainda carregava a estrutura e a linguagem da PayGo, construída para um contexto anterior à integração com o C6 Bank. O redesenho reorganizou a navegação e a apresentação das informações para tornar mais claro o acompanhamento da operação financeira pelos lojistas dentro do novo ecossistema do banco.

Plataforma
Portal B2B · Web
Papel
Product Designer
Equipe
1 Product Manager · 4 Engenheiros
Atuação
Pesquisa · Arquitetura da Informação · UX/UI · Design System
Nova interface do portal C6 Pay em perspectiva, exibindo o painel de gestão financeira para lojistas
o contexto 01

Uma operação B2B entre a PayGo e o C6 Bank

Com a integração entre PayGo e C6 Bank, surgiu a necessidade de alinhar a experiência do portal aos padrões do banco e preparar a plataforma para sua evolução. Além da modernização visual, o produto acumulava problemas de usabilidade, navegação e comunicação que impactavam tarefas essenciais dos lojistas e aumentavam a demanda por suporte.

Modal do portal legado exibindo tabela de transações com excesso de colunas técnicas
Tela de resumo financeiro do portal legado PayGo com visão engessada por dias da semana

Experiência do usuário

  • Navegação pouco intuitiva
  • Arquitetura da informação confusa
  • Baixa priorização das informações financeiras
  • Excesso de carga cognitiva nas telas
  • Fluxos longos para tarefas recorrentes

Impacto no negócio

  • Alto volume de dúvidas operacionais
  • Dependência frequente do suporte
  • Baixa eficiência na execução de tarefas
  • Inconsistência com os padrões do C6 Bank
  • Base limitada para evolução do produto
colaboração 02

Entendendo as possibilidades com engenharia

Como o time era pequeno, tínhamos contato diário com a engenharia. Aproveitei essa proximidade para entender como os dados chegavam ao portal, quais eram as limitações do sistema legado e, junto da PM, definir o que realmente fazia sentido evoluir nessa primeira fase. A partir dessas conversas, priorizamos duas frentes para o redesenho.

Interface legada do portal PayGo exibindo os dados praticamente como eram consumidos pelo backoffice
01

Ajudar no fechamento de caixa

Ao analisar os chamados de suporte, identifiquei que boa parte das dúvidas surgia durante o fechamento de caixa. Os lojistas tinham dificuldade para localizar e interpretar as informações financeiras no portal. Esse passou a ser o principal problema do projeto.

02

Priorizar o que realmente importava

Na rotina do balcão, o usuário precisava saber rapidamente como estava sua situação financeira naquele dia. Reorganizei a interface para dar visibilidade às informações essenciais e tornar essa resposta imediata, sem depender de tabelas e filtros.

ideação e lógica 03

Transformando dados em uma visão financeira clara

Com as prioridades definidas, reorganizei a interface para facilitar a leitura das informações financeiras no dia a dia. A solução substituiu tabelas extensas por uma estrutura mais visual, reduzindo a necessidade de interpretar dados técnicos para acompanhar o fechamento de caixa.

01

Resumo financeiro

Substituí o calendário semanal engessado do sistema legado por cartões consolidados com os principais indicadores financeiros, permitindo visualizar o saldo total sem precisar calcular colunas diárias.

02

Organização da informação

Organizei a interface para refletir a rotina do lojista. Os recebíveis ficaram em destaque na parte superior da tela, oferecendo uma visão do dinheiro que ainda entraria, enquanto as vendas do dia permaneceram logo abaixo para apoiar o fechamento de caixa.

03

Linguagem orientada à operação

Revisei a organização dos menus, filtros e mensagens para tornar a navegação mais intuitiva. A comunicação passou a privilegiar o contexto de uso do lojista, com períodos, estados e feedbacks mais claros ao longo da experiência.

visão financeira 04

Uma visão clara da operação financeira

O portal possuía duas áreas distintas de resumo financeiro que apresentavam informações complementares, mas exigiam navegação entre telas para compor um cenário completo. Com apoio do time de CX, mapeei as dúvidas mais frequentes dos lojistas durante o fechamento de caixa e consolidamos essas informações em uma única visão, priorizando os indicadores mais relevantes para a operação diária da maquininha C6.

Reorganizei a interface para aproveitar melhor o espaço disponível, reduzir elementos repetitivos e destacar apenas as informações necessárias para o fechamento de caixa. Com isso, o comerciante passou a consultar rapidamente sua posição financeira logo na primeira tela, diminuindo a necessidade de percorrer diferentes seções do portal.

Estrutura de informação e ideação do redesenho do portal C6 Pay, organizando dados financeiros em blocos visuais para lojistas
fechamento de caixa 05

Facilitando o fechamento de caixa

A análise dos chamados de suporte mostrou que boa parte dos lojistas utilizava o histórico de vendas para conferir o fechamento diário da operação. O desafio era reduzir o tempo gasto nessa conferência e tornar mais fácil identificar divergências entre as transações.

Para isso, reorganizei a experiência priorizando as consultas mais frequentes, com filtros rápidos por período e refinamentos por status e operação. Também deixei o estado de cada transação mais explícito e adicionei a informação de última atualização dos dados, oferecendo mais confiança durante a validação do caixa.

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 06

Como fundamentamos as decisões de design

O redesenho não foi baseado apenas na análise da interface existente. Ao longo do projeto, reuni diferentes perspectivas para entender melhor o problema, validar hipóteses e alinhar as decisões com o restante do time.

CX

Aproximação com o time de atendimento para entender o perfil dos lojistas, as dúvidas mais recorrentes e os principais motivos de contato com o suporte.

Engenharia

Mapeamento do funcionamento do sistema legado para entender limitações técnicas, disponibilidade dos dados e o que poderia ser resolvido na interface ou exigiria mudanças no back-end.

Análise de outros players

Análise de produtos como Stone, Stripe e PagSeguro para entender como o mercado organiza informações financeiras e construir uma base de referência para as decisões de design.

Testes com usuários

Validação dos protótipos com cinco lojistas para verificar se as principais decisões realmente facilitavam a operação antes do desenvolvimento.

impacto 07

Redução de suporte e autonomia no desenvolvimento

Depois que o portal entrou em produção, as dúvidas sobre fechamento de caixa praticamente desapareceram do suporte. Para entender se a mudança também aparecia no comportamento dos usuários, analisei o GA junto com a PO. O tempo médio na tela de vendas caiu quase pela metade e o acesso aos relatórios aumentou. Em paralelo, adaptamos os componentes do design system do C6 às limitações técnicas da PayGo e estruturamos uma biblioteca própria para que a squad pudesse evoluir o produto com mais consistência.