UX / UI Design

Shell Box Etanol Carbono Neutro

Educando 95% de usuários sobre neutralidade de carbono para impulsionar adoção de combustível sustentável no competitivo mercado energético brasileiro.

Ano:

2022

Área:

Energia

Cliente:

Shell

Duração do projeto:

8 meses

Mockup de duas telas do aplicativo móvel Shell. A primeira tela mostra o painel inicial com uma saudação, botão de pagamento no app, pontos de fidelidade e conteúdo promocional. A segunda tela apresenta o recurso de pegada de carbono, exibindo a estimativa anual de emissões de CO₂ pelo uso de combustível e um botão para saber mais sobre o impacto ambiental.
Mockup de duas telas do aplicativo móvel Shell. A primeira tela mostra o painel inicial com uma saudação, botão de pagamento no app, pontos de fidelidade e conteúdo promocional. A segunda tela apresenta o recurso de pegada de carbono, exibindo a estimativa anual de emissões de CO₂ pelo uso de combustível e um botão para saber mais sobre o impacto ambiental.
Mockup de duas telas do aplicativo móvel Shell. A primeira tela mostra o painel inicial com uma saudação, botão de pagamento no app, pontos de fidelidade e conteúdo promocional. A segunda tela apresenta o recurso de pegada de carbono, exibindo a estimativa anual de emissões de CO₂ pelo uso de combustível e um botão para saber mais sobre o impacto ambiental.

Visão Geral

Criei uma plataforma educacional no aplicativo abordando 95% de desconhecimento dos usuários sobre créditos de carbono. A solução integrou compensação de pegada de carbono ao fluxo de compra de combustível da Shell Box Brasil com precificação transparente, posicionando a Shell como pioneira no mercado brasileiro de combustível sustentável.

Duas quadros de oficina com notas adesivas coloridas organizadas em colunas. O primeiro quadro divide os insights em Certezas (amarelas e rosas), Dúvidas (azuis) e Suposições (rosas). O segundo quadro utiliza uma matriz com quatro quadrantes: É, Não É, Faz, Não Faz, preenchidos com notas adesivas verdes, rosas, azuis e amarelas.
Duas quadros de oficina com notas adesivas coloridas organizadas em colunas. O primeiro quadro divide os insights em Certezas (amarelas e rosas), Dúvidas (azuis) e Suposições (rosas). O segundo quadro utiliza uma matriz com quatro quadrantes: É, Não É, Faz, Não Faz, preenchidos com notas adesivas verdes, rosas, azuis e amarelas.
Duas quadros de oficina com notas adesivas coloridas organizadas em colunas. O primeiro quadro divide os insights em Certezas (amarelas e rosas), Dúvidas (azuis) e Suposições (rosas). O segundo quadro utiliza uma matriz com quatro quadrantes: É, Não É, Faz, Não Faz, preenchidos com notas adesivas verdes, rosas, azuis e amarelas.

Contexto

Principais desafios identificados

95% de desconhecimento dos usuários sobre conceitos de neutralidade de carbono exigia camada educacional fundamental.

Precificação premium (custo adicional sobre etanol comum) demandava comunicação transparente de valor para evitar abandono de compra.

Integração ao fluxo existente de compra de combustível sem fricção ou aumento de carga cognitiva.



Canvas de estratégia de produto dividido em quatro fases com personas no topo. Fase 0 Educação, Fase 1 Conscientização, Fase 2 Engajamento, Fase 3 Amplificação. A seção inferior mostra estratégias de influenciadores e parcerias com cartões coloridos organizados em duas linhas numeradas, incluindo capturas de tela de interfaces móveis.
Canvas de estratégia de produto dividido em quatro fases com personas no topo. Fase 0 Educação, Fase 1 Conscientização, Fase 2 Engajamento, Fase 3 Amplificação. A seção inferior mostra estratégias de influenciadores e parcerias com cartões coloridos organizados em duas linhas numeradas, incluindo capturas de tela de interfaces móveis.
Canvas de estratégia de produto dividido em quatro fases com personas no topo. Fase 0 Educação, Fase 1 Conscientização, Fase 2 Engajamento, Fase 3 Amplificação. A seção inferior mostra estratégias de influenciadores e parcerias com cartões coloridos organizados em duas linhas numeradas, incluindo capturas de tela de interfaces móveis.

