Delivering the Final Design
The final phase involved creating high-fidelity prototypes and packaging them for development. For the client dashboard, I introduced a flexible grid system featuring customizable widgets, allowing users to personalize their experience. Through multiple testing rounds, I refined the dashboard’s design to ensure that all key actions were intuitive and easy to locate.
Once final tweaks were complete, the high-fidelity prototypes and design specifications were delivered to the development team for implementation.
Impact and Looking Ahead
The new One Gas client portal is currently in development, and the redesign promises to address long-standing usability challenges while providing a modern and intuitive experience. This project demonstrated the value of a user-centered approach, collaborative teamwork, and iterative design in solving complex UX challenges.
User Flow Diagram
Redesigning the One Gas Client Portal: A User-Centric Transformation
Working with One Gas was a rewarding challenge, involving a complete redesign of their client portal to improve usability and customer satisfaction. One Gas, a natural gas distributor serving over 2.3 million customers across Kansas, Oklahoma, and Texas, relied on this portal to manage gas service and bill payments for over a million users. The project spanned seven months, during which I assumed multiple roles: from conducting initial research and mapping user flows to designing visual specs, wireframes, and collaborating closely with the development team to bring the vision to life.
The initial challenge was twofold: addressing customer frustration caused by a confusing portal interface and modernizing its outdated design. These pain points were evident in the high volume of customer service calls about bill payment issues. With minimal prior UX documentation or research available, I worked with the One Gas customer service team and analyzed client calls to lay the groundwork for the redesign.
Creating a Shared Understanding
One of my first tasks was to build a comprehensive visual content map of the existing portal. While the One Gas team had a rough understanding of its structure, this step provided a detailed inventory of its components and created alignment among stakeholders. Traditional mapping methods proved inadequate for the project’s complexity, so I developed a custom approach using color-coded user scenarios. This innovative mapping technique revealed patterns that would have otherwise gone unnoticed and served as a foundation for the redesign.
From these insights, I distilled the portal into two primary user flows: starting service and stopping service. Each flow included multiple mini-flows including new user registration, deposits, scheduling requests, and accessibility features. These were grouped and organized with clear visual cues.
User Scenario Map
Prototyping and Testing
Armed with user flows and scenarios, I began sketching concepts for the new portal. I created two distinct paper prototypes, tested them with non-project employees, and iteratively refined the designs based on their feedback. A key focus was ensuring critical call-to-action elements, such as payment options, were prominently displayed and easy to navigate.
Using Adobe XD, One Gas’s preferred design tool, I developed low-fidelity prototypes and conducted additional rounds of testing with employees. After incorporating feedback, I presented the designs to the One Gas team, inviting their input and fostering a collaborative environment.
The development and customer service teams provided valuable edits based on internal requirements, which I integrated before conducting usability tests with both employees and key stakeholders. Including the One Gas team in these sessions built trust in the process and enthusiasm for the redesign.
One Gas Dashboard Customizable Widgets
One Gas Service Onboarding Section