Sustainable UX: designing digital products with a lower carbon footprint

The urgent need for sustainable digital design

You're building a product that's supposed to help the world use fewer resources. But if your digital platform is bloated, slow, and energy-inefficient, that credibility gap is real — and it's noticed.

Climate tech founders pour months into making their technology genuinely sustainable. The software running on top of it often doesn't get the same scrutiny. A 4 MB webpage, redundant API calls, uncompressed assets, an energy-intensive server stack — none of this is visible to your users directly, but the cumulative cost adds up, and it contradicts the story your product is supposed to tell.

Data centers consumed approximately 415 TWh of electricity in 2024, representing 1.5% of global electricity demand, with projections approaching 945 TWh by 2030 as AI workloads grow. The ICT sector now accounts for nearly 4% of global carbon emissions. Meanwhile, e-waste from screens and IT equipment grew 30% between 2010 and 2022, reaching 10.5 million tons.

This article breaks down what sustainable UX design actually means in practice: the specific design and engineering choices that reduce your product's environmental footprint without compromising the experience your users need.

TLDR:

• Data centers consume 1.5% of global electricity, projected to reach 3% by 2030
• Design choices like dark mode, lazy loading, and simplified interfaces reduce energy consumption
• Optimization strategies like image compression can cut energy use by up to 90%
• Sustainable design tends to improve performance and reduce hosting costs alongside its environmental benefits
• Design choices at every level, from color palettes to navigation structure, carry cumulative energy costs

What is sustainable UX design?

Sustainable UX is the practice of designing digital products that minimize environmental impact throughout their entire lifecycle, from initial development through daily use to end-of-life.

It extends traditional user-centered design to embrace environment-centered and humanity-centered approaches.

Three pillars of sustainable UX

Ecological sustainability focuses on reducing carbon footprint through efficient code, optimized assets, and green infrastructure choices. Social sustainability emphasizes inclusive, accessible design that serves diverse users and extends product utility. Economic sustainability ensures long-term viability through modular design approaches and backward compatibility.

Understanding which pillar is weakest in your current product is often the starting point for a credible sustainability story — both internally and in conversations with enterprise buyers.

How it differs from traditional UX

Traditional UX focuses primarily on user needs and business goals. Sustainable UX adds environmental responsibility as a core design constraint, asking not just "Does this work for users?" but "What's the environmental cost of this interaction?"

For climate tech companies, this question carries particular weight. The environmental cost of your digital product is part of the product's credibility.

What sustainable UX looks like in practice

Real-world applications include:

• Optimized code that requires less server processing power
• Dark mode options reducing energy consumption on OLED screens
• Streamlined user flows that minimize unnecessary data transfer
• Efficient database queries reducing computational load
• Image compression using WebP or AVIF formats (50%+ file size reduction)

Companies like Google have implemented adaptive video streaming for YouTube, dynamically adjusting quality based on network conditions to achieve 20% energy reduction for streaming on certain devices. These choices are increasingly visible to enterprise buyers: a product that loads efficiently and uses energy-conscious design patterns demonstrates sustainability beyond its core technology claim.

Why sustainable UX matters for digital products

For climate tech companies specifically, there's an added layer of accountability: the alignment between your mission and how your digital product performs. A carbon management platform running an energy-inefficient website creates a visible inconsistency that investors and enterprise buyers notice. Beyond that specific context, the business case rests on three foundations: environmental impact, consumer preference, and performance.

The environmental impact by the numbers

The numbers tell a clear story:

• ICT sector emissions rose from 2.9% in 2013 to 3.5% in 2019
• Production phase alone accounts for 80% of a smartphone's lifecycle emissions
• One hour of video streaming in Europe generates approximately 55 gCO2e
• 164 digital companies reported 581 TWh consumption in 2023, representing 2.1% of global electricity

Consumer demand is shifting