A solução

Funcionalidades principais

1. Onboarding educacional

  • Módulo de 3 telas com comparações visuais de CO₂ + FAQ contextual no ponto de decisão de compra

2. Transparência de Custo Inline

  • Precificação de compensação de carbono e preview de impacto exibidos durante seleção de combustível, não no checkout

3. Camada de Gamificação

  • Desafios e conquistas vinculados a consumo sustentável.

  • Funcionalidades de compartilhamento social para amplificar contribuições ambientais dos usuários.

MVP (Produto Mínimo Viável)

  • Área educacional dedicada sobre neutralidade de carbono

  • Integração da opção Etanol Carbono Neutro dentro do fluxo de abastecimento do app

Sequência de integração com quatro cartões em formato móvel. Cada cartão apresenta imagens de fundo relacionadas à natureza (céu, montanha, oceano, floresta) com gradiente escuro, textos motivacionais sobre impacto ambiental e botão de pular. O último cartão tem um botão de ação verde "Vamos lá".
Sequência de integração com quatro cartões em formato móvel. Cada cartão apresenta imagens de fundo relacionadas à natureza (céu, montanha, oceano, floresta) com gradiente escuro, textos motivacionais sobre impacto ambiental e botão de pular. O último cartão tem um botão de ação verde "Vamos lá".
Sequência de integração com quatro cartões em formato móvel. Cada cartão apresenta imagens de fundo relacionadas à natureza (céu, montanha, oceano, floresta) com gradiente escuro, textos motivacionais sobre impacto ambiental e botão de pular. O último cartão tem um botão de ação verde "Vamos lá".
Fluxo de aplicativo em quatro telas mostrando o processo de cálculo da pegada de carbono. A primeira tela exibe carregamento com ícone verde. A segunda e a terceira telas apresentam o resultado de 456 quilogramas de CO₂ com comparações visuais. A quarta tela detalha o programa Etanol Carbono Neutro, com imagem de folha e explicação de como funciona.
Fluxo de aplicativo em quatro telas mostrando o processo de cálculo da pegada de carbono. A primeira tela exibe carregamento com ícone verde. A segunda e a terceira telas apresentam o resultado de 456 quilogramas de CO₂ com comparações visuais. A quarta tela detalha o programa Etanol Carbono Neutro, com imagem de folha e explicação de como funciona.
Fluxo de aplicativo em quatro telas mostrando o processo de cálculo da pegada de carbono. A primeira tela exibe carregamento com ícone verde. A segunda e a terceira telas apresentam o resultado de 456 quilogramas de CO₂ com comparações visuais. A quarta tela detalha o programa Etanol Carbono Neutro, com imagem de folha e explicação de como funciona.

Aprendizados principais

Insight principal

Usuários precisavam de educação sobre neutralidade de carbono ANTES da decisão de compra, não depois. Posicionamento inicial da educação após checkout resultou em baixo engajamento. Migrar para onboarding pré-compra aumentou conclusão.

