UX / UI Design

Shell Box Carbon-Neutral Ethanol

Educating 95% uninformed users on carbon neutrality to drive sustainable fuel adoption in Brazil's competitive energy market.

Year:

2022

Industry:

Energy

Client:

Shell

Project duration:

8 months

Mockup of two Shell mobile app screens. The first screen shows the home dashboard with a greeting, in-app payment button, loyalty points, and promotional content. The second screen presents the carbon footprint feature, displaying the annual CO₂ emissions estimate from fuel usage and a button to learn more about environmental impact.
Mockup of two Shell mobile app screens. The first screen shows the home dashboard with a greeting, in-app payment button, loyalty points, and promotional content. The second screen presents the carbon footprint feature, displaying the annual CO₂ emissions estimate from fuel usage and a button to learn more about environmental impact.
Mockup of two Shell mobile app screens. The first screen shows the home dashboard with a greeting, in-app payment button, loyalty points, and promotional content. The second screen presents the carbon footprint feature, displaying the annual CO₂ emissions estimate from fuel usage and a button to learn more about environmental impact.

Overview

Created an in-app education platform addressing 95% user unfamiliarity with carbon credits. Solution integrated carbon footprint offsetting into Shell Box Brazil's fuel purchase flow with transparent pricing, positioning Shell as first mover in Brazil's sustainable fuel market.

Two workshop boards with colored sticky notes organized in columns. First board divides insights into Certainties (yellow and pink), Doubts (blue), and Assumptions (pink). Second board uses a matrix with four quadrants: Is, Is Not, Does, Does Not, filled with green, pink, blue, and yellow sticky notes.
Two workshop boards with colored sticky notes organized in columns. First board divides insights into Certainties (yellow and pink), Doubts (blue), and Assumptions (pink). Second board uses a matrix with four quadrants: Is, Is Not, Does, Does Not, filled with green, pink, blue, and yellow sticky notes.
Two workshop boards with colored sticky notes organized in columns. First board divides insights into Certainties (yellow and pink), Doubts (blue), and Assumptions (pink). Second board uses a matrix with four quadrants: Is, Is Not, Does, Does Not, filled with green, pink, blue, and yellow sticky notes.

Context

Key challenges identified

95% user unfamiliarity with carbon neutrality concepts required fundamental education layer.

Premium pricing (+cost over standard ethanol) demanded transparent value communication to prevent purchase abandonment.

Integration into existing fuel purchase flow without friction or increased cognitive load.

Product strategy canvas divided into four phases with personas at the top. Phase 0 Education, Phase 1 Awareness, Phase 2 Engagement, Phase 3 Amplification. Bottom section shows influencer strategies and partnerships with colored cards organized in two numbered rows, including mobile interface screenshots.
Product strategy canvas divided into four phases with personas at the top. Phase 0 Education, Phase 1 Awareness, Phase 2 Engagement, Phase 3 Amplification. Bottom section shows influencer strategies and partnerships with colored cards organized in two numbered rows, including mobile interface screenshots.
Product strategy canvas divided into four phases with personas at the top. Phase 0 Education, Phase 1 Awareness, Phase 2 Engagement, Phase 3 Amplification. Bottom section shows influencer strategies and partnerships with colored cards organized in two numbered rows, including mobile interface screenshots.

The solution

Core features

1. Onboarding Education

  • 3-screen module with visual CO₂ comparisons + contextual FAQ at purchase decision point

2. Inline Cost Transparency

  • Carbon offset pricing and impact preview displayed during fuel selection, not at checkout

3. Gamification Layer

  • Achievement system rewarding repeated sustainable choices

  • Social proof amplification through shareable impact stats

MVP (Minimum Viable Product)

  • Dedicated educational area on carbon neutrality

  • Integration of the Carbon Neutral Ethanol option within the app's fueling flow

Onboarding sequence with four mobile-format cards. Each card features nature-related background images (sky, mountain, ocean, forest) with dark gradient, motivational texts about environmental impact, and skip button. Last card has green action button "Let's go".
Onboarding sequence with four mobile-format cards. Each card features nature-related background images (sky, mountain, ocean, forest) with dark gradient, motivational texts about environmental impact, and skip button. Last card has green action button "Let's go".
Onboarding sequence with four mobile-format cards. Each card features nature-related background images (sky, mountain, ocean, forest) with dark gradient, motivational texts about environmental impact, and skip button. Last card has green action button "Let's go".
Four-screen app flow showing the carbon footprint calculation process. First screen displays loading with green icon. Second and third screens present the result of 456 kilograms of CO₂ with visual comparisons. Fourth screen details the Neutral Carbon Ethanol program with leaf image and explanation of how it works.
Four-screen app flow showing the carbon footprint calculation process. First screen displays loading with green icon. Second and third screens present the result of 456 kilograms of CO₂ with visual comparisons. Fourth screen details the Neutral Carbon Ethanol program with leaf image and explanation of how it works.
Four-screen app flow showing the carbon footprint calculation process. First screen displays loading with green icon. Second and third screens present the result of 456 kilograms of CO₂ with visual comparisons. Fourth screen details the Neutral Carbon Ethanol program with leaf image and explanation of how it works.

