Em desenvolvimento: esta página ainda não está pronta. Volte em breve para conferir as novidades!
UX/UI Design SaaS B2B / B2C Web App Energia Renovável 2020

CYTEI: Centralizando a jornada de 5 personas em um único ecossistema

Projetei a interface que conecta consumidores, usinas e investidores em um hub sustentável. A CYTEI funciona como uma plataforma SaaS modular que organiza a cadeia de negócios de energia renovável no Brasil, cobrindo etapas desde o contrato de financiamento até o crédito de carbono.

Atuei como UX/UI Designer Junior em contrato PJ com duração de 3 meses. Fui o responsável direto pela arquitetura de informação, wireframes e protótipos de alta fidelidade no Figma. O projeto foi executado manualmente e o sistema atende cinco perfis distintos em um produto unificado, assegurando fluxos claros para cada tipo de usuário.

Empresa CYTEI (PJ) Função UX/UI Designer Junior Ano 2020 Duração 3 meses Processo Elaboração manual Plataforma Web App · SaaS
CYTEI: Dashboard com KPIs financeiros, gráfico de receitas versus despesas e tabela de pagamentos CYTEI: Módulo de Qualificações com formulário de dados da empresa e lista de consumidores interessados
5 Personas Distintas

Consumidores, Usinas, Especialistas, Investidores e Integradores integrados com jornadas e permissões independentes.

6+ Módulos Projetados

Gestão, Financeiro, Negociações, Contratos, Qualificações e Classificados operando em uma navegação única.

B2B/B2C Modelo Híbrido

Interface desenhada para empresas integradoras e consumidores pessoa física. A hierarquia visual adapta-se ao contexto de cada perfil.

Arq. de Info Arquitetura Modular

Estrutura baseada em blocos projetada para escalar novos módulos sem exigir retrabalho na navegação ou nos padrões visuais estabelecidos.

Sobre o Produto

Um hub que transforma a cadeia de energia renovável em negócio acessível.

A CYTEI centraliza as ferramentas necessárias para que cada agente da cadeia solar, da usina ao consumidor final, consiga operar e crescer no mesmo ambiente digital.

O mercado de energia solar no Brasil apresentava fragmentação em 2020. Usinas, consumidores e investidores operavam em ecossistemas separados. A CYTEI surgiu com o objetivo de unificar essas pontas sob uma proposta de economia de tempo e recursos.

Meu trabalho consistiu em mapear as tarefas principais de cada agente para que eles completassem seus objetivos com agilidade. O foco do projeto garantiu que consumidores simulem economia de energia e investidores analisem fluxos financeiros de usinas sem precisar trocar de plataforma.

Desenvolvi a arquitetura de informação e criei um sistema de permissões por persona com módulos navegáveis via barra lateral. A linguagem visual atende o usuário B2C com clareza imediata e entrega ao gestor B2B a densidade de dados necessária para o acompanhamento em tempo real.

Figma Wireframing Alta Fidelidade Arquitetura de Informação SaaS B2B / B2C Processo manual
CYTEI: Dashboard da plataforma com gráfico de cobranças, receitas e despesas por período
CYTEI: Dashboard de Gestão com KPIs financeiros e performance de cobranças detalhada por período.
O Desafio

Arquitetura da complexidade: acomodar cinco contextos de uso na mesma plataforma.

O projeto exigia conciliar dados financeiros densos para usinas e, ao mesmo tempo, oferecer um ambiente limpo para o consumidor final. A estrutura precisava suportar múltiplas necessidades simultâneas sem gerar ruído visual.

Cada persona possui vocabulário e intenções de navegação próprias. Investidores analisam tabelas de fluxo financeiro e condições contratuais. Consumidores focam na projeção de economia domiciliar. Especialistas procuram ativamente por usinas com demanda por mão de obra técnica.

A solução baseou-se inteiramente em uma arquitetura de informação modular, construída do zero. O contexto do usuário dita o conteúdo da tela, mantendo a integridade da plataforma sem fragmentá-la.

  • 5 perfis com jornadas concorrentes: Consumidores, Usinas, Especialistas, Investidores e Integradores compartilham a plataforma baseada em permissões e módulos controlados.
  • Alta densidade de dados para usuários B2B: Tabelas de contratos, gráficos financeiros e fluxo de caixa exigiam escaneabilidade ágil, preservando a leveza visual do painel.
  • Onboarding heterogêneo: Consumidores pessoa física e empresas integradoras completam fluxos de qualificação distintos. Fricção em qualquer uma das etapas causa abandono de conta.
  • Módulos interdependentes: Classificados, Negociações, Gestão de Receitas, Contratos e Créditos de Carbono convivem na navegação principal e demandam rotas acessíveis.
  • Confiança como produto: O usuário necessita de segurança jurídica e técnica durante as interações, especialmente nos fluxos contratuais e financeiros.
  • Escalabilidade manual projetada: Planejei a arquitetura para suportar novos módulos sem quebrar a lógica de navegação original.
Solução de Design

Clean UI orientada a dados: foco e legibilidade em todas as telas.

