Sustainable UI Design: Implementing eco-friendly principles in your HMI project.

Minute Read Time
Will Breen
Back To All Posts
North Left Arrow Icon

Summary: In today's digital age, the environmental impact of technology has become a topic of increasing concern. Sustainable UI design stands at the forefront of innovative solutions, bridging the gap between environmental responsibility and digital development. In today's article, I dive deep into the realm of green practices within Human-Machine Interface (HMI) projects, offering practical strategies that designers, developers, and project founders can apply to reduce their digital carbon footprint today. Discover how your next HMI project can be a step towards a greener future.

Embracing Sustainability in UI Design

Did you know that sustainable UI design is a thing? Not only just a "thing" but a very big deal in today's ever-evolving technological and environmental landscape. With a topic like climate change at the top of many people's minds these days, it's challenging to believe that even the choice of brightness settings on my phone could impact the environment and carbon footprint. So I was even more interested when I discovered that the choice of interface and HMI design practices also hold a weight on a company's footprint. Let's discuss why sustainability matters in digital HMI design. Plus, what could a startup do today to improve its sustainability profile?

Before discussing some more detailed elements, let's start with the basics. What is Sustainable HMI Design? Sustainable HMI design is a holistic approach that prioritizes user-friendly interfaces that minimize environmental impact through efficient data usage, user behavior encouragement, and effective UI elements. This approach is one that Arrow North and I hold close to our internal conversations with the clients that we support within the renewable industry. Without writing paragraphs about the practice itself, some of the fundamentals of sustainable HMI design could include elements like reducing visual complexity and data consumption, optimizing user interaction, and considering the lifespan of the product along with its elements. Let's get into the details of each of these essential elements.

Simplifying visuals and optimizing data for efficiency: Embracing the Power of Simplicity

I was inspired to delve into the topic of sustainability in UI design after receiving an email from Chipotle that appeared to lack content due to an intriguing use of light and dark color modes on a smartphone. This tactic aimed to draw attention to the benefits of dark mode, shedding light on how UI design can influence sustainability. The email I received demonstrated how switching from white "light" mode to black "dark" mode altered the displayed content, emphasizing the potential energy-saving advantages of dark mode. According to the email, dark mode could reduce a device's battery consumption by up to 47% when the screen is at full brightness. The email further suggested that if all Chipotle rewards members switched to dark mode, the energy saved could power nearly 5,000 homes in the United States for a month.

Screenshot from Chipotle email Monday, Jan 29th
Screenshot from Chipotle email Monday, Jan 29th

While I'm here to challenge or question Chipotle's assertions, I do acknowledge that design can influence a person's perception and the company's footprint. Take the example of "dark mode" - sticking to this design choice could reduce desktop energy consumption and lead to less frequent phone charging, ultimately saving additional energy. The concern arises when designers exclusively focus on dark mode, potentially obligating users to conserve energy and engage in sustainable practices. Despite the apparent benefits, imposing a specific design preference or usage scenario doesn't align with sustainable design principles.

Sustainable design embodies a comprehensive approach rather than a singular style or outcome. According to IBM Design Lab, sustainable design aims to enhance the well-being of all individuals, communities, and the planet. Achieving design sustainability as a collective effort necessitates a diverse and empowered team dedicated to ensuring that user, community, and societal values of the experience outweigh any adverse environmental and social impacts.

IBM Design checklist for sustainability

Sustainable design requires sticking to the details and practices integrated during product design. Many sustainable design methods are mainstream today. For instance, adopting a minimalist layout by reducing visual complexity and necessary rendering data can decrease the data load required for page rendering. This illustration underscores why sustainable design is a comprehensive practice rather than merely a set of design updates. While I often highlight quick solutions that offer significant user and business value, delving deeper into sustainable design is more of a holistic practice from my perspective. If I aim to create a sustainability-focused product, prioritizing sustainable design from the outset is crucial, rather than opting for quick fixes or additions. Achieving a sustainable solution demands dedication, clear communication, and ongoing testing to uncover the most valuable outcomes.

A useful improvement that I can make today is data reduction. Broad bandwidth is consumed when loading items like images, text, or actions on a webpage. To enhance my design's sustainability, I can assess the data users interact with and reduce bandwidth usage through methods like image optimization, lazy loading, and clean code. For instance, large images can slow loading times without enhancing user experience. Although resizing images may seem minor, reducing data consumption can benefit a user's device battery life, awareness, and power usage. Did you know that high-contrast color palettes use less data than low-contrast ones? High contrast requires less data to differentiate colors, making it a simple yet effective way to improve any project.

The essence of sustainable design is not just about tweaking images and colors to save bandwidth. It's about embracing a comprehensive approach that projects can aspire to achieve. Collaboration with various team members is crucial to pave the way for current and future sustainability in the design system, aligning with sustainable design best practices. While focusing on minor updates to streamline page complexity and user experience can contribute to sustainable design, the core message remains clear: committing to true "sustainable design" entails dedication to the product's users and the environment at large.

Enhancing User Interaction, Behavior & Environmental Impact: Promoting Green Choices

My project is ready for a commitment to sustainable design practices, how can I incorporate more eco-friendly features into a holistic redesign?

