SuaMEI: plataforma de gestão financeira para MEIs
Arquitetura de informação, módulos e sistema visual de uma plataforma de gestão financeira para microempreendedores individuais.
Erick Nobre Case de 2020 a 2022 · 6 min de leitura
UX/UI- Papel
- UX/UI Designer Júnior
- Contrato
- PJ, de 2020 a 2022
- Modelo
- Fintech para MEIs
- Escopo
- 6+ módulos, desktop e celular
- Entregas
- Protótipos, design system e handoff em HTML e CSS
- Impacto
- 2.500+ MEIs e 250+ empresas
Contexto e desafio#
A SuaMEI nasceu em 2020 para atender microempreendedores individuais (MEIs), um público em que 7 em cada 10 estão irregulares, segundo o Sebrae, muitas vezes sem saber. Atuei como UX/UI Designer Júnior, em contrato PJ, de 2020 a 2022, e participei do ciclo inteiro do produto: pesquisa, concepção, ideação, prototipação e testes de usabilidade. O desafio era conciliar a complexidade da legislação do MEI com uma interface que uma pessoa pouco familiarizada com sistemas financeiros entendesse na hora, no celular e no meio do expediente. A plataforma reúne conta digital, impostos, notas fiscais, contratos e benefícios, que o empreendedor antes encontrava espalhados entre portais do governo e bancos. As telas deste case foram geradas no Google Stitch a partir do briefing de produto e usam dados fictícios.
Arquitetura de informação#
O público é formado por MEIs que organizam sozinhos receitas, despesas e obrigações fiscais, por isso a estrutura prioriza as tarefas frequentes, com linguagem direta e poucas etapas. A navegação tem seis áreas, listadas abaixo, e o menu lateral deixa claro onde o usuário está e permite trocar de módulo com facilidade. Na barra superior, Pagar DAS e Novo Pix ficam visíveis em qualquer módulo. As informações de consulta ficam separadas das ações que movimentam dinheiro, e taxas, prazos e consequências aparecem antes da confirmação.
- Visão GeralResumo financeiro, indicadores, gráficos e atalhos
- Financeiro e Conta DigitalReceitas, despesas, extrato, transferências, pagamentos, cobranças e cartão
- Minha EmpresaDados cadastrais, impostos, notas fiscais e contratos
- BenefíciosCatálogo de serviços, contratação e gestão
- Minha Conta e Meu PerfilDados pessoais, foto, endereço, contas bancárias e configurações
- PreferênciasCategorias, tags, personalização e preferências financeiras
Módulos da plataforma#
Desenhei seis módulos: Visão Geral, Financeiro, Conta Digital, Minha Empresa, Benefícios e o onboarding, todos com estados vazios, de erro e de sucesso. A Visão Geral, que abre este case, junta o saldo consolidado, o faturamento do mês, as contas a receber e a pagar, o limite anual do MEI e a guia do DAS com o vencimento destacado, de modo que as pendências aparecem sem o usuário abrir outra tela. Os demais módulos vêm a seguir, cada um com a tela e a decisão de interface que ela mostra.
Módulo Financeiro#
Módulo Conta Digital#
Módulo Minha Empresa#
Módulo Benefícios#
Sistema visual#
O sistema visual usa fundo branco, tipografia legível e o laranja institucional só para destaques pontuais, como o botão principal e o item ativo do menu, para que dados e extratos fiquem em primeiro plano. Nas telas, verde e vermelho aparecem apenas como estado. A biblioteca de componentes no Figma, com tokens documentados, atendeu desktop e celular, com as adaptações responsivas registradas por breakpoint, e o handoff incluiu especificações detalhadas e acompanhamento da implementação em HTML e CSS.
Versão para celular#
O acesso acontece quase sempre pelo celular, no meio do expediente e muitas vezes em conexão instável, então cada tela precisa ser clara de imediato. A versão para celular mantém os cinco módulos principais numa barra inferior, com o destino atual em laranja, e transforma os cartões e as tabelas do desktop em blocos de largura total: o saldo, os atalhos de ação e a guia do DAS vêm primeiro, e as ações frequentes (Novo Pix, Pagar DAS e Emitir NF-e) viram botões na primeira dobra.
Visão GeralSaldo e atalhos primeiro FinanceiroExtrato em lista Conta DigitalAções em blocos Minha EmpresaDAS à mão
Resultados e aprendizados#
A plataforma foi lançada em 2020, nas versões mobile e desktop, e atendeu mais de 250 empresas e 2.500 MEIs, com mais de R$ 8,1 milhões em notas fiscais emitidas. Os fluxos de pagamento, emissão de nota, abertura de conta e regularização do CNPJ foram prototipados e validados antes do desenvolvimento, e a documentação no Figma, com o apoio prático em HTML e CSS, reduziu o atrito entre design e front-end. O que levo do projeto é testar com usuários reais cada fluxo que movimenta dinheiro: o pagamento, que recebeu atenção especial nos testes, termina com a revisão dos dados e a confirmação por senha.