Conjunto de quatro telas mostrando análise detalhada da pegada de carbono. Primeira tela com gráficos de barras comparativos. Segunda com gráfico de rosca mostrando a distribuição entre gasolina comum, premium e etanol. Terceira exibe destaque em verde com "80% menos CO₂ do que a gasolina" e o logotipo do etanol. Quarta apresenta informações sobre o projeto Envira Amazônia com foto da comunidade.
Conjunto de quatro telas mostrando análise detalhada da pegada de carbono. Primeira tela com gráficos de barras comparativos. Segunda com gráfico de rosca mostrando a distribuição entre gasolina comum, premium e etanol. Terceira exibe destaque em verde com "80% menos CO₂ do que a gasolina" e o logotipo do etanol. Quarta apresenta informações sobre o projeto Envira Amazônia com foto da comunidade.
Conjunto de quatro telas mostrando análise detalhada da pegada de carbono. Primeira tela com gráficos de barras comparativos. Segunda com gráfico de rosca mostrando a distribuição entre gasolina comum, premium e etanol. Terceira exibe destaque em verde com "80% menos CO₂ do que a gasolina" e o logotipo do etanol. Quarta apresenta informações sobre o projeto Envira Amazônia com foto da comunidade.
Interface de gamificação com quatro telas. A primeira e a segunda mostram o progresso no Nível 1 com ícone de planta, 500 pontos de experiência e o desafio "Primeiro passo" 100% concluído. A terceira e a quarta telas exibem o desafio de abastecer cinco vezes com etanol, mostrando 0% de progresso e 5 abastecimentos restantes, além da seção "Saiba mais" com cartões informativos.
Interface de gamificação com quatro telas. A primeira e a segunda mostram o progresso no Nível 1 com ícone de planta, 500 pontos de experiência e o desafio "Primeiro passo" 100% concluído. A terceira e a quarta telas exibem o desafio de abastecer cinco vezes com etanol, mostrando 0% de progresso e 5 abastecimentos restantes, além da seção "Saiba mais" com cartões informativos.
Interface de gamificação com quatro telas. A primeira e a segunda mostram o progresso no Nível 1 com ícone de planta, 500 pontos de experiência e o desafio "Primeiro passo" 100% concluído. A terceira e a quarta telas exibem o desafio de abastecer cinco vezes com etanol, mostrando 0% de progresso e 5 abastecimentos restantes, além da seção "Saiba mais" com cartões informativos.

Resultados esperados

  1. Hipótese de Negócio: Etanol premium (menor custo de produção + precificação premium ambiental) aumentaria margem da Shell enquanto captura segmento consciente sobre sustentabilidade.

  2. Meta de Validação: Disposição dos usuários para pagar +10% pela opção carbono neutro.

  3. Posicionamento de Mercado: Vantagem de pioneirismo na categoria emergente brasileira de combustível sustentável."

Nota: Projeto concluiu fase de design. Implementação pendente. Resultados refletem metas estratégicas, não resultados medidos.

Mais projetos

Interface de relatórios de produção do hospital Rede D'Or com menu lateral, filtros de categoria e tabela de itens, destacando a redução de 120 horas mensais para 15 minutos através da automação.

Product Design

Rede D'Or - Sistema de Produção

Interface de relatórios de produção do hospital Rede D'Or com menu lateral, filtros de categoria e tabela de itens, destacando a redução de 120 horas mensais para 15 minutos através da automação.

Product Design

Rede D'Or - Sistema de Produção

Interface de relatórios de produção do hospital Rede D'Or com menu lateral, filtros de categoria e tabela de itens, destacando a redução de 120 horas mensais para 15 minutos através da automação.

Product Design

Rede D'Or - Sistema de Produção

Dois mockups de smartphone exibindo a interface do aplicativo Shell Box. A tela à esquerda mostra uma saudação personalizada, botão de pagamento amarelo e banner promocional. A tela à direita exibe a pegada de carbono de 456 quilos de CO₂ anualmente com equivalentes visuais e botão para entender o cálculo.

Product Design

Claro pay start

Dois mockups de smartphone exibindo a interface do aplicativo Shell Box. A tela à esquerda mostra uma saudação personalizada, botão de pagamento amarelo e banner promocional. A tela à direita exibe a pegada de carbono de 456 quilos de CO₂ anualmente com equivalentes visuais e botão para entender o cálculo.

Product Design

Claro pay start

Dois mockups de smartphone exibindo a interface do aplicativo Shell Box. A tela à esquerda mostra uma saudação personalizada, botão de pagamento amarelo e banner promocional. A tela à direita exibe a pegada de carbono de 456 quilos de CO₂ anualmente com equivalentes visuais e botão para entender o cálculo.

Product Design

Claro pay start

Telas do aplicativo móvel Arche: introdução ao onboarding, menu principal com opções de busca profissional e agendamento, e perfil detalhado do psicanalista

Estudo de caso

Arche

Telas do aplicativo móvel Arche: introdução ao onboarding, menu principal com opções de busca profissional e agendamento, e perfil detalhado do psicanalista

Estudo de caso

Arche

Telas do aplicativo móvel Arche: introdução ao onboarding, menu principal com opções de busca profissional e agendamento, e perfil detalhado do psicanalista

Estudo de caso

Arche