I suggest starting by delving into how the project can offer new insights to users and teammates, emphasizing the importance of the project's purpose. Clarifying the "why" behind the project ensures everyone is aligned with the commitment. Then, I'd consider enhancing informative elements to help users maintain their dedication. For instance, refining features to display user data consumption through indicators and visual cues could be a step forward.

It is one thing to ideate, plan, and commit to sustainable design, but motivating users to adopt the practice is another challenge. During my research, I found  "Ecosia" to be an ideal example of such dedication to users and the environment. Ecosia functions as a search engine that allocates profits from user searches to global tree-planting initiatives. Their user interface not only embodies sustainable design principles but also includes visual tokens showing the trees planted by the user, the total number of trees planted, and their ongoing commitment to the cause. This example highlights how Ecosia's design efforts to engage users in tree planting align with sustainable practices. By involving users in their mission, incorporating specific design elements on their platform, and consistently delivering on their promise, the Ecosia team continues to uphold sustainability through design.

Assessing the Longevity: Evaluating the Influence of Your Sustainable Design Decisions

In the article so far, I've discussed several excellent sustainable design practices that could be incorporated into a project today. However, how does a project leader assess the impact of sustainable design choices on the business's profitability? While various approaches exist to this question, I've observed that these factors typically provide the strongest rationale for implementing sustainable design enhancements.

I'd like to start by discussing the impact sustainability can have on a user's overall experience with a business. Although it may appear simple or straightforward, a person's awareness of sustainable practices can enhance the promotion of a company's vision and mission. When developing my website, I aimed to ensure that I followed sustainable design practices for the UI. Additionally, I included a specific badge certifying the site as "certified green." (Found below on This example highlights the impression visitors might form when exploring my site. Only sustainability-focused designers can truly discern if a design is sustainable or not, hence the importance of providing "proof" or justification for the practices in place. It can be argued that newcomers who encounter the label and additional content regarding the design are more likely to develop a positive perception of the brand and its commitment to sustainability. The key takeaway is that while I am confident in my website's adherence to sustainable design principles, users may not possess the same knowledge on the subject as expected in any marketing scenario. My goal is to pave the way for myself while educating my target audience on sustainable design practices through explanations of my design choices and leveraging third-party endorsements to foster better perspectives.

Arrow North website footer

This isn't the sole item to justify design sustainability within a business. Another vital factor is the utilization of design elements. I often emphasize the crucial need for utmost consistency in design; it's fundamental to sustainable and system design. One key rationale is the practice of "Component Reusability," involving crafting reusable UI components with efficient code. This minimizes the necessity for new code creation within the team. Moreover, this approach aids me as a designer in maintaining consistency and focus on delivering optimal UX rather than getting caught up in design intricacies already resolved in the process.

Opinions vary on incorporating components in the design. Yet, from a sustainability perspective, it proves to be the most beneficial process for both teams and customers. When designers and developers commit to using a dedicated set of components for their projects, they can concentrate better on the user's experience rather than creating numerous new items. This fosters consistent user interaction as the foundational actions or UI elements they engage with remain uniform.

One crucial aspect that I believe strongly influences design sustainability is the consideration of a project's long-term impact based on its design and engineering decisions. When making choices for the product, I always ensure they align with the product's future and our core mission. As a founder, I continuously strive to anticipate and plan for the product's trajectory over the next decade or more, upholding its values. As discussed earlier, sustainable design practices signify a dedication to creating superior, eco-friendly products throughout the project's lifecycle. While incorporating small design elements in line with a sustainable vision is impactful, it represents just a single step towards acknowledging the project's broader influence on the world and its users. Depending on the project's stage and future objectives, focusing on these minor details may not always be the best approach; comprehensive attention to detail and periodic review through a revitalized process and project may be more appropriate. Embracing sustainable design practices necessitates commitment from the entire team and aligning with the project's objectives rather than being a mere marketing tactic.

Small Steps, Big Impact

In wrapping up, it's clear that the path toward sustainable UI design is not just a momentary choice but a fundamental shift in how teams approach their projects. Founders and design teams are encouraged to continually forecast the long-term impact of their design and engineering decisions. This foresight aligns with the founding mission and ensures that every phase of the product’s lifecycle reflects sustainable practices. By adopting a mindset that emphasizes the future as much as the present, teams can make informed decisions that benefit both the user experience and the environment. By viewing sustainability as an integral component of design thinking, teams can create products that are not only innovative and functional but also environmentally conscious and aligned with the broader goals of sustainability. Encouraging a culture of continuous improvement and reflection on these practices will lead to richer, more impactful design outcomes that stand the test of time.

Key takeaways:

  • Make Sustainability a Core Project Driver: Integrate sustainable practices at every stage of the project, from ideation through execution, making it an integral part of the design thinking process.
  • Forecast Long-Term Impact: Always consider the future implications of design choices to ensure they contribute positively to both user experience and environmental sustainability.
  • Small Steps, Big Impact: Although sustainable design is a holistic approach, implementing design elements like optimized images, minimalistic layouts, and dark-mode functionality can help a project become more sustainable.
  • Promote a Culture of Continuous Improvement: Foster a team environment that values ongoing learning and reflection on sustainability practices to achieve more meaningful and lasting design outcomes.