THN Design
Trent Nguyen · Portfolio
Incorrect password
All case studies Case Study · Digital Redesign & CMS Migration

Redesigning swgas.com on Oracle WebCenter Sites.

Fifteen months, a legacy CMS we had to retire, and a customer site used by millions. I led UX, ran four rounds of usability testing with real customers, and hand-built the component library and page templates myself in Oracle WebCenter Sites as swgas.com moved onto the new platform. The trick was getting off the old platform without losing the things people had come to rely on.

Client
Southwest Gas (swgas.com)
My Role
UX Director & Lead Designer
Project Type
Redesign · CMS Migration
Duration
15 months
Utility · Platform Migration
swgas.com
Strategy, usability testing, and art direction for a full relaunch on Oracle WebCenter Sites.
Overview

What the engagement looked like.

Southwest Gas serves more than 2 million customers across Arizona, Nevada, and California. Their main customer site, swgas.com, was running on a legacy CMS that had become the bottleneck for almost everything. Editorial work crawled, content got duplicated across pages because reuse wasn't really possible, and UX improvements kept dying in the backlog. Leadership decided to start over: a full redesign on Oracle WebCenter Sites. I came in as UX Director and stayed with it for 15 months, owning strategy, usability testing, and art direction from discovery all the way to launch.

My Role

UX Director, on the hook end-to-end.

  • Set the UX strategy, success metrics, and research plan
  • Built the personas and journeys that everything else hung off of: IA, content, visual direction
  • Ran four rounds of usability testing on the journeys that mattered most: bill pay, service requests, account management
  • Directed the new content and the digital asset library behind the redesigned site
  • Defined an SEO approach that actually fit the new IA and content model
  • Owned responsive design and art direction across templates, components, photography, and editorial
  • Built and configured the reusable component library and page templates directly in Oracle WebCenter Sites - hero modules, content cards, editorial layouts
  • Mapped every design decision straight to the CMS's component model myself, so what shipped in WebCenter matched what we'd tested with customers
  • Kept content, IT, marketing, and customer service leadership rowing in the same direction
The Problem

What the legacy CMS was costing them.

  • An aging CMS with templates that wouldn't bend
  • Duplicate content scattered across pages, with no clear owner
  • A page experience that lagged behind peer utilities
  • Editorial workflows so slow that even small updates needed dev time
  • A brand that looked like a different company depending on where you landed
Approach

How we ran it.

I ran the program on parallel tracks instead of a waterfall, because a 15-month waterfall on a site this size is how you get a launch nobody trusts. Strategy set the principles, personas, and journeys upfront. Research kept us honest with four rounds of testing on real customers. Content and SEO produced net-new editorial and assets tuned to the new IA. Art direction stitched it all into a responsive visual system that mapped cleanly onto WebCenter's component model.

Lean UX + Agile

Three parallel tracks, one continuous feedback loop.

Rather than running strategy, design, and content in sequence, I structured the program as three concurrent tracks moving through the same Think-Make-Check loop in each sprint. Findings from research fed the UX track, and design decisions shaped what content needed to say. The loop closed every sprint, not at the end of the project.

Lean UX Agile diagram showing Strategy and Research, UX Design and Prototyping, and Content and Art Direction tracks each cycling through Think, Make, and Check phases across twelve sprints, converging on launch
Personas & Journeys

Built around customers, not the org chart.

I built personas grounded in real behavior across Arizona, Nevada, and California, not composite "Sarah, 34, busy mom" stuff. Each persona was paired with an end-to-end journey: starting service, paying a bill, reporting a leak, applying for energy assistance. Those journeys became the shared reference for the whole program. When somebody wanted to argue for a feature, we could check it against what customers were actually doing, not what we hoped they'd do.

  • Primary personas across residential, small business, and bilingual segments
  • End-to-end journeys for the highest-volume and highest-stakes tasks
  • Pain-point mapping that fed IA, content priorities, and visual hierarchy
Strategy

Two jobs to do at once.

swgas.com had to do two things at once. It had to be a fast, reliable service tool for people paying bills and managing accounts. It also had to tell Southwest Gas's story about natural gas being affordable and efficient. The UX strategy had to carry both without letting one drown out the other, so customers could get their tasks done quickly while the brand story landed in the places that made sense.

  • Nav reprioritized around the top customer tasks instead of the org chart
  • Content modeled as reusable components to fit the new WebCenter templates
  • Bill pay, outage, and emergency flows pulled into line with the rest of the experience
  • Editorial guardrails so marketing could publish without breaking the system
Brand Narrative

The savings story, without burying the service tasks.

