Tackling the Technical for an Environmental Watchdog

With the sheer density of the data on EIP’s site, it was critical for us to begin the project with a comprehensive discovery phase. We began by conducting in-depth interviews and workshops with their stakeholders to understand not only the data itself, but also how it was collected, who its users are, and where the current data visualization process was not meeting expectations.

These exercises gave us insight into a unique challenge of Oil and Gas Watch: the site was regularly accessed by users with a wide range of technical expertise. They needed a partner who could help them develop a data management and UX strategy that met the needs of all its users in a more streamlined, digestible way.

With the details gathered during the Discovery phase, we knew we could deliver what EIP needed to upgrade Oil and Gas Watch. Getting there meant wrapping our heads around the data from the technical perspective. At this stage, the site suffered from irregularly formatted tables, unexpected scrolling behavior, and an excess of jargon without proper context. Leveraging EIP’s expertise, we identified the information that technical users needed so we could strategize how it fit into our build. Conversely, we were able to advocate for the layperson user and how they might interpret the information as presented. 

Armed with that context, we employed our UX expertise and crafted a strategy that did three fundamental things:

• Reoriented navigation around specific content types, Facilities and Pipelines, giving users a more intuitive journey.
• Removed the unwieldy tables that dominated the site, replacing them with smaller, more digestible chunks reinforced with maps and visual aids.
• Harnessed the power of filters, allowing users to quickly find the specific data they need without being overwhelmed by a firehose of information.

Continuing with the theme of simplification, we saw an opportunity to craft a design toolkit that supported the UX with a minimal, vivid color palette. This gave the site a distinct character that reflected the amount of detail in the data while making key metrics stand out, even when scanning. That character simultaneously supported the goals of the UX strategy and put Oil and Gas Watch in WCAG compliance.

Early on in the Discovery phase, we identified the need for a new data solution with EIP. Their existing data infrastructure frequently caused failed imports and made embeds challenging without providing appropriate documentation to problem-solve. We had chosen Vue.js and Vue Router as our front-end solutions, giving us the power to create a scalable and responsive UI. We needed a data partner to match.

Using an export of EIP’s PostgreSQL database, we starting looking around at different DBaaS (Database-as-a-service) solutions. We wanted something that would give the EIP full control over their own data, in a way that was easy and straightforward for them to make changes as the climate science warranted. After exploring several potentials, we eventually landed on Xata.

Xata is a serverless Postgres solution offering us the flexibility we were looking for with a straightforward “spreadsheet-like” interface for managing records and robust branching options, which then in turn gave us a self-documenting system for writing JavaScript queries. We worked closely with Xata internally, creating a valuable partnership with them and their product, and will continue to use the building blocks we’ve established on more dynamic data visualization projects going forward.

The transformation of the Oil and Gas Watch site demonstrates the power of thoughtful design and innovative technology. By understanding the client’s needs and collaborating closely with them and a crucial data partner, we were able to deliver a solution that not only improved the site’s functionality but also made it a more valuable resource for all users.