Entrevistas e alinhamento
As entrevistas com clientes e o alinhamento de expectativas fizeram parte da construção do contexto: o que a Serena queria comunicar e que experiência pretendia oferecer dentro do site.
UX/UI · EXPERIÊNCIA DIGITAL · FRONT-END
SERENA
ENERGY.
Do conceito Mundo Serena
ao site completo.
Uma home audiovisual para explorar o universo da marca e um conjunto de páginas para conhecer soluções, avaliar a empresa e iniciar uma conversa. Atuação quase end-to-end: pesquisa, conceito, prototipação e front-end.
CONHEÇA AS DECISÕES ↓CONHEÇA A MARCA
CONHECER A SERENA ↗Quem é a Serena.
A Serena atua no setor de energia, com geração renovável e soluções de energia e infraestrutura para empresas. O vídeo de apresentação da marca ajuda a conhecer seu universo e a visão de futuro que orienta sua comunicação, o ponto de partida para entender o projeto apresentado neste case.
A partir desse universo de marca, o projeto levou a proposta da Serena para uma experiência digital. A seguir, apresento o desafio, meu papel e as decisões que deram forma ao Mundo Serena.
01 / CONTEXTO E AUTORIAO cliente queria uma experiência.
O cliente queria uma experiência.
A proposta foi criar um mundo para explorar.
A Serena queria que a visita ao site apresentasse o universo da empresa por meio de uma experiência. O desafio foi conectar energia, infraestrutura e tecnologia em uma jornada compreensível.
Definimos o Mundo Serena: um ambiente visual no qual os diferentes temas da marca se tornam cenários conectados. A home conduz essa descoberta; as páginas internas aprofundam as informações e oferecem caminhos para cada público.
Minha atuação foi quase end-to-end. Participei desde as entrevistas com clientes e o alinhamento de expectativas até a definição de conceito, versões do site, testes A/B, prototipação no Figma, prototipação com IA e desenvolvimento front-end da home e das telas internas.
- PROJETO
- Serena Energy
Site institucional e experiência audiovisual - MEU PAPEL
- UX/UI, conceito, prototipação,
produção visual e front-end - PROCESSO
- Entrevistas, alinhamentos,
versões e testes A/B - FERRAMENTAS
- Figma, IA e Magnific
React, Next.js e TypeScript
MINHA CONTRIBUIÇÃO
Conectei o briefing à experiência: organizei a jornada, defini a disposição das seções, desenvolvi cenários e protótipos e levei as decisões de UX/UI para o front-end da home e das páginas internas.
02 / PESQUISA, VERSÕES E PROTOTIPAÇÃODa expectativa do cliente
Da expectativa do cliente
ao comportamento da interface.
Conceito e arquitetura
Transformamos a intenção de criar uma experiência no conceito Mundo Serena. A definição das seções veio junto da função de cada cenário, da mensagem e do próximo passo da navegação.
Figma e prototipação com IA
Usei o Figma para prototipar a composição das interfaces e a IA para explorar e materializar versões. Os protótipos conectaram conteúdo, linguagem visual e comportamento antes dos refinamentos de implementação.
Versões e testes A/B
Trabalhei com versões do site, entrevistas e testes A/B ao longo do projeto. Esse processo fez parte da avaliação e evolução das propostas. O case apresenta a solução e o processo; não há percentuais de ganho consolidados para atribuir aos testes.
Cenários e jornada em vídeo
Construímos os cenários com o Magnific e criamos o vídeo da jornada. A produção audiovisual acompanhou a disposição das seções, reservando espaço para títulos, informações e ações.
Front-end da experiência
Desenvolvi o front-end da home e das telas internas, conectando os protótipos à navegação, às transições e aos componentes utilizados nas diferentes áreas do site.
03 / CONCEITO, CENÁRIOS E INTERAÇÃOMundo Serena:
Mundo Serena:
conteúdo e vídeo na mesma jornada.
O conceito do Mundo Serena transforma cada seção da home em um cenário de uma mesma jornada. O scroll conduz a pessoa por esse mundo, conectando os temas da marca.
Para construir essa experiência, a produção audiovisual foi organizada em três tipos de vídeo: um loop para cada seção, uma jornada entre um cenário e outro e uma versão reversa dessa jornada para o retorno do scroll. Os trechos foram pensados em conjunto para conectar a chegada, a permanência e a saída de cada cenário.
O loop mantém o ambiente em movimento enquanto a pessoa lê. Ao avançar, o vídeo de jornada faz o deslocamento até a próxima seção; ao voltar, a transição reversa percorre o caminho de retorno. Essa lógica dá continuidade à exploração do Mundo Serena nos dois sentidos.
A composição dos vídeos também considera o espaço dos textos e o contraste sobre cada cena. O deslocamento acontece entre as seções; na chegada, o loop sustenta o cenário e a mensagem entra para leitura.
01 / MARCA02 / IA03 / PRÉDIOS04 / PEQUENAS EMPRESAS05 / TRAJETÓRIA06 / CASES07 / POWERING AI08 / CONTATO
Um loop para cada seção
Cada cenário recebeu um vídeo em loop, pensado para se repetir durante a leitura. A cena mantém a atmosfera daquele tema enquanto a pessoa explora o conteúdo no próprio ritmo.
A jornada entre cenários
Ao avançar no scroll, um vídeo de jornada conecta a seção atual à próxima. Esse trecho mostra o deslocamento pelo Mundo Serena e conduz ao loop do cenário de destino.
A jornada em reverse
Também foi criada uma versão reversa do vídeo de jornada. Quando o scroll volta, ela faz o percurso de retorno até a seção anterior, onde o loop daquele cenário é retomado.
O SITE EM MOVIMENTOExplore a navegação
Explore a navegação
e as transições do site.
O scroll troca capítulos, os vídeos conectam os temas e a interface aparece sobre cada cena. Ative a experiência para explorar com o mouse, toque ou teclado.
A leitura do case continua fora da área interativa. Você pode sair pelo botão acima ou pela tecla Esc.
04 / ARQUITETURA DA INFORMAÇÃODa descoberta da marca
Da descoberta da marca
à informação que cada público procura.
A home apresenta o universo da Serena. As páginas internas organizam o aprofundamento por intenção: conhecer a oferta, avaliar a empresa, participar da comunidade ou entrar em contato.
O menu global agrupa Soluções, Energia Digital, Sobre Nós e Comunidade. O rodapé amplia essa arquitetura com relações com investidores, documentos e canais de atendimento. A repetição desses caminhos ajuda a manter a localização no site.
As internas adotam uma leitura predominantemente vertical, com seções, cards, carrosséis e FAQs. Isso permite que a experiência audiovisual da home conviva com páginas voltadas à consulta e à tomada de decisão.
SITEMAP / HIERARQUIA DE NAVEGAÇÃO
Página inicial · Áreas · PáginasUm site, diferentes intenções.
Home / Mundo SerenaDescoberta da marca e acesso às áreas do site
MENU PRINCIPAL
- 01
Soluções
Explorar a oferta
- 02
Energia Digital
Entender e contratar
- 03
Sobre Nós
Conhecer a empresa
- 04
Comunidade
Encontrar sua entrada
- 05Destino externo / blog.srna.co
Blog & News
Acompanhar conteúdos
- 06
Contato
Falar com a Serena
NAVEGAÇÃO DE APOIO
O rodapé retoma as áreas principais e amplia o acesso a informações corporativas, documentos e canais.
Relações com Investidores
Privacidade e termos
Agrupar por intenção
Oferta, apresentação institucional e comunidade têm entradas próprias. O agrupamento permite procurar uma solução, conhecer a empresa ou identificar uma relação com a Serena.
Indicar o que vem a seguir
Rótulos como “O que é”, “Comprar energia” e “Parceiros” antecipam o conteúdo de destino. A hierarquia diferencia a área de navegação das páginas que ela reúne.
Oferecer caminhos de acesso
O cabeçalho apresenta os acessos principais; o rodapé retoma esses caminhos e acrescenta RI e documentos. O blog e a plataforma são identificados como destinos externos neste mapa.
05 / DECISÕES NAS PÁGINAS INTERNASO mesmo sistema visual.
O mesmo sistema visual.
Jornadas com funções diferentes.
SOLUÇÕES / ORGANIZAÇÃO POR SEGMENTORelacionar a oferta
Relacionar a oferta
ao contexto do negócio.
A página organiza a apresentação em IA, agro, indústria, varejo e edifícios. O título identifica o segmento; a imagem situa o contexto; o texto explica a proposta de energia para aquela operação.
No desktop, os blocos usam comportamento fixo durante a rolagem, mantendo cada assunto em destaque. A alternância entre texto e imagem dá ritmo sem mudar a estrutura de leitura a cada seção.
DECISÃO DE UX/UI
Repetir a composição e variar o contexto facilita reconhecer a estrutura enquanto se explora o catálogo de soluções.
ENERGIA DIGITAL / EXPLICAÇÃO E AÇÃOExplicar o serviço antes
Explicar o serviço antes
de direcionar à contratação.
A página “O que é” apresenta o serviço e organiza o funcionamento em etapas. “Comprar energia” aprofunda a proposta com processo, benefícios, relatos e perguntas frequentes.
A sequência torna explícito o caminho entre enviar informações, receber uma proposta, assinar e acompanhar a economia. Os CTAs retomam a intenção principal ao longo da leitura.
LIMITE DA JORNADA
No site atual, a ação de análise de economia direciona ao ambiente energia.srna.co. A página institucional prepara esse encaminhamento; não conclui a contratação ali.
INSTITUCIONAL / CREDIBILIDADESeparar posicionamento,
Separar posicionamento,
impacto e liderança.
Sobre a Serena combina apresentação, princípios e ativos. Impacto organiza compromissos e iniciativas; Liderança apresenta pessoas e investidores. Cada tema recebe uma página própria e uma hierarquia adequada ao conteúdo.
Cards e indicadores criam pontos de consulta dentro de páginas extensas. Os números apresentados pertencem à comunicação institucional da empresa.
COMUNIDADE / ENTRADAS POR PERFILOferecer caminhos específicos
Oferecer caminhos específicos
para relações diferentes.
Clientes, parceiros, pessoas que indicam, candidatos e desenvolvedores não chegam com a mesma intenção. A arquitetura dá a cada público uma entrada própria, com argumentos e ações correspondentes.
Em Parceiros, a escolha entre representação comercial e parceria corporativa aparece já na abertura. Em Indique e Ganhe, a interface explica etapas e acompanhamento. Em Carreiras e Desenvolvedores, a organização se volta a cultura, desafios e oportunidades.
CONTATO E CONTEÚDO / ENCONTRABILIDADEDar destino à intenção
Dar destino à intenção
de quem chega ao site.
Contato separa atendimento, imprensa, RI e outros canais, em vez de concentrar toda a demanda em uma única ação. Nas áreas de documentos, o agrupamento por tema e os títulos tornam o acervo consultável.
O blog acrescenta uma experiência editorial ao ecossistema: destaques, listas de conteúdo e template de artigo. A galeria abaixo registra essa continuidade visual no site atual.
INVENTÁRIO VISUAL / SITE ATUAL
19 páginas e templates para explorar.
Capturas de 16/10/2026, sem a barra do navegador. Amplie para examinar as páginas. Em Soluções, a captura mostra um estado do percurso com cartões fixos; o conteúdo completo pode ser explorado no site.
19 páginas e templates
institucional
Sobre a Serena
Posicionamento, princípios, indicadores e portfólio de ativos.
06 / DESIGN SYSTEM E IMPLEMENTAÇÃOTokens, componentes e padrões
Tokens, componentes e padrões
para sustentar o site completo.
A consistência precisa sobreviver à mudança de conteúdo: uma cena da home, uma lista de ativos, uma pergunta frequente e um CTA pertencem ao mesmo produto.
O sistema visual usa uma base escura, texto claro e coral para chamadas e destaques. A implementação organiza cores por função, escalas tipográficas e componentes compartilhados. Esses padrões permitem variar a composição sem redefinir a identidade a cada página.
A leitura técnica abaixo se apoia nos arquivos preservados do projeto e nas interfaces atuais: tokens do Tailwind, componentes de UI, navegação, FAQ e estrutura responsiva.
Base da experiência
Separação de níveis
Ações e destaques
Leitura sobre fundo escuro
Hierarquia por função
Inter sustenta a leitura; Montserrat compõe a família de títulos; Space Mono atende rótulos e dados. O projeto também inclui Outfit em composições específicas. Os estilos display usam escalas fluidas com clamp, preservando proporção entre desktop e mobile.
Grade e áreas de leitura
O container de conteúdo tem limite de 1360 px e margens responsivas. Grids, alternância entre imagem e texto e espaçamentos recorrentes definem ritmo e alinhamento entre as páginas.
Contraste e profundidade
Fundos base, surface e elevated estabelecem níveis. Bordas claras com baixa opacidade separam componentes; scrims escuros sustentam a leitura sobre imagens e vídeo.
| Padrão | Aplicação | Decisão técnica |
|---|---|---|
| Botões | Chamada principal, ação secundária e link contextual | Variantes primary, outline e text; acento #FF4D4D e hover #FF6B6B. |
| FAQ | Comprar energia, parceiros e indicações | Conteúdo expansível, estado de pergunta aberta e repetição da estrutura. |
| Cards | Segmentos, ativos, pessoas e etapas | Mesmo agrupamento visual, com conteúdo e ação adequados à tarefa. |
| Carrosséis | Etapas e conteúdos sequenciais | Progressão com indicador de posição e navegação entre itens. |
| Menu e rodapé | Navegação global entre áreas | Agrupamento por intenção, hierarquia de links e adaptação para menu compacto. |
| Vídeo e reveal | Home e entrada dos conteúdos | Estados de cena, transição e leitura coordenados; suporte a movimento reduzido no código atual. |
Next.jsReactTypeScriptTailwind CSSFramer Motion
Os padrões descritos foram verificados na cópia de código preservada e nas telas capturadas. A versão atual do site inclui evoluções do projeto e contribuições de outros profissionais.
07 / RESPONSIVIDADE E ESTADOSAdaptar a experiência
Adaptar a experiência
sem perder a tarefa principal.
A home pede composição audiovisual; as internas precisam preservar leitura, navegação e acesso às ações em telas menores.
Nos layouts estreitos, a relação entre texto e imagem é reorganizada, o menu se torna compacto e os componentes sequenciais usam espaço horizontal controlado. A prioridade é manter o título, o contexto e a ação identificáveis.
No front-end, tratei a relação entre vídeo, conteúdo e interação. O código atual documenta adaptações de reprodução para Safari e preferência por movimento reduzido. O comportamento audiovisual da home pode ser explorado na demonstração preservada acima.
Capturas do site atual em 17/10/2026, com viewport de 390 × 844 px.
08 / RESULTADO E APRENDIZADOSUma experiência de marca
Uma experiência de marca
conectada a um site de consulta e ação.
A entrega conectou conceito, produção audiovisual, design das interfaces e front-end da home e das páginas internas.
O Mundo Serena deu uma lógica comum aos cenários e à progressão da home. Nas internas, arquitetura, componentes e hierarquia organizam o aprofundamento: entender soluções, avaliar a empresa, identificar um caminho de relacionamento e encontrar o contato adequado.
Minha atuação quase end-to-end permitiu acompanhar a decisão desde o alinhamento com o cliente até seu comportamento no navegador. O trabalho reuniu entrevistas, testes A/B, versões, Figma, prototipação por IA e implementação.
O resultado apresentado aqui é a experiência e o sistema de interfaces. O case não atribui ganhos de conversão aos testes sem resultados consolidados; os indicadores exibidos nas telas pertencem à comunicação da Serena.
EXPLORAR O SITE ATUAL ↗Transformar o pedido de uma experiência em conceito, capítulos, cenários e navegação.
Levar a identidade da home para páginas com tarefas e densidades de conteúdo diferentes.
Conectar decisões de composição, movimento e componentes à implementação.
Jorge Yasuo / Product Designer
Todos os projetos ↗