A Modernized Web Experience Embiggens Natural Gas Service
TL;DR
Georgia Natural Gas (GNG) has been a Macquarium client for nearly a decade, and I’ve personally served as lead designer for dozens of their projects. But as with all companies, the time came when their web platform was finally out of time.
Out of date visual design, hand-coded content, and a tangled mess of spaghetti code. In just 10 months, we did a massive full-stack makeover and improved conversion by 4x their expectation.
Background
Georgia Natural Gas (GNG) partnered with us to overhaul its decade-old website, which was suffering from an outdated visual design, inefficient workflows, and a tangled, aging codebase. Much of the site’s content was hand-coded thanks to the lack of a modern CMS or DXP foundation. The experience also included multiple self-service tools—ranging from enrollment wizards to account preference dashboards—that were powerful in functionality but hindered by legacy architecture and integration issues.
Our goal: replatform the site on Kentico, redesign everything from the ground up, integrate personalization via Moengage, and completely reimagine the gas shopping and service plan renewal experiences.
The Challenge
Deceptively-Complex Offerings
What seemed like a straightforward list of gas plans was actually a complex web of standard vs custom pricing, promos, customer data, and (now) bundles.
Intense Legal Requirements
Every aspect of the site - copy, imagery, product strategy, opt-in services, core logic, and flows - were governed by stringent state & federal regulations.
A Need for Speed
The scope of this project would typically mean a phased, multi-year release plan. The client wanted a big bang in time for their fall sales campaign.
A Need for Focus
The website provided little direction to customers. Content took a bit of a shotgun approach. Self-service tools had complex flows and a weirdly fragmented experience.
Our Approach
Strategic Planning and Team Structure
We assigned all UX designers to the project and split the solution into parallel workstreams. Each designer took ownership of a different segment of the site or a specific self-service tool. In addition, we worked intensively with the developers and our strategy & analytics specialists to ensure that the solution made the most of the new Kentico DXP (Digital Experience Platform), Moengage personalization engine, and Quantum Metric analytics (hint-hint: these were massive under-the-hood upgrades).
Highly-Parallel Design
Our timeline was extremely aggressive. This meant that we had to keep every team member fully committed and productive at all times. The dev team in particular had to be constantly fed work along the way. Based on the complexity of a portion of the overall solution together with its priority, each element was rapidly put through a design assembly line. Cross-discipline collaborators were pulled in on a daily basis with their contributions tailored to the needs of each element and our overall release strategy.
Progressive Design System Build-Out
The schedule didn’t leave room to create a full design system before we moved into building pages. So while we worked with GNG and our Business Analyst on requirements, a “starter kit” was built to provide initial styles and the components we knew we’d need. From there, and over the life of the project, this kit was continually expanded (with central governance) to capture every new component or style we needed. By go-live, we had everything we’d need to support future work more efficiently.
Weekly Sprints
The project necessitated a certain degree of “AgileFall” behavior based on the nature of some of the workstreams and the availability of client stakeholders. But we worked as closely in line with a weekly sprint cadence as possible. JIRA was our tool of choice for managing the program plan along with individual deliverables. Because reviews were cross-functional, we applied standards to sharing assets with other teams, using common naming conventions and versioning tools within Figma. Peer reviews happened daily and client office hours three times a week. I have to give credit to some very obliging and collaborative stakeholders here for hanging out week after week at this level of intensity.
In-Flight Accessibility Testing
Historically, accessibility compliance is often tricky to build into a design cycle. We wanted to assure WCAG 2.2 AA compliance. In past projects we had used offline checklists for design creation and then manually validated everything as part of a “design QA” pass at each milestone. This works, but we wanted to reduce rework. Enter Stark, an accessibility extension for Figma. This tool provided automated accessibility feedback as assets were created. Although automated testing (in my view) is more a complement than a replacement for manual testing, in our case it greatly improved our efficiency.
Critical Rethinking of Self-Service Tools
The broad scope, intensive approvals processes, and truncated timeline meant that the easiest strategy for everything but the core web pages would be a simple reskin. But wasn’t good enough for either us our GNG. We triaged the various tools and assigned a plan to each. Of the 9 tools we needed to update, 6 were absolutely critical to customer acquisition and retention. These would all get “the works.” The others were fundamentally sound and would be reskinned. In all, the 4 most complex tools would be fully reimagined with a much greater degree of integration, heavily streamlined flows and interactions, and an emphasis on automation and guidance.
Designing for Personalization
One of our biggest enablers was Moengage, which tracks user behavior, gathers data on their interactions, and builds a predictive profile on what they’re looking for. With it, we could work around many of the outstanding legacy architecture limitations. We could prioritize content, tailor offers to individual customers, highlight the most relevant self-service options, and feature upsell opportunities. Using these capabilities did mean a significant increase in the number of visual design and copy assets to produce, but the end results were more than worth it.
My Role
Led the Macquarium full Macquarium design team (4 UX Designers, 1 Visual Designer and 1 Art Director)
Created and maintained the program plan, workstream plans, and day-to-day timelines & milestones
Collaborated in creation and management of the project estimate and SOW
Drove discovery and design activities
Oversaw our Business Analyst as he developed requirements
Consulted with strategy and analytics specialists on tracking and personalization strategies
Planned and facilitated workshops for discovery, co-creation, and design review
Oversaw the effort to create a new design library in Figma (plus instructional documentation in Confluence)
Used 7 years of domain knowledge to guide all key contributors and analyze their work in depth
Ensured thorough design quality assurance and standards compliance across multiple parallel workstreams.
The Solution
Quick score comparison and modular report with built-in alerts
Responsive design with tabbed multi-bureau comparison
Credit history drill-down views with natural reading patterns and quick consumer actions
Guided deep credit score diagnosis
Walkthroughs and helper content to educate consumers
Focused view for quick checkups
The Results
Increase in New Customer Enrollments
24%
GNG wanted to see a roughly 6% uplift in customer acquisition. They were skeptical that an updated site could achieve much more. We quadrupled their expectations.
Faster, More Affordable Support
We built the new site to be supportable. With a full design system, a DXP, top-end analytics & personalization tools, and deep documentation, for the first time GNG.com became easy to support and upgrade.
Partners (and Competitors) Take Notice
GNG’s parent (and grandparent) companies, Southstar Energy Services and Southern Company, were both suitably impressed. Since launch we’ve seen signs of competitors trying to adopt some of the new site’s strategies.