Priorizei a clareza informacional em cada decisão visual. A interface guia os usuários pelas tarefas essenciais de seus respectivos perfis e remove elementos secundários da área principal de foco.

Clean UI: Redução de Carga Cognitiva

A interface utiliza fundo branco, escala tipográfica com alto contraste e cores aplicadas exclusivamente para indicar estados do sistema. O design apoia a leitura de dados numéricos.

Sidebar Navigation: Foco no Contexto B2B

A navegação lateral preserva o eixo horizontal para a expansão de tabelas e gráficos. O agrupamento por persona restringe o menu apenas aos módulos relevantes para a sessão ativa.

Hierarquia Visual: Tabelas Escaneáveis

Criei tabelas com indicadores de status semântico e colunas organizadas por prioridade técnica. Ações contextuais, como o envio de contratos, residem na própria linha de leitura do dado.

Arquitetura Modular: Expansão Contínua

Tratei cada módulo como uma unidade de interface autônoma. Novas áreas de serviço são adicionadas ao shell da aplicação sem exigir remodelação da árvore de navegação principal.

CYTEI: Módulo Financeiro com cards de Receitas, Despesas e Previsão de Faturamento
CYTEI: Visão Geral do Financeiro contendo cards de KPI segmentados por perfil de cliente e faturamento.
Módulo 01 · Gestão

Visualização de fluxo de caixa e controle de faturamento B2B.

Gestores de usinas acessam respostas imediatas sobre saúde financeira e taxas de inadimplência. O sistema correlaciona o histórico de receitas com a projeção de faturamento do ciclo seguinte.

O Dashboard funciona como o ambiente de controle executivo do gestor. Os cards numéricos resumem Receitas, Despesas e a Previsão de Faturamento. Logo abaixo, gráficos agrupam o comparativo mensal e as tabelas indicam as pendências de pagamento.

A organização visual acelera a identificação de atrasos ou perdas financeiras. Desenvolvi um sistema de cores semânticas que classifica o status das contas e reduz o tempo de análise da carteira de clientes.

O módulo de Cobranças detalha os pagamentos com filtros cruzados por usina e data. Aloquei os controles de fatura e as vias de comprovante diretamente na linha da tabela, uma decisão que cortou cliques desnecessários do fluxo de conciliação.

A tela Visão Geral do Financeiro consolida o desempenho operacional. Ela exibe a receita segmentada por clientes corporativos e pessoas físicas, cruza dados em um gráfico temporal de Receitas contra Despesas e expõe a divisão de categorias no faturamento.

Atrelei contexto específico a cada número da interface. A apresentação do volume de "Clientes Pessoa Jurídica" acompanhado do ticket médio respectivo converte o dado absoluto em um indicador tático. O gestor avalia o saldo financeiro junto com a qualidade e o perfil dos seus pagadores.

CYTEI: Dashboard de Gestão com gráfico de Receitas contra Despesas e tabela de pagamentos
CYTEI: Dashboard exibindo o comparativo mensal e o detalhamento de contas por meio de status semânticos.
CYTEI: Módulo de Cobranças com tabela de consumidores, status de inadimplência e controles em linha
Cobranças: identificação de inadimplência e ações rápidas anexadas à linha do cliente.
CYTEI: Financeiro com cards de KPI e gráfico comparativo de transações
Financeiro: segmentação de receitas e consolidação analítica para acompanhamento executivo.
Módulo 02 · Negociações

Estruturação visual de contratos e fluxos de matchmaking.

O sistema de Negociações organiza o envio de propostas e aprovações de crédito. A interface transmite o rigor jurídico exigido por investidores, ao mesmo tempo em que facilita o encontro entre usinas e mão de obra.

A área de Negociações acomoda as intenções de três personas no mesmo ecossistema. O Investidor Capital procura agentes financeiros e audita concessões de crédito. Os Usineiros prospectam consumidores e formulam propostas de serviço. Os Especialistas expõem suas agendas para contratação imediata por empresas integradoras.

Desenhei a tela do Investidor Capital com busca granular por tipo de empréstimo. A lista de "Contratos Firmados" condensa variáveis críticas (número de identificação, entidade, nome da usina, teto de financiamento e carga de juros) em um layout de varredura horizontal. O investidor localiza as informações que afetam o risco sem abrir telas adicionais.

A escala de trabalho dos especialistas é mapeada por um gráfico de barras com categorização de status: Atuando, Disponível, Reservado ou Inativo. O recrutador da usina avalia em segundos o contingente técnico pronto para iniciar serviços na região desejada.

O fluxo de navegação dos Usineiros otimiza a conversão de contratos. Posicionei os filtros por tipo de empresa e período no topo do painel e utilizei abas para isolar a aba de prospecção da aba de histórico contratual. O usuário gerencia negociações ativas em um espaço desvinculado dos contratos já finalizados.

Adicionei avaliações com classificação por estrelas em cada linha da tabela de candidatos. Esse mecanismo atua como uma validação de pares dentro do ecossistema e assegura maior confiabilidade no ato da contratação B2B. A ferramenta de busca de empresas interessadas possui um CTA primário que acelera o contato entre as partes.