Consumer behavior shows clear momentum toward sustainability. More than one-third of global consumers are willing to pay a premium for environmentally friendly alternatives. Amazon's "Climate Pledge Friendly" badge drove a 15% sales increase for eco-certified goods in 2024, per the same McKinsey report. Consumer trust in brands that demonstrate sustainability practices continues to grow, though a significant gap persists between stated concern and purchasing action.

This gap is where sustainable UX design becomes a practical lever: making the environmentally responsible choice the default, rather than requiring users to seek it out.

The performance correlation

Sustainable design delivers measurable business results beyond environmental benefits.

On the emissions side, image compression and code minification can reduce energy consumption by 89.8% and CO2 emissions by 89.6%. The performance gains follow closely: faster load times from optimized assets correlate directly with reduced hosting costs and improved user satisfaction, and page weight reduction tends to yield meaningful improvements in both hosting costs and conversion rates when implemented systematically.

When you optimize for sustainability, you tend to see parallel gains in performance metrics that matter to your users and your bottom line.

Core principles of sustainable UX design

Efficiency and performance optimization

Efficient code and optimized assets reduce computational load and energy consumption at the source.

If you're building a data-intensive product — a monitoring dashboard, a carbon accounting platform, a grid analytics tool — this matters doubly. Every unoptimized data visualization or redundant API call multiplies across your entire user base.

Specific tactics include:

• Image compression: Provides the strongest single energy benefit, reducing system-level energy use by 47.5%
• Modern formats: WebP and AVIF deliver 50%+ file size savings compared to JPEG or PNG
• Lazy loading: Combined with compression, reduces CPU and GPU energy consumption by 50.6%
• Code minification: Removes unnecessary characters and whitespace
• Efficient database queries: Reduces server processing requirements
• Removing unused code: Eliminates bloat from legacy features

Real-world example: Mightybytes used image optimization for a client and achieved a 12-point sustainability score improvement, reducing CO2 emissions per page load from 1.99g to 1.16g. That kind of documented, measurable improvement is exactly what enterprise sustainability questionnaires and procurement due diligence processes are now asking for.

Dark mode and energy-conscious design

Dark mode's sustainability benefits depend heavily on screen technology and brightness settings.

On OLED/AMOLED screens at 100% brightness, dark mode saves 39-47% battery power. At typical indoor brightness (30-50%), those savings drop to 3-9%, and on LCD screens with constant backlights the benefit is negligible.

Beyond immediate power savings, dark mode delivers secondary benefits: extended battery life reduces charging frequency, less frequent charging extends device lifespan, and the cumulative effect is less e-waste from longer device use.

Both Android 10 and iOS 13 introduced system-wide dark modes specifically to leverage these efficiency gains on OLED devices. Offering dark mode is a small design decision, but in procurement conversations where enterprise buyers are evaluating your sustainability claims, documented interface choices carry more weight than assertions.

Lifecycle thinking and design longevity

When you design for the entire product lifecycle — from creation to end-of-life — you reduce the frequency of device replacement and the volume of e-waste your product contributes to.

Two strategies matter most here. Modular design — demonstrated by Fairphone's repairable smartphones, which let users replace specific components rather than discarding entire devices — allows you to push updates without complete redesigns. Backward compatibility extends device usability across software updates: Microsoft's Windows compatibility strategy has historically extended device lifespans, while ending support for Windows 10 could render 240 to 400 million PCs obsolete.

For enterprise buyers making multi-year procurement decisions, a product built for longevity is a lower-risk choice — one that won't require hardware upgrades or break on legacy systems they're not yet ready to replace.

Accessibility and inclusive design

Accessible design is efficient design. Inclusive practices maximize product utility across diverse users, extending reach and reducing the need for separate solutions.

Performance and accessibility reinforce each other. Semantic HTML improves both accessibility and SEO, cleaner code structure reduces technical debt, and optimized media benefits all users. There's a measurable connection too: simplified, semantic code correlates with fewer accessibility errors and more robust performance overall.

