Future Energy Outlook
Making energy systems modelling accessible

Leading a team to research and design TransitionZero’s flagship web product, built to support the global transition to net-zero energy systems.

Summary

I led the research and design of TransitionZero’s flagship web product, Future Energy Outlook (FEO). The audacious task was to design an accessible digital platform that would democratise energy system modelling across the globe, particularly for stakeholders who traditionally couldn’t access or afford such tools.

The project presented unique challenges: translating highly technical energy modelling concepts into an intuitive interface, serving diverse user groups with varying technical expertise, and creating a design system that could evolve with the product. Through extensive user research, collaborative design processes, and continuous iteration, we delivered a product that fundamentally reimagined how energy system modelling tools could be made accessible and usable.

Within 2 months, we had not only successfully designed solid foundations of the product but also established a design system, documentation, and research guides that empowered TransitionZero to continue developing the product in a user-centered way long after our engagement ended.

Project background

Client and context

TransitionZero is an independent climate analytics organisation focused on accelerating the transition to a clean energy future. They approached our team at Snook with a vision to create an open-source, accessible platform that would democratise access to energy system modelling tools.

The timing was critical—achieving net-zero targets worldwide requires a complete overhaul of current energy production and distribution systems. However, the tools needed to model these transitions were typically locked behind expensive consultancies and proprietary “black box” systems, making them inaccessible to many stakeholders, particularly in low-income countries.

The traditionally closed and proprietary nature of energy system planning at national levels is no longer fit for purpose.
Climate Advisory Board

The opportunity

As a product designer passionate about using technology to address complex challenges, this project represented an exceptional opportunity to create meaningful impact. The traditionally closed and proprietary nature of energy system planning at national levels was no longer fit for purpose in a world racing to address climate change.

By providing open-source data and accessible modelling tools, we could enable more stakeholders to meaningfully participate in the transition to net-zero energy systems. This was particularly important for governments and organisations in low-income countries that often couldn’t afford expensive energy consultancy services.

Open standards in energy planning will make power and utility grids more resilient to a changing climate.
IEEE Spectrum

The challenge

Breaking down technical barriers

When we first engaged with this project, I quickly realised the immense technical complexity we needed to translate into an accessible interface. Energy system modelling is highly technical analysis typically produced using “black box” models and published in lengthy reports without making the underlying data available to stakeholders.

This creates a significant problem when key policy decisions and decades of infrastructure investment are based on these reports. Our challenge was to make these complex models and their outputs understandable and usable for a diverse range of users.

Diverse user needs

Future Energy Outlook aimed to support many different groups, from policymakers and investors to academics and analysts. Each group had slightly different needs from the product, creating a design challenge where we needed to avoid following only the loudest voices or strongest opinions.

The technical expertise among our users varied dramatically—some were energy modelling experts, while others were policy professionals with limited technical background but critical decision-making authority. Creating an interface that served both audiences without alienating either would be a delicate balancing act.

Visualising complex data

Energy modelling involves complex datasets with multiple variables changing over time. Presenting this information in an accessible way while maintaining accuracy and detail posed significant design challenges. Most existing products defaulted to map-based interfaces that created cognitive overload for users and presented accessibility challenges, particularly for colour blind users.

My Approach

Building a multidisciplinary team

As the project and design lead, my first priority was establishing a cohesive, multidisciplinary team. I brought together product designers and a dedicated user researcher from our team at Snook, which together with TransitionZero’s software developers and systems modelling experts formed a single collaborative unit.

To ensure we functioned as a unified team despite working across different time zones and locations, I established a structured collaboration framework: daily stand-ups to maintain momentum, weekly user research playbacks to their wider business to ensure alignment, and open documentation of our design work and rationale.

User-centered design process

I implemented a rigorous user-centered design process that began with challenging assumptions. Rather than accepting the conventional wisdom that energy modelling tools needed to be map-centric and technically complex, we started by understanding the actual needs of our diverse user groups.

This approach emphasised continuous user involvement throughout the design process—from initial research through concept development and into iterative testing. This ensured we were designing for real user needs rather than our assumptions about those needs.

Working in the open

Given the technical complexity of the domain, we recognised that close collaboration with TransitionZero’s domain experts would be essential. We established a practice of sharing design concepts early and often, creating space for constructive critique and discussion.

This approach allowed us to sense-check and course-correct rapidly, ensuring our designs were both technically accurate and user-friendly.

The power of good design is making ideas tangible—the artefacts we create allow us to bring different people together, to discuss, critique and improve what we’re making

Discovery phase

Assumptions mapping

We began our discovery phase by facilitating an assumptions mapping workshop with the team at TransitionZero. This critical exercise helped us identify assumptions and unknowns about the product, its users, and the space it operates within.