Key Learnings

Principal insight

Users required carbon neutrality education BEFORE purchase decision, not after. Initial placement of education post-checkout resulted in low engagement; moving to pre-purchase onboarding increased completion.

Set of four screens showing detailed carbon footprint analysis. First screen with comparative bar graphs. Second with donut chart showing distribution among regular gasoline, premium, and ethanol. Third displays green highlight with "80% less CO₂ than gasoline" and Ethanol logo. Fourth presents information about the Envira Amazônia project with community photo.
Set of four screens showing detailed carbon footprint analysis. First screen with comparative bar graphs. Second with donut chart showing distribution among regular gasoline, premium, and ethanol. Third displays green highlight with "80% less CO₂ than gasoline" and Ethanol logo. Fourth presents information about the Envira Amazônia project with community photo.
Set of four screens showing detailed carbon footprint analysis. First screen with comparative bar graphs. Second with donut chart showing distribution among regular gasoline, premium, and ethanol. Third displays green highlight with "80% less CO₂ than gasoline" and Ethanol logo. Fourth presents information about the Envira Amazônia project with community photo.
Gamification interface with four screens. First and second show progress at Level 1 with plant icon, 500 experience points, and "First step" challenge 100% completed. Third and fourth screens display challenge to fuel five times with ethanol, showing 0% progress and 5 remaining refuelings, plus "Learn more" section with informative cards.
Gamification interface with four screens. First and second show progress at Level 1 with plant icon, 500 experience points, and "First step" challenge 100% completed. Third and fourth screens display challenge to fuel five times with ethanol, showing 0% progress and 5 remaining refuelings, plus "Learn more" section with informative cards.
Gamification interface with four screens. First and second show progress at Level 1 with plant icon, 500 experience points, and "First step" challenge 100% completed. Third and fourth screens display challenge to fuel five times with ethanol, showing 0% progress and 5 remaining refuelings, plus "Learn more" section with informative cards.

Expected Outcomes

1. Business Hypothesis: Premium ethanol (lower production cost + environmental premium pricing) would increase Shell margin while capturing sustainability-conscious segment.

2. Validation Target: User willingness to pay +10% for carbon-neutral option.

3. Market Positioning: First-mover advantage in Brazil's emerging sustainable fuel category.

Note: Project completed design phase; implementation pending. Outcomes reflect strategic targets, not measured results.

More Projects

Rede D'Or hospital production reports interface with side menu, category filters and items table, highlighting reduction from 120 monthly hours to 15 minutes through automation

Product Design

Rede D'Or - Meal Production Intelligence

Rede D'Or hospital production reports interface with side menu, category filters and items table, highlighting reduction from 120 monthly hours to 15 minutes through automation

Product Design

Rede D'Or - Meal Production Intelligence

Rede D'Or hospital production reports interface with side menu, category filters and items table, highlighting reduction from 120 monthly hours to 15 minutes through automation

Product Design

Rede D'Or - Meal Production Intelligence

Two smartphone mockups displaying the Shell Box app interface. Left screen shows personalized greeting, yellow payment button, and promotional banner. Right screen displays carbon footprint of 456 kilograms of CO₂ annually with visual equivalents and button to understand the calculation.

Product Design

Claro pay start

Two smartphone mockups displaying the Shell Box app interface. Left screen shows personalized greeting, yellow payment button, and promotional banner. Right screen displays carbon footprint of 456 kilograms of CO₂ annually with visual equivalents and button to understand the calculation.

Product Design

Claro pay start

Two smartphone mockups displaying the Shell Box app interface. Left screen shows personalized greeting, yellow payment button, and promotional banner. Right screen displays carbon footprint of 456 kilograms of CO₂ annually with visual equivalents and button to understand the calculation.

Product Design

Claro pay start

Arche mobile app screens: introductory onboarding, main menu with professional search and scheduling options, and detailed psychoanalyst profile

Case study

Arche

Arche mobile app screens: introductory onboarding, main menu with professional search and scheduling options, and detailed psychoanalyst profile

Case study

Arche

Arche mobile app screens: introductory onboarding, main menu with professional search and scheduling options, and detailed psychoanalyst profile

Case study

Arche