O painel de disponibilidade atua como um termômetro mercadológico em tempo real. Ele extrai informações da agenda técnica dos especialistas e as consolida em dados estratégicos para os gestores que planejam expansões na rede de energia.

CYTEI: Painel de Negociação do Investidor Capital detalhando as condições do contrato de financiamento
CYTEI: Tela do Investidor Capital apresentando taxas, parcelamento e a identificação do agente tomador de crédito.
CYTEI: Painel de Especialistas com filtros de categoria e medidor visual de disponibilidade técnica
Especialistas: alinhamento de perfis técnicos com indicador consolidado de disponibilidade regional.
CYTEI: Usineiros gerenciando contratos firmados e visualizando avaliações de histórico de prestadores
Usineiros: tabela de contratos executados com índice de confiabilidade e revisão de métricas.
Módulo 03 · Qualificações

Onboarding validado para mitigar riscos na plataforma.

A etapa de qualificação comprova a legitimidade de cada agente no ecossistema CYTEI. A jornada de cadastro garante a precisão dos dados inseridos por empresas integradoras e protege os consumidores.

A tela de Dados Gerais organiza a coleta de informações de forma conversacional. Agrupei os campos por afinidade técnica, abrangendo identificação fiscal, localização e escopo de atuação. O mapa interativo posicionado à direita fornece confirmação visual imediata da área coberta pela empresa integradora.

Implementei a seção "Minhas Especialidades" no perfil técnico como uma grade persistente e editável. A ação de "Criar Nova Especialidade" permanece acessível na mesma camada de navegação. O usuário atualiza seu portfólio de serviços sem perder a referência das certificações que já registrou.

O calendário de atuação adota chips selecionáveis com as datas de trabalho. O modelo substitui a complexidade de um componente de calendário expandido por um seletor binário de dias livres, agilizando o preenchimento por parte do especialista.

A interface de edição carrega previamente todo o banco de dados já fornecido pelo usuário. Essa técnica de pré-preenchimento evita a digitação repetitiva de documentos. O botão primário de salvar fica ancorado no cabeçalho durante o scroll completo do formulário.

A qualificação de Consumidores exige confirmação legal das informações prestadas. Projetei uma interface de aceite com checkboxes diretos que garantem validade jurídica. O inventário de "Minhas Unidades Consumidoras" agrupa os imóveis do usuário em lista simplificada, mantendo os descritivos técnicos de instalação sob um botão expansível de detalhes.

A visualização de Empresas Qualificadas encaminha o usuário à conversão final. Consumidores interessados são listados junto a seletores em lote. Com um único comando, a usina dispara os termos de contrato para múltiplos usuários, conectando a qualificação diretamente à esteira de negociações.

CYTEI: Tela de Dados Gerais com agrupamento de formulários de qualificação e visualização cartográfica
CYTEI: Dados Gerais organizando o registro da empresa integradora com validação geográfica de atuação.
CYTEI: Edição de Perfil de Qualificação demonstrando inputs pré-populados e seleção rápida de datas
Editar Qualificação: reaproveitamento de dados históricos e seleção modular de agenda via chips.
CYTEI: Tela listando consumidores validados com ações agrupadas para envio automático de contratos
Empresas Qualificadas: conversão de prospectos via despachos contratuais em lote.
Galeria

Protótipos de alta fidelidade e mapeamento do ecossistema.

Seleção das interfaces documentadas e entregues no Figma em 2020. Todo o trabalho reflete uma execução de UI manual focada nas especificações das personas do projeto.

Resultados

Ecossistema escalável e focado em negócios operacionais.

O design entregue durante os 3 meses de atuação garante a expansão da plataforma mantendo a estabilidade do fluxo inicial. A padronização da UI agiliza a implantação das funcionalidades planejadas para o futuro.

5
Personas em Um Produto

Consumidores, Usinas, Especialistas, Investidores e Integradores operam no sistema com jornadas funcionais exclusivas. A arquitetura de perfis blinda a experiência, expondo ferramentas estritamente alinhadas ao tipo de credencial.

Matchmaking
Negócios Gerados pelo Design

A estruturação de Negociações encurtou o prazo entre a intenção do usuário e a assinatura do contrato. O posicionamento de botões de aprovação e os filtros inteligentes viabilizam a interação executiva sem etapas intermediárias de leitura.

Brasil
Transição para Energia Limpa

A interface absorve a complexidade das regulações do mercado solar e entrega clareza visual aos usuários finais. Consumidores gerenciam economia domiciliar, especialistas assumem novos postos de trabalho e investidores monitoram capital em usinas solares ativas.

Buscando projetar sistemas que traduzam lógicas complexas em interfaces escaláveis?

O desenvolvimento manual e analítico do projeto CYTEI exemplifica minha abordagem para criação de plataformas. Como UX/UI Designer, projeto fluxos B2B/B2C estruturados na arquitetura de informação e orientados aos objetivos de negócio. Vamos conversar sobre o desenvolvimento de interfaces com este nível de entrega para o seu time.

Falar com o Erick (WhatsApp) contato@ericknobre.com Ver todos os cases