The workshop yielded both high-level questions about market demand and detailed questions about specific features. This gave us clarity on which user groups to prioritise for recruitment, defined our key areas of inquiry for the early stages of research, and provided high-level questions to guide our initial interviews.

A screenshot of the interactive whiteboard we used for the assumption mapping workshop with TransitionZero’s team

User Research strategy

Based on the assumptions mapping, I worked with our user researcher to establish user groups and recruit a diverse mix of prospective users from various backgrounds. We structured our research interviews to use a combination of contextual inquiry and product walkthroughs.

This approach allowed us to learn about users’ understanding of systems modelling and open-source data, their specific data and feature requirements, current commercial and technical challenges they experience, and their expectations and evaluations of the product’s features and user interface.

To maximise the value of our research, I worked with our User Researcher to implement a concurrent analysis approach where each interview was refined and tagged immediately after completion. This allowed the research team to quickly identify and surface themes and key requirements from users, which we played back to the design and product teams. As a result, we could make informed design decisions that were then tested in later research sessions.

A snapshot of the slide deck summarising the findings from our initial user research

Key Research Insights

Our research revealed several critical insights that fundamentally shaped our design approach:

  1. Open-source builds trust: Most participants were very positive about open-source datasets and modelling software as it helped them build trust in the product and its outputs. One participant noted, “Open source would be extremely useful in India given the cost of product licenses… not everyone has the same licenses, which makes it hard to validate others’ work.”
  2. Clear market opportunity: Most participants use modelling infrequently and cannot justify building internal capacity, suggesting a clear market opportunity for the product. As one participant explained, “Most value from modelling comes during market entry phases, but because this is not a regular occurrence it is hard to justify building internal capacity for this”. Infrequent use was also another indicator that the product needed to be as usable and accessible as possible; if people weren’t using it every day, they’d be relying on intuition instead of memory.
  3. Map-based UI limitations: A predominantly map-based UI creates cognitive overload for users and is only useful in certain contexts and for certain types of scenarios. Most participants required data to be presented in a variety of ways according to their specific requirements. One research participant, when viewing an interface dominated by a map, commented: “What am I looking at here? It’s a lot to take in.”
  4. Accessibility challenges: Map-based UIs present significant visual accessibility challenges, particularly for colour blind users where multiple views are displayed concurrently and distinguished by colour.
  5. Data transparency is essential: All users expect to be able to download the dataset underpinning a given scenario to evaluate its assumptions and build trust in the product.

Competitor analysis

While conducting user research, I led a parallel effort analysing other products in the energy modelling space. We wanted to learn what features they had, how they were presenting data, and if there were emerging patterns and similarities that could inform our design decisions.

This analysis revealed several patterns in existing interfaces:

  • Layout: Most UIs provided minimal context for what the user was looking at, assuming a strong level of technical understanding and familiarity with the products uses.
  • Information disclosure: Most high-density interfaces relied on toggles to show/hide supplementary information.
  • Colour usage: Colours typically denoted either energy type (hydro electricity as blue, solar as yellow) or carbon intensity (brown for high carbon/bad, green for low carbon/good). Strict accessibility standards were difficult to implement, with some products using textures to create distinction between similar colours.
  • Data visualisation: Common patterns emerged in how different data types were visualised, such as stacked line charts for total systems capacity.

We also identified common features across products:

  • Interactive maps with time-based animations
  • Data download options in various formats
  • Limited sharing capabilities

This competitive analysis helped us identify opportunities to improve upon existing solutions while maintaining familiar patterns where appropriate.

A collection of screenshots of different websites with annotations
Annotated screenshots analysing the user interfaces of popular energy system modelling products

Design process

Information architecture and mental models

Our user research highlighted that much of the language being used in an early version of the product was not widely understood. There were mixed views on what a model is, what a scenario is, and what the output of a model and scenario is.

Early scrappy thinking about terminology and relationships

Understanding this language barrier was critical to the product’s usability and success, particularly in an emerging field where common terminology wasn’t yet established. To address this, we created a nested hierarchy and a system of navigation that supported the new mental models formed as users explore and learn the product.

We then designed a set of components to represent models, scenarios, and reports, which we used as breadcrumb navigation and signposts to help users understand what they are and how they relate. We incorporated iconography to reinforce these concepts and support their labelling.

Interface components representing a nested hierarchy; starting with system models, down to scenarios and finishing on reports.

UI design decisions

Based on our research findings, we made several key design decisions that departed from conventional approaches in the energy modelling space:

  1. Moving beyond map-centricity: Rather than defaulting to a map-based interface that created cognitive overload, we designed a flexible system that allowed data to be presented in various formats depending on the user’s needs and the specific scenario being explored.
  2. Accessibility-first approach: We incorporated alternative visual cues beyond colour, such as patterns and textures, to ensure the interface was usable for colourblind users and met accessibility standards.
  3. Consistent data visualisation: We established clear patterns for how different types of data should be visualised, ensuring consistency across the product and reducing the learning curve for users.
  4. Progressive disclosure: To manage complexity, we implemented a system of progressive disclosure that allowed users to access more detailed information as needed without overwhelming them initially.
  5. Contextual guidance: We incorporated contextual information and guidance throughout the interface to help users understand what they were looking at and how to interpret the data.