When you design for accessibility from the start, you eliminate the need for separate "lite" versions, saving development resources while ensuring consistent experiences. A carbon reporting platform with semantic, accessible code, for example, typically loads faster and passes the automated accessibility checks that large enterprises now include in their vendor onboarding reviews — meaning you clear a procurement gate without additional rework.

User awareness and behavior nudging

Beyond technical optimization, design shapes user behavior. Thoughtful interfaces can surface environmental impact data and make the sustainable option the path of least resistance.

Transparency drives awareness. Google Flights added carbon emissions estimates in 2021, potentially influencing billions of flight selections. Klarna took a similar approach, partnering with Doconomy to provide carbon footprint tracking across its user base.

Small nudges create lasting change. JouleBug achieved an 8% reduction in household energy use among its 1 million users by making sustainable choices the default rather than something users had to seek out. When you design so the environmentally responsible option is opt-out rather than opt-in, adoption increases without adding friction. Surfacing the benefit directly — "carbon saved by choosing digital receipts," for instance — reinforces the behavior and makes the value visible.

Resource optimization and green infrastructure

Choosing green hosting providers and efficient infrastructure delivers immediate impact.

Leading green hosting providers include:

• GreenGeeks: Purchases wind energy credits to offset energy usage by 300%, verified by EPA Green Power Partner status
• Google Cloud: Matched 100% of energy consumption with renewables for five years, targeting 100% carbon-free energy by 2030
• Adobe: Accelerated renewable electricity goal to 2025, achieving 74.4% renewable consumption in 2024

Complement green hosting with CDNs and caching to reduce redundant data transfer, serverless architectures that scale efficiently, and where possible, advocacy for renewable materials in physical hardware components. Green hosting credentials — particularly verified ones like EPA Green Power Partner status or documented RE100 membership — give you concrete, defensible claims to make in due diligence conversations and sustainability questionnaires.

Implementing sustainable UX: practical strategies

Conduct a digital carbon audit

Start with measurement. A digital carbon audit assesses website and app energy consumption, data transfer volumes, and hosting infrastructure carbon footprint.

Tools for measuring digital carbon:

• Website Carbon Calculator: Estimates webpage carbon footprint based on data transfer, hosting energy intensity, and network transmission
• Ecograder: Evaluates sustainability based on page weight, performance, and hosting, connecting metrics to W3C Web Sustainability Guidelines
• CO2.js: Open-source library offering models to calculate digital emissions, including embodied energy

These tools measure data transfer (KB/MB) as a proxy for energy use, converting it to CO2e using grid intensity factors.

Track these baseline metrics to measure improvement over time. An audit also gives you a defensible starting point if enterprise buyers or investors ask for evidence of your digital sustainability practices — which they increasingly do.

Optimize code and assets

Code optimization directly reduces energy consumption. Minify your CSS and JavaScript to remove unnecessary characters, switch to modern image formats like WebP or AVIF for significant file size reduction, implement progressive enhancement for core functionality, and remove unused features that inflate file sizes. These optimizations also reduce your infrastructure costs and improve the performance scores that enterprise buyers and partners sometimes check during technical due diligence.

Design streamlined user flows

Every step you eliminate reduces data transfer and server requests, which means lower environmental impact and a better user experience simultaneously.

Consider the checkout process as an example of the principle: a five-step flow requiring multiple page loads, form validations, and database queries, redesigned as a three-step flow with inline validation and optimized queries, reduces server requests by 60% while improving conversion rates. The environmental and commercial gains move together.

Choose sustainable technology partners

Select green hosting providers, cloud services with renewable energy commitments, and sustainable SaaS tools.

Look for third-party validation like EPA partnerships, RE100 membership, and documented CDP responses.

Partnering with a design agency like What if Design — which holds Design Declares certification — ensures sustainability values are built into the design process from the start, not retrofitted later.

Educate and involve stakeholders

Get buy-in from leadership, developers, and stakeholders for sustainable design initiatives.