Leadership wanted natural gas positioned as the affordable, efficient choice. The message needed to live in the experience without elbowing aside the reason most people came to the site in the first place. I led the strategy for where and how the savings story showed up: dedicated landing pages for energy efficiency and rebate programs, hero modules built for seasonal campaigns, and editorial that tied everyday customer decisions back to the bill they pay every month.

  • Energy-saving programs and rebates promoted into the navigation, not buried in marketing pages
  • Hero and campaign modules built to carry seasonal savings messaging
  • Editorial patterns that connected customer behavior to dollars-and-cents outcomes
  • Value proposition reinforced across the homepage, residential, and business journeys
Usability Testing

Four rounds with real customers.

I ran four rounds of moderated usability testing across the program. Each round zeroed in on the journeys we couldn't afford to get wrong: paying a bill, reporting an issue, managing an account, finding emergency information at the moment someone smells gas. Findings fed iterative changes to templates, IA, and editorial structure. I wrote them up as prioritized recommendations dev and content could act on the same week, not slides to admire in a deck.

  • Four rounds of moderated testing across desktop and mobile
  • Task scenarios drawn from real customer intent and emotional context
  • Cross-functional review sessions to close the loop with engineering and content
  • Tracked task success, time on task, and self-reported confidence
Content & Digital Assets

New content for the new system.

A new system needed new content. I directed the editorial rewrite and the digital asset library: photography, iconography, and component-ready modules authors could compose without breaking the visual system. The goal was a content foundation that put customers first and made the marketing team's job easier instead of harder.

  • Net-new content for top customer tasks and key landing pages
  • Photography and iconography aligned to the new visual direction
  • Modular content patterns that matched WebCenter Sites' authoring model
SEO Strategy

SEO baked into the design, not bolted on after.

I treated SEO as a UX deliverable. The new IA, URL structure, content model, and editorial templates were all designed with search visibility built in, so the journeys we validated in research could actually be found by the customers who needed them. SEO at the end is just SEO debt.

  • Keyword and intent mapping tied to persona tasks and customer journeys
  • URL, heading, and metadata structures built into the template system
  • Content guidelines that worked for readability and discoverability at the same time
Responsive Design

One system, every screen.

The site shipped as a responsive system from day one. Templates, modules, and content patterns were designed to adapt across breakpoints, and mobile got treated as a primary experience rather than something to scale down to at the end. Every round of usability testing covered desktop and mobile, so task flow and customer confidence had to hold up on both before anything moved forward.

Southwest Gas mobile app login screen with username, password, Face ID, and quick-action tiles for Make a Payment, Start Service, Stop Service, Transfer Service, Outage Map, and More
A brand-new Southwest Gas app experience with quick access to core customer tasks at sign-in.
Bill detail view showing current balance, Make a Payment and Enroll in Automatic Payment Plan buttons, and a bill summary breakdown
Easily view and pay your gas bill and set up automatic payments in a single flow.
Payment methods screen with checking account and credit card on file, plus an option to add a payment method
Store payment information for easy one-time payments. Fast, clear, and secure.
Art Direction

A visual system the platform could actually hold.

  • A cohesive visual language across hero modules, content cards, and editorial layouts
  • A photographic style guide that paired with the new content components
  • Typography hierarchy, color, and spacing rhythm tuned across the template set
  • Built each component directly in WebCenter Sites rather than handing off comps - art direction and platform reality never drifted apart because I was the one reconciling them
The Platform

Designing with the grain of WebCenter, not against it.

WebCenter Sites is component-driven, which means the UX strategy and visual system had to exist as reusable parts rather than one-off page comps. I built the template structures, components, and asset types directly in WebCenter Sites myself, working alongside the implementation team on authoring workflows. The bar was simple: what authors could actually produce in WebCenter had to match what we'd designed and tested with customers. If it didn't, I fixed it in the CMS rather than sending it back to a dev queue.

Impact

What we shipped.

  • Launched a redesigned, responsive swgas.com on Oracle WebCenter Sites inside the 15-month window
  • Cut editorial time-to-publish through reusable templates and clearer authoring patterns
  • Improved usability across the core customer journeys, validated over four rounds of testing
  • Stood up a new digital asset and content library tied to the visual system
  • Built SEO into the IA and template system instead of bolting it on later
  • Left behind a visual and component system the team could keep iterating on after I rolled off
Reflection

What I took away.

Most platform migrations of this size run as engineering programs with a UX pass tacked on near the end. This one worked because UX had a seat at the table from day one, translating between strategy, research, art direction, and the WebCenter implementation team in real time. The other thing I took away was simpler. On a regulated utility site, clarity is the most valuable design asset you have. Customers are usually here because something is wrong, or because money is involved. They don't want clever. They want to know what to do next.

Let's Connect

Need research-backed UX leadership on your next engagement?

Whether you're rethinking a flagship product, scaling a research practice, or trying to make sense of complex user behavior, I'd love to talk.

Email me
Location
Las Vegas, NV 89120
Availability
Open to new engagements