Gas South’s Online Account Service (OAS) is the primary digital portal customers use to manage their accounts, view usage, and pay bills. While functional, the existing experience was inconsistent with the Gas South brand and created friction for common customer tasks. This project focused on redesigning OAS to align visually with the rest of the Gas South digital ecosystem while improving usability, accessibility, and overall clarity. The result is a more intuitive, customer-centered portal that simplifies account management, reduces friction, and delivers a more cohesive and modern user experience.
Client
Gas South
Services
Visual Design
UI/UX Design
UX Research
UX Testing
Industries
Natural Gas Utilities
PROBLEM STATEMENT
The Online Account Service portal no longer met user expectations. The experience felt outdated, inconsistent with the Gas South brand, and introduced friction in key self-service tasks. As a result, customers struggled to complete common actions, relied more on support, and had lower confidence in managing their accounts online.
KEY ISSUES:
• Outdated visual design that did not reflect the Gas South brand
• Friction in core tasks such as viewing bills and making payments
• Accessibility gaps that created barriers for some users
• Fragmented workflows that increased effort and confusion
• Higher reliance on customer support
• Decreased trust in self-service tools
DESIGN CHALLENGE
Create a modern, accessible, and intuitive portal aligned with the Gas South digital ecosystem that simplifies account management, reduces friction in key tasks, and increases user confidence in self-service.
RESEARCH & DISCOVERY
To understand how users expected the portal to work, we focused on structure and task flow.
METHODS USED:
• Card sorting to understand how users group and label information
• User flow mapping for key tasks:
• Viewing bills
• Making payments
KEY ISSUES:
• Users’ mental models did not match the existing navigation
• Important tasks were buried or required unnecessary steps
• Clear grouping and labeling would reduce friction
HOW THIS INFORMED DESIGN:
• Defined main navigation pages
• Clarified content hierarchy
• Simplified task flows for high-traffic actions
DESIGN DECISIONS
Because Gas South already had a mature design system, we moved directly into high-fidelity design.
Why high-fidelity first:
• Maintain brand consistency
• Speed up implementation
• Reduce rework during engineering handoff
DESIGN PRINCIPLES:
• Mobile-first to prioritize clarity and usability on smaller screens
• Reuse existing components to maintain consistency
• Improve accessibility across key flows
KEY FOCUS AREAS:
• Reusing established components and patterns
• Matching Gas South’s updated visual language
• Improving accessibility through:
•Color contrast
• Typography
• Focus states
• Readability
BILL PAYMENT FLOW
One of the most critical customer actions.
PROBLEMS ADDRESSED:
• Too many steps
• Unclear labels and calls to action
• High cognitive load
DESIGN CHALLENGES:
• Streamlined steps to complete payments
• Clarified labels and instructions
• Improved CTA visibility
• Reduced friction through simpler layouts
RESULTS:
Users could complete payments faster and with more confidence
COLLABORATION PROCESS
Throughout the redesign, we worked closely with Product Managers, Developers, Brand Team, Business Analyst and Customer Experience to ensure the experience met both user needs and business goals. Designs were reviewed regularly, incorporating stakeholder feedback and technical constraints through multiple iterations.
HOW WE WORKED:
• Regular design reviews with stakeholders
• Close collaboration with engineering to validate feasibility
• Iterative refinementS
• Usability testing to identify friction points
OUTCOME:
• Designs balanced user needs and technical realities
• Final solution was scalable across devices
• Smoother handoff and implementation
