Top 3 Natural Gas Pipeline

Modernized a 180+ screen platform to improve usability and system consistency

00

problem

The original application was built on a tech stack from the late 90s and early 2000s, resulting in an antiquated, fragmented and inconsistent user experience. Features were added over time without a unified design approach, making workflows difficult to navigate and increasing reliance on customer support. Strict regulatory requirements (FERC/NAESB) added additional complexity, limiting flexibility in how information could be structured and presented. As a result, the system was difficult to maintain, costly to change, and challenging for users.

solution

The redesign created a more structured, user-centered experience by improving navigation, simplifying workflows, and modernizing login, account preferences, validation, feedback, and customization. These improvements were based on direct user input and recurring pain points uncovered throughout the project. Built on top of Material UI, the design system was extended to meet business and regulatory needs, accelerating the timeline, improving design-engineering alignment, and creating a more cohesive platform.

This project focused on rebuilding a legacy native Java application into a modern web platform while maintaining continuity for existing users. A key constraint was that the backend system remained unchanged, allowing both the legacy and 2.0 applications to run in parallel. This phased approach reduced disruption, enabling users to continue working in a familiar environment while gradually adopting new features over time.

Legacy and 2.0 apps ran in parallel on a shared backend.

The application operates in a highly regulated industry and supports three separate transportation service providers, each with its own operational nuances. I owned decisions around shared patterns and necessary variation, balancing usability, consistency, and compliance across the platform.

Because the backend had to remain unchanged, many improvements had to work within rigid data and workflow constraints. In some cases, we took a lift-and-shift approach and deferred deeper redesigns to later phases, when backend changes would make more meaningful improvements possible. We built the application on top of Material UI, extending the design system to meet business and regulatory needs.

As the team grew from one designer to four, I established standups, peer reviews, QA validation, and customer advisory board testing with real-world data to keep work aligned across parallel streams. These efforts reduced time on task during login by 85% and generated overwhelmingly positive user feedback, while creating a stronger foundation for phased modernization and more consistent future improvements.

year

2023-Present

timeframe

3+ years

tools

Figma

category

UI/UX

01

Page templates speed up production and help the team align on core structure without reinventing the basics each time.

02

Stepped form components make inherently complex workflows easier to navigate by revealing only the information users need at each step.

03

System feedback was redesigned to make errors easier to identify, understand, and resolve throughout the workflow while still working within backend constraints.

.say hello

i'm open for freelance projects, feel free to email me to see how can we collaborate

.say hello

i'm open for freelance projects, feel free to email me to see how can we collaborate

STECKLINE DESIGN

STECKLINE DESIGN