TV Ad after launch informing customers that we have created an improved experience but have retained the charm and trust of the original brands (in this case, AlaGasCo).
Spire
Information Architecture and navigation challenge
Overview
Summary
Client: Spire Energy, the nation's fifth-largest publicly traded natural gas company
Project: User account management for Spire, a company that consolidated 5 gas utility brands into one
URL: spireenergy.com
Medium: responsive web
Framework: Liferay
Challenge
Design a customer portal for Spire Energy, which consolidates 5 natural gas utilities under one brand to Spire's 1.7 million customers across Missouri, Mississippi, and Alabama.
Solution
Working in a small team, we gathered requirements from the different gas utilities and worked to make a solution that fit all of them well. We used InVision to quickly prototype on our designs and present to the client, iterating frequently.
Result
The new website represented a 262% increase in online visitors YOY and a $1.9 million cost savings to the client. Users enjoyed an improved experience and a more cohesive look and feel throughout the site.
Challenge
Before: Sites for MGE and Laclede, two of the five natural gas utilities that were combined under Spire.
Out of Many, One
The site had many challenges, the first being the merge of 5 companies.
Consumer Pain Point → Each of the 5 natural gas utility companies had their own legacy portals, which had outdated UI and were not pleasant to use by consumers. A merge of the 5 companies could alienate gas customers if the experience was not done correctly.
Business Need/Challenge → Design a customer portal for Spire Energy, which consolidates 5 natural gas utilities under one brand to Spire's 1.7 million customers across Missouri, Mississippi, and Alabama.
UX Challenge → Just because the companies merged doesn’t mean their processes did. Each had different use cases for various regions and platforms. Natural gas, as a commodity, was subject to regulations against which we had to abide.
Specific UX Challenges:
• handling for business rules for the merged 5 different companies with all different business rules and platforms/back-end services (for locale dependent contact info, payment systems, payment "rules", etc).
• unauthenticated and authenticated states of the user-facing dot com (marketing site)
• unauthenticated and authenticated states for the consumer portal (pay my bill, view usage, payment options, etc)
• the corporate site (careers, staff contacts, etc)
• versions of the mobile and desktop navigation that needed to be determined and designed dependent on the locale and special use case. Some examples of these use cases included: an unauthenticated user on mobile with their location services off in a special part of Alabama with different contact information, and an authenticated user who is based on Missouri but is traveling and accessing the portal from a different locale.
Some of the other sites that needed to be incorporated into spireenergy.com
My Role
Working in a small team, we gathered requirements from the different gas utilities and worked to make a solution that fit all of them well.
The first year, I was an UX Designer and worked alongside a UX Director and a Senior UX Designer. The second year, we had a larger team; I was a Senior UX Designer working alongside a UX Director, a UX Designer, an Art Director, and an Account Management Director.
We worked very closely with client stakeholders and a development team.
Process
We mostly followed an adjusted 5D design process, using Agile/Scrum methodology.
We whiteboarded often, sketched out, mocked up, and tirelessly iterated on the site. We started with our problem statement, validating and optimizing along the way as we designed, built, and deployed the site, and finally, measuring successes and learning from our experiences.
During discovery, we had workshops with stakeholders in order to define needs. Out of this came discovery concepts. A large amount of care was spent iterating on the IA, specifically the IA for both the authenticated portal and the dot com megamenu. We created over 850 wireframes in over 6 different prototypes through rounds and rounds of design, which, alongside content and component design, defined creative design.
Approach
During discovery, we had workshops with stakeholders in order to define needs. Out of this came discovery concepts.
Because of the great detail and business rules, a large amount of care was spent iterating on the IA, which was a smart move. This included the megamenu/nav. design and building out a comprehensive sitemap.
The sitemap was a large deliverable, including pages in both the unauthenticated and authenticated experience as well as the corporate site and blog. For the navigation, we had several discussions where we sticky noted, sketched out, and created and reviewed quick wires to help demonstrate ideas for what a cohesive megamenu could look like in desktop, tablet, and mobile. Other site screens necessitated sketches, wires, reviewing creative, and consulting on the design as we progressed into the creative. We used InVision to quickly prototype on our designs and present to the client, iterating frequently.
How to solve for these use cases while
1. maintaining a cohesive component appearance and
2. maintaining an elegant error handling for the user if location services guessed wrong
– all necessitated discussion, sketching, and iteration of the sitemap, component library, and the UI over several months.
We created over 850 wireframes in over 6 different prototypes through rounds and rounds of design, which, alongside content and component design, defined creative design.
For creative design, we used component based design alongside templates in order to construct our pages. This necessitated a strong style guide.
44
people across 3 companies
5
rounds of design
850
screens
6
prototypes
350+
inVision comments
Impact
1.7 million
customers across Missouri, Mississippi,
and Alabama using one site
and Alabama using one site
262%
increase in online visitors YOY
$69 million
customer cost savings through service consolidation
$1.9 million
cost savings to the client
Final thoughts
Working on this project and interfacing with this client was an enjoyable experience. Having client SMEs all in a room during stakeholder workshops was vital to working with complex requirements from several legacy systems. Working on a site for a utility may not be conventionally "exciting", but the site and portal are tools that every consumer in the area served by this natural gas company has to use, which is worth a noble effort. Paying bills and checking usage can be frustrating enough - so we made this experience enjoyable to use.