Context

In 2017, Hurricane Harvey caused an unprecedented amount of damage in Houston and the surrounding areas. In the beginning, this project primarily centered around providing immediate web resources for those affected.

Goal

Spin up a disaster relief webpage to be prominently featured on NRG.com. Take a massive amount of links, phone numbers and other important information and incorporate it into a webpage that acts as a clear, concise guide for customers affected by the storm.

Background

At the time the storm hit, our office had closed and many of our team members had evacuated to other cities as a precaution. The rain, flooding and destruction was unbelievable. After the storm, in about an 8-hour period, the city went from disaster to recovery mode. The severity of the disaster meant that this was an emergency project and from then on it was all hands on deck. Lots of customers were reaching out to our call center in a panic to get help.

The NRG team was tasked with quickly coming up with a disaster relief page/resource hub to be featured on NRG.com. The project included collaborations across marketing, UX, digital, development and VP involvement for approvals.

Google Doc Resource Guide

There was a massive unofficial crowdsourced Google doc as a reference guide for all our info. This 16 page document contained vital information, such as evacuation info, accurate flood/weather updates, important numbers, road closures, and available shelters. Once we had vetted the information, I was tasked with organizing it into a more user-friendly format.

Brainstorming & constraints

The team had various Webex calls in which we brainstormed and talked about our timing and development constraints.

We started out by listing out what variables users could possibly be affected by. The audience was so varied in all types of ways. It was imperative this resource guide had to be accessible to everyone and anyone.

• Age: could be older, possibly not as internet-savvy

• Types of users: could be business owners seeking info on what to do if their businesses flooded, home owners, car owners, parents, people seeking food, shelter, seeking to volunteer, people seeking to donate money, etc

• Experiencing power outages: meaning limited cell phone and internet use

• Additionally, this needed to go up ASAP as it was time-sensitive information

Gathering ideas

There are significant benefits to following previously established patterns and then tweaking them a bit. Using standard design patterns reduces cognitive strain and if people are already familiar with how objects on an interface will act, it saves them from thinking about what to do next. Reducing the need for people to think too much was imperative due to the mental and physical strain Houstonites were experiencing.

We didn’t want to reinvent the wheel here and we were on a massive time crunch. Thus, part of my research included looking at effective, relatively simple, scannable websites containing large amounts of information in an organized manner. Two of the sites I looked at for design patterns were Craigslist and Wikipedia- very well known sites that successfully contain pretty much just about any topic under the sun.

Prototyping and implementation

Turning this into an easily scannable format was a challenge. I moved quickly to create a basic mockup containing all the links found in the Google Doc I’d been provided with. I decided to organize the links alphabetically at first but this quickly changed. After multiple iterations and several feedback rounds from the team and the project managers, the list was cut shorter and the more crucial items on top.

Additionally, as the recovery phase went on, we continued to evolve the resource page, adding a button to donate to the relief fund at the top, “skip to” features and a blurb about NRG’s efforts at the bottom.

Advocating for the customer

Throughout the process, there were discussions about how visuals were lacking. Some team members argued it was very link and text heavy and wouldn’t get approval from marketing upper management.

The business wanted it to have more imagery and iconography and to include a place for B2B content and a space highlighting NRG’s corporate efforts.

As an advocate for the user, I was against adding imagery. My point was that people might not have electricity or have reduced options for battery to power their devices, have sluggish internet or be viewing this on a mobile phone. We needed to be considerate and definitely tactful in our approach if we were to be building a resource hub.

Ultimately, we came to a compromise on the design and while the design that went live still did have a large image and a corporate blurb at the bottom, there were other options (not pictured) that were scrapped due to our discussions centered around this.

Reflection

Sometimes, UX isn’t pretty. Good human-centered design is collaborative and tactful and, most importantly, takes the context of the human at the other end into consideration.

Every iteration of the page had major copy, visual, and/or hierarchal changes that we would rearrange so quickly that I could hardly keep up. Despite it all, our team pushed through and in the span of 3-4 days, we were able to produce this page and push it live.

In this project, I pushed back when I felt it necessary, collaborated with cross-functional teams on a very time-sensitive matter, and I’m still incredibly proud of the outcome.

Outcomes and future iterations

Based off our site analytics, the NRG Resource Guide page was the highest-viewed webpage on NRG.com in 2017.

A “2.0 version” of this project ensued. NRG Storm Center is a continually updated microsite based off the same goals that our NRG Resource Guide project.