Frame sustainability as a business advantage: reduced hosting and bandwidth costs, faster performance that increases conversions, brand value from environmental leadership, and competitive advantage in sustainability-conscious markets.

Establish sustainability KPIs alongside traditional product metrics to maintain accountability. One climate monitoring company that went through this process found that presenting digital carbon metrics alongside their core product performance data — and showing improvement over time — gave procurement teams at two enterprise buyers a concrete answer to their sustainability vendor questionnaires, helping move both evaluations forward.

Measuring and optimizing digital sustainability

Tracking your digital carbon footprint is a practical requirement, not an aspirational add-on. Without baseline measurements, you can't identify where the inefficiency sits, and you can't demonstrate improvement over time. Metrics give you something concrete to optimize against.

Key metrics for assessing digital sustainability:

• Page weight: Total data transferred per page load (measured in KB/MB), directly correlating to energy consumption
• Energy per session: Electricity used during typical user interactions, from page loads to feature usage
• Carbon per visit: CO2 emissions generated by a single user session, accounting for data transfer and server processing
• Server efficiency: Response times and processing overhead, indicating how hard infrastructure works per request

These metrics reveal inefficiencies that traditional performance monitoring misses. A page might load quickly on fiber connections but generate excessive emissions through bloated assets. Focus on page weight first: it's the most actionable metric, with immediate optimization opportunities.

Benchmarking and target setting

Before optimization, establish baseline measurements. A typical website generates 1.76g CO2 per page view, with page weights averaging 2.1 MB. High-performing sustainable sites stay under 1 MB per page and 0.5g CO2 per visit.

Compare your metrics against industry standards:

• Excellent: under 500 KB page weight, under 0.3g CO2 per visit
• Good: 500 KB to 1 MB, 0.3 to 0.8g CO2 per visit
• Needs improvement: 1 to 3 MB, 0.8 to 2g CO2 per visit
• Critical: over 3 MB, over 2g CO2 per visit

You can achieve a 50% page weight reduction through image optimization and code cleanup alone. Reaching the "excellent" or "good" tier on these benchmarks also gives you a quantified data point to include in RFP responses and sustainability questionnaires — an increasingly standard requirement in enterprise procurement for climate and infrastructure buyers.

Continuous monitoring tools

Once you've established baselines, ongoing tracking prevents sustainability regression.

Tools for ongoing monitoring:

• Ecograder: Provides full sustainability audits with actionable recommendations for reducing carbon footprint
• Beacon: Offers real-time monitoring and alerts when sustainability metrics degrade
• CO2.js: JavaScript library for building custom sustainability dashboards and integrating carbon tracking into analytics

Integrate sustainability monitoring into your existing analytics workflow. Track metrics alongside traditional KPIs like conversion rates and page speed so environmental performance is equally visible to stakeholders. This also means you can demonstrate improving performance over time — a useful asset when buyers or investors return to check whether your sustainability claims hold up in practice.

Optimization in practice

Treat sustainability optimization as an iterative process rather than a one-time audit. After establishing baselines, prioritize high-impact changes:

1. Compress and optimize images (typically 50-70% of page weight)
2. Minify and bundle code to reduce HTTP requests
3. Implement lazy loading for below-the-fold content
4. Remove unused CSS/JavaScript accumulated over time
5. Enable server-side caching to reduce repeated processing

The results can be significant. When Organic Basics redesigned their site with sustainability-first principles, they reduced page weight from 4.8 MB to 980 KB, an 80% drop in carbon emissions per visit. The optimization also improved load times by 60%, demonstrating that environmental and performance goals can be pursued together.

Navigating challenges and trade-offs in sustainable UX

Common challenges

Video and media weight: Video content drives engagement but carries significant energy costs. Offer quality selection controls, implement adaptive streaming, and provide text alternatives where engagement doesn't require video.