Staggered screenshots of a full report page. Note the long-form report format - a departure from the the commons assumption that dashboards are the best way to display this information.

Design system development

To ensure consistency and scalability, we created a comprehensive design system that documented UI components, patterns, and guidelines. This system served multiple purposes:

  1. It provided a shared language and reference point for the entire team, ensuring consistency across the product.
  2. It accelerated the design and development process by providing reusable components.
  3. It established a foundation that TransitionZero could build upon after our engagement ended.

The design system included documentation on colour usage, typography, component specifications, interaction patterns, and accessibility guidelines. We also created research guides to help the team continue conducting user research and testing after our engagement.

Screenshots of the design system we created, illustrating the styles, components and patterns we developed.

Key Design Decisions

Data Presentation Strategy

One of my most significant design decisions was moving away from the map-centric approach common in energy modelling tools. Our research clearly showed that while maps were useful in certain contexts, they created cognitive overload and accessibility challenges when used as the primary interface.

Instead, we designed a flexible system that allowed data to be presented in various formats—charts, tables, maps, and text—depending on the specific needs of the user and the nature of the data being presented. This approach allowed users to choose the visualisation that best suited their needs and reduced the cognitive load associated with complex map-based interfaces.

Feature prioritisation

Based on our user research and collaboration with the TransitionZero team, we prioritised several key features:

  1. Data transparency: Ensuring users could access and download the underlying data for any scenario to build trust in the product.
  2. Flexible visualisation options: Providing multiple ways to view and interact with data beyond maps.
  3. Clear contextual information: Helping users understand what they were looking at and how to interpret it.
  4. Sharing capabilities: Making it easy for users to share specific views and scenarios with colleagues.
  5. Accessibility considerations: Ensuring the product was usable by people with various visual impairments.

Navigation and information architecture

To help users build a mental model of the product, we designed a navigation system that reflected the hierarchical relationship between models, scenarios, and reports. This system used breadcrumb navigation, consistent iconography, and clear labelling to help users understand where they were in the product and how different elements related to each other.

This approach was particularly important given the varied technical backgrounds of our users—it provided additional context and guidance for those less familiar with energy modelling concepts while remaining efficient for technical experts.

Our designs for a bar chart, stacked area chart and a line chart.

Outcomes and impact

Final Product Design

The final product design represented a significant departure from conventional energy modelling tools. It featured:

  • A flexible, user-centered interface that prioritised clarity and accessibility
  • Multiple visualisation options beyond maps
  • Clear navigation and information architecture
  • Transparent access to underlying data
  • A consistent design system that could evolve with the product

Knowledge Transfer

Beyond the product itself, I ensured we left TransitionZero with the tools and knowledge to continue developing the product in a user-centered way. This included:

  • A comprehensive design system with documentation
  • Research guides and templates
  • User testing protocols
  • Design principles and guidelines

This approach ensured the product could continue to evolve and improve after our engagement ended.

A collection of screenshots of various design documentation; from design files, to spring notes, and from user journeys through to navigation

Business impact

The product we designed addressed a clear market need identified through our research—providing accessible energy modelling tools to organisations that couldn’t justify building internal capacity. By democratising access to these tools, TransitionZero positioned themselves at the forefront of the transition to net-zero energy systems.

The open-source approach also built trust with users, particularly in regions like India where the cost of product licenses was a significant barrier to adoption.

Lessons learned

Balancing technical complexity with usability

One of the biggest challenges in this project was finding the right balance between technical accuracy and usability. Energy modelling is inherently complex, and oversimplifying could lead to misleading results or limit the product’s utility for technical users.

We addressed this challenge by implementing progressive disclosure—allowing users to access more detailed information as needed—and by providing multiple ways to view and interact with the same data. This approach served both technical and non-technical users without compromising the integrity of the data.

Working with domain experts

This project reinforced the importance of close collaboration with domain experts when designing for highly technical domains. By establishing open communication channels and creating space for constructive critique, we were able to ensure our designs were both technically accurate and user-friendly.

The practice of sharing design concepts early and often allowed us to identify and address potential issues before they became embedded in the product.

The value of User Research in technical domains

This project demonstrated the critical importance of User Research in technical domains. Our research challenged several assumptions about how energy modelling tools should be designed and used, leading to a product that better served the needs of our diverse user groups.

By continuously involving users throughout the design process, we were able to create a product that was both technically robust and accessible to a wider audience than traditional energy modelling tools.