CYTEI: como desenhei um SaaS de energia solar para cinco perfis

Em 2020, quem trabalhava com energia solar no Brasil resolvia cada parte do negócio num lugar diferente. A usina controlava as cobranças em planilha, o investidor recebia os números por e-mail e o consumidor que queria economizar na conta de luz não sabia nem por onde começar.

A CYTEI nasceu para juntar essas pontas numa plataforma só. Eu entrei no projeto como UX/UI Designer, num contrato de três meses, com a missão de desenhar a experiência de cinco perfis de usuário que compartilham o mesmo produto e quase nunca querem ver as mesmas coisas.

Este case mostra como eu cheguei às telas: as perguntas que fiz antes de abrir o Figma, a arquitetura que sustentou tudo, as regras que guiaram cada decisão visual e o que aconteceu quando voltei ao projeto anos depois para redesenhá-lo.

O ponto de partida#

O desafio tinha dois lados que puxavam em direções opostas. Usinas e investidores precisavam de muita informação na tela: faturamento, inadimplência, fluxo de caixa, contratos com dezenas de variáveis. O consumidor final precisava do contrário, uma tela limpa que respondesse se valia a pena aderir e quanto ele ia economizar.

Fazer duas plataformas estava fora de questão. O produto precisava de uma estrutura única capaz de mudar de densidade conforme quem estivesse logado.

Cinco perfis, cinco perguntas#

Antes de qualquer wireframe, listei os perfis e a pergunta principal que cada um traz quando abre a plataforma. Essa lista virou o filtro de todas as decisões seguintes: se um elemento não ajudava a responder a pergunta daquele perfil, ele saía da tela dele.

1. Usinas e usineiros: quanto eu faturei, quem está me devendo e quanto ainda tenho de energia para vender?
2. Investidores: onde está o meu dinheiro, com que taxa e com que risco?
3. Consumidores: quanto eu economizo e o que preciso assinar?
4. Especialistas e EPCistas: quem precisa de mão de obra e quando eu estou disponível?
5. Integradoras: como provo que sou uma empresa confiável e encontro clientes?

Os dois públicos ficaram claros nessa lista. Usinas e investidores formam o lado B2B, que lê tabelas e compara períodos. Consumidores formam o lado B2C, que precisa de poucas decisões, bem explicadas.

A arquitetura veio antes das telas#

Com os perfis definidos, montei o mapa do produto. Cada módulo funciona como uma unidade independente, e o menu lateral mostra só os módulos que fazem sentido para o perfil da sessão. Um consumidor nunca vê a área de contabilidade; um investidor não esbarra no cadastro técnico da usina.

Essa decisão resolveu dois problemas ao mesmo tempo. Cada perfil enxerga um produto menor e mais fácil de entender, e a empresa ganhou espaço para criar módulos novos sem redesenhar a navegação.

• DashboardVisão geral e gráficos de janeiro a dezembro
• Gestão e financeiroPagamentos, cobranças, receitas, despesas, notas fiscais, contabilidade e integração de TI
• UsinasCadastro de nova usina e dados técnicos (subgrupo, carga, produção em MWp)
• NegociaçãoBuscar consumidores e sócios investidores, contratar especialistas e EPC
• ContratosContratos firmados, condições de financiamento e termos padrão da plataforma
• QualificaçãoDados gerais, minhas especialidades e meus imóveis
• AcessoUsuários, permissões e setores
• ContaLogin, notificações integradas a WhatsApp e e-mail, edição de perfil

O onboarding seguiu a mesma lógica. Pessoa jurídica e pessoa física passam por qualificações diferentes, e cada etapa pede só o que aquele perfil precisa informar.

As regras da interface#

Com a estrutura pronta, defini quatro regras visuais para manter as telas coerentes enquanto o número de módulos crescia:

1. Cor só para estado. Verde para pago e regular, vermelho para atraso e erro, amarelo para o que espera alguém. O resto da interface fica neutro, para que um atraso salte aos olhos sem esforço.
2. Navegação na lateral. O menu vertical libera a largura da tela para tabelas financeiras e gráficos, que são o centro do trabalho de quem opera uma usina.
3. Ação na linha do dado. Enviar contrato, cobrar ou baixar o comprovante acontece na própria linha da tabela. O usuário age sem abrir outra tela para isso.
4. Número sempre com contexto. Um valor aparece junto da comparação com o mês anterior, da meta ou do ticket médio, para que o dado já chegue como uma informação útil para decidir.

A releitura#

Em 2020 entreguei os protótipos de alta fidelidade no Figma, em tema claro. Em 2026 voltei ao projeto para testar se a arquitetura daquela época aguentaria o mercado de hoje, que mudou bastante com o Marco Legal da geração distribuída (Lei 14.300/2022).

Escrevi uma direção de arte curta para a releitura: tema escuro de alto contraste, violeta reservado para o que é clicável, verde para estado positivo, vermelho só para erro e bordas finas no lugar de sombras. Usei o Google Stitch para gerar as telas a partir da arquitetura original e trabalhei em cima do resultado, mantendo as quatro regras de 2020. A plataforma ganhou dois módulos que não existiam: consórcio de geração compartilhada e leitura automática de contas de luz.

A comparação mostra o que eu queria verificar: a lateral, os indicadores no topo e a tabela com ação na linha continuam no mesmo lugar. A estrutura de 2020 recebeu os módulos novos sem precisar mudar.

Módulo a módulo#

A seguir, as telas da releitura e as decisões de design por trás de cada uma. Toque em qualquer tela para ampliar e navegar entre elas.

Dashboard: a saúde da usina em uma tela#

O gestor abre o dashboard (a tela do início deste case) para saber se o mês está indo bem. Por isso os quatro indicadores do topo (geração, faturamento, inadimplência e consumidores ativos) trazem cada um a comparação com o período anterior e uma barra fina que mostra a distância até a meta.

Abaixo do gráfico de receitas contra despesas ficam três números que resumem a operação: margem líquida, tarifa média e a divisão entre clientes empresa e pessoa física. Na tabela de pagamentos, a ação de cada linha depende do status. Quem pagou tem o comprovante; quem atrasou tem o botão de cobrar.

Cobrança: o atraso aparece primeiro#

O ciclo de cobrança se lê da esquerda para a direita nos indicadores: o total emitido, o que já entrou, o que ainda vai vencer e o que venceu. Só o último card tem borda vermelha, porque é o único que pede ação.

As abas mostram a contagem de cada grupo (todos, em dia, inadimplentes e em negociação), então o gestor sabe o tamanho do problema antes de clicar. A linha de um inadimplente com mais de quinze dias ganha um fundo avermelhado e ações de alerta. Para atrasos em volume, a cobrança em lote fica no topo, como ação principal da página.

Financeiro: o que aconteceu e o que vem#

O financeiro cruza o histórico de receitas com a projeção dos próximos ciclos. No gráfico, os meses realizados têm cor cheia e os projetados ficam num tom apagado, com um asterisco. A diferença entre fato e estimativa fica visível sem legenda extra.

Ao lado do gráfico, a composição dos custos de operação aparece numa barra única dividida por categoria, com o percentual e o valor de cada uma. Na lista de lançamentos, receitas vêm com sinal de mais em verde e despesas com sinal de menos, e o vencimento atrasado muda de cor.

Consumidores: a jornada como coluna#

A usina acompanha cada consumidor do primeiro contato até a assinatura. Em vez de espalhar essa informação por várias telas, criei uma coluna chamada etapa da jornada, com estados como lead qualificado, minuta em análise jurídica e contrato vigente.

No rodapé, o funil de conversão resume a mesma informação em quatro números: contatos, qualificados, em proposta e em assinatura. O botão de enviar termos em lote liga esta tela ao módulo de contratos.

Qualificação: a conta de luz vira dado#

Em 2020 a qualificação era um formulário: o usuário digitava os dados da empresa, o CNPJ, a produção instalada e a localização. Na releitura, o ponto de partida virou a própria conta de luz. A usina envia o PDF ou a foto, a plataforma extrai o histórico de consumo e o lead entra na tabela com score de crédito e um parecer técnico, como apto para consórcio, apto para autoconsumo ou incompatível.

