top of page
Williams backsplash-2.png
Williams circle.png

Williams GasKit

Building a modernized web app experience

I modernized outdated internal and client-facing apps while working with a team of designers and engineers in partnership with the energy company Williams. 

This project involved creation of a branded design library, auditing of the current applications, and completely rethinking the user experience while designing a new look and feel for the GasKit portal.

Date: July 2022 - April 2023

Background

Wiliams manages natural gas pipelines across the United States and their employees and clients rely on two applications to accomplish key tasks: GasKit and PowerBuilder. Both of these applications were noticeably out-of-date in their user interface and the underlying technology.

 

Visually, the interface lacked a cohesive design system and did not speak to the current Williams brand identity. The internal Williams users and clients alike both expressed a desire to improve the user experience. 

Login screen of the Williams customer portal before the modernization effort

Problem

Questionnaire responses, shadowing, and interviews with users of Williams applications revealed significant opportunities for improvement. Challenges included:

  • Interface is very outdated and provides a subpar user experience

  • Legacy technology poses challenges in support, security, and user experience

  • Manual effort needed to perform business processes that should be partially or fully automated

The new GasKit

The updates began with the creation of a branded design system for Williams. Working with the client and the developers from our team, we chose Kendo UI for Angular as the foundation for the design system, which contains over 100 UI components in its library. The design team then customized the components to adhere to brand guidelines.

Excerpts from our branded design system that we created for the new GasKit application

Using this new design system, I was responsible for improving the user interface of a web application while consolidating two separate existing programs. There were three phases of work, beginning with the simpler customer portal application and ending with the complex PowerBuilder app that included over 400 pages in its existing state, split into several modules and features.

 

Through months of contributions on this project, I tackled dozens of features while partnering with Williams business stakeholders, internal product managers, and engineers. My role on the design team encompassed the larger and more complex features, such as Nominations and Security Admin Console, which included 8 flows and 83 total pages prototyped and 11 flows and 137 pages respectively.

Annotated new WFS login.png

New login screen with an improved layout, stronger branding, and more inviting imagery

The new designs went beyond simply updating the interface, although that was a major priority. We also added new functionality that users needed to better perform their daily tasks, such as a dashboard with widgets for quick reports and data visualization. A new system for displaying custom alerts was included, and search/filter operations were vastly improved for high-frequency accounting and volume management tasks.

Examples of screens using the updated page layouts and branded UI elements

Electronic bulletin board

This project also included updates to a public-facing site, referred to as an electronic bulletin board (EBB). The existing EBB for the Discovery pipeline was chosen as the initial target for updates. It was outdated and in need of a new home page as well as numerous technical upgrades on the back-end. 

I conducted a digital whiteboarding workshop with business stakeholders to gather and prioritize the features of an ideal future state. The design team used the workshop data to inform the redesign of the Discovery EBB.

Examples EBB before.png

The state of the EBB site before the redesign; note the lack of a home page which is just a stock image

The team used the same design system components as the internal app to bring a cohesive brand identity to the new EBB site. I worked to get approval from the business on new page layouts while adhering to strict industry guidelines and regulations. We brought new features to the home page like preview cards for important notices on the pipeline. The final designs were much more aligned to the Williams brand, and the first site will be used as a template for the other EBB sites to be updated in the future, ensuring a more consistent experience across all public-facing sites.

The new EBB includes important updates like a home page and improved contacts page

Examples EBB after.png
bottom of page