Upfront investment: Sustainability work adds initial effort, but the return shows up in hosting costs, load performance, and brand credibility over time. Building that case early helps secure internal buy-in — and when you're in a competitive procurement process where enterprise buyers are asking about your environmental footprint, having the numbers in advance means you're not scrambling.

User resistance to interface changes: Gradual rollouts with clear communication about the environmental rationale work better than wholesale redesigns. Where possible, make the sustainable option the default rather than requiring users to opt in.

Technical constraints: Not all optimization is immediately feasible. Start with high-impact, low-complexity changes like image compression and code minification before tackling infrastructure shifts.

Legacy systems: Older architectures often resist sustainable practices built for modern stacks. Document energy impact as a form of technical debt and build the case for incremental modernization.

Navigating trade-offs

Sustainability sometimes creates tension with other UX goals. When it does, start by addressing high-energy features first based on measurable impact — and prioritize the changes you can document, since measurable progress is more useful in buyer conversations than a comprehensive but unproven roadmap. Look for solutions that serve both goals simultaneously — lazy-loading images, for instance, boost page speed while reducing energy use. Communicate environmental benefits transparently where users are likely to notice them, and track progress through specific metrics like page weight reduction and server efficiency rather than against an abstract standard of perfection.

The future of sustainable UX and design

Emerging trends

Three forces are reshaping how digital products are built and evaluated. Adaptive AI processing and smaller models (like DistilBERT) reduce energy use by 40-80% while maintaining performance, creating new options for resource-efficient AI features. The EU's Ecodesign for Sustainable Products Regulation (ESPR) and Corporate Sustainability Reporting Directive (CSRD) are increasing pressure on you to demonstrate transparency and efficiency in your digital operations. And consumer willingness to pay more for sustainability continues to grow, per the McKinsey Technology Trends Outlook, expanding the market for products that can demonstrate genuine environmental performance.

What this means for climate tech teams

Design decisions accumulate. The choice of image format, the number of API calls per session, the hosting provider, the weight of your dashboard's real-time data layer: each is a specific engineering and design trade-off with measurable environmental and performance consequences.

The alignment between your technology's mission and how your digital product is built carries strategic weight. A bloated, inefficient web presence creates a credibility gap that sophisticated investors and enterprise buyers notice, particularly when the product itself is positioned around environmental performance.

If your product's digital footprint hasn't been audited, that's the logical starting point. In our work with climate and deep-tech companies, this gap between technical ambition and digital execution shows up consistently — a product built around environmental performance, running on infrastructure that hasn't been scrutinized in years. At What if Design, we help close that gap, from UX research and product design through to website architecture optimized for performance and sustainability.

Frequently asked questions

What is sustainable design in UX?

Sustainable UX design minimizes environmental impact throughout a digital product's lifecycle while maintaining a strong user experience. It adds environmental responsibility as a core design constraint alongside usability and business goals.

What are the main principles of sustainable UX design?

Core principles include performance optimization, energy-conscious design patterns, lifecycle thinking, inclusive accessibility, user behavior nudging toward sustainable choices, and resource-efficient infrastructure.

How does dark mode contribute to sustainable UX?

Dark mode saves 39-47% battery power on OLED/AMOLED screens at full brightness by turning off pixels to display black. Savings drop to 3-9% at typical indoor brightness, with negligible benefits on LCD screens.

How can digital products reduce their carbon footprint?

Key strategies include optimizing code and compressing images, using green hosting providers, streamlining user flows to reduce data transfer, implementing efficient caching, and adopting patterns like lazy loading and modern image formats.

What is the difference between sustainable UX and traditional UX?

Traditional UX focuses on user needs and business goals. Sustainable UX adds environmental responsibility as a core design constraint, considering ecological and social impact alongside user experience and business objectives.

What tools can measure a website's environmental impact?

Website Carbon Calculator and Ecograder assess carbon footprint based on data transfer, page weight, and hosting. CO2.js provides an open-source library for calculating emissions, while Beacon offers continuous monitoring.