Os critérios de enquadramento ficam explicados no rodapé da tela, e o card de alocação mostra quanto da usina ainda está livre. Quando a fila de leads passa da capacidade disponível, a ação sugerida é priorizar por margem.

Negociações: quem oferece e quem procura#

Esta área junta perfis com interesses complementares. O investidor procura usinas para financiar; a usina procura capital e mão de obra; o especialista procura trabalho. As abas separam cada conversa, e a tabela de investidores mantém numa linha só as variáveis que definem o risco: teto de financiamento, taxa, deságio e status da auditoria.

A agenda dos especialistas virou um termômetro: uma barra dividida entre atuando, disponível, reservado e inativo. Quem planeja uma obra vê em segundos quantos técnicos estão livres na região, e cada especialista vem com avaliação por estrelas dada por outras usinas.

Contratos: o vencimento avisa antes#

A CYTEI trabalha com seis modalidades de contrato: venda, aluguel, comodato, consórcio, cooperativa e autoconsumo. Os filtros em chips, com a contagem de cada modalidade, deixam o gestor recortar a carteira com um clique.

A tabela segue a ordem em que um advogado lê um contrato: objeto, partes, modalidade, vigência, valor, reajuste e status. No rodapé, os alertas de cláusulas críticas avisam o que vence no ciclo, como um reajuste pelo IPCA daqui a trinta dias, e já trazem o botão para emitir a notificação.

Consórcio: dividir a energia entre cotistas#

O consórcio é um dos módulos novos da releitura. A usina divide a energia gerada entre empresas e pessoas físicas, e cada cotista recebe uma fatia da produção. A tela responde primeiro se a usina está toda comprometida e, logo abaixo, como a potência se divide entre varejo, serviços, residencial e reserva técnica.

A relação com a concessionária ganhou um painel próprio, com a lista de rateio vigente, a janela para enviar alterações e as pendências, como uma troca de titularidade que ainda espera protocolo. Na tabela, a cota de cada cotista aparece em percentual, em kWp e numa barra curta, para comparar a carteira de relance.

Cadastro da usina: o progresso à vista#

Cadastrar uma usina exige dezenas de campos técnicos e documentos da concessionária. Para o formulário não parecer interminável, dividi o conteúdo em cards numerados e coloquei no topo uma faixa de conformidade que diz quanto do cadastro está pronto e qual é a única pendência.

A localização, que em 2020 já tinha um mapa para validar a área atendida, ganhou o desenho da planta sobre o terreno, com latitude, longitude e área arrendada logo abaixo.

No celular#

A versão para celular partiu de uma pergunta diferente: o que o gestor resolve longe do computador? A resposta definiu a barra inferior, com quatro destinos: dashboard, cobrança, consórcio e leads. O resto da plataforma continua no desktop.

• 

• 

• 

• 

As tabelas do desktop viraram cards, cada um com uma faixa de cor na lateral que repete a regra do status. As ações também seguem o status: o consumidor inadimplente tem os botões de WhatsApp e de reemitir o boleto, o que pagou tem o comprovante e o que ainda vai vencer tem um lembrete.

A qualificação foi a tela que mais mudou. No celular, o upload de PDF dá lugar ao botão de fotografar a conta de luz, e o gestor qualifica um cliente durante a visita, com a conta na mão.

O que eu levo deste projeto#

A lição mais valiosa da CYTEI foi começar pelos perfis e pela arquitetura. Em 2020, isso permitiu entregar em três meses um produto com cinco jornadas sem que uma atrapalhasse a outra. Seis anos depois, a mesma estrutura recebeu um módulo de consórcio, leitura automática de contas e uma versão para celular sem mudar a navegação.

As regras visuais também envelheceram bem. Valeram tanto para o tema claro de 2020 quanto para o escuro da releitura, e se adaptaram à tela do celular sem exceções.

Se o seu produto também precisa atender públicos com necessidades diferentes na mesma plataforma, é esse tipo de problema que eu gosto de resolver.