Blog

Don’t Let Your Utility Website Become a Monstrosity, 5 Mistakes and How to Fix Them

It’s almost Halloween! In honor of the spooky season, we’re comparing 5 scary website mistakes to famous monsters in popular culture and giving you ways to fix them.

1. It’s Alive! Don’t Create a Patchwork Utility Website

A haphazard collection of stitches and bolts, Frankenstein’s monster terrified nearly everyone he encountered. His piecemeal appearance was horrifying to look at, and it was difficult to see the human form he was supposed to be modeled from. Similarly, websites can become monsters of their own. A site may begin to look Frankenstein-like when:

  • Old content references upcoming events that happened a long time ago
  • Different designs of the company’s logo appear throughout the site
  • Embedded videos no longer exist on their hosting site and consequently give an error message when they are clicked to play

Patchwork on electric cooperative websites is frustrating to use and shows a lack of attention and care that reflects negatively on the cooperative. If the cooperative is unprofessional with their website, members may think they’re unprofessional with their customer service too.

Solution: Unify Each Element of You Utility Website

A consistent appearance and regularly maintained content are important to creating a utility website with a unified message. Deciding on a color scheme is a great place to start. Choosing a palette of complementary colors creates a pleasing viewing experience for visitors.

The medium dark shade of green-cyan of Cloverland Electric Cooperative’s website, combined with the white of their logo, emanates out to the rest of the site, giving it an attractive consistency all the way down to their elegant, illustrated footer. Everything from the historic hydro plant to the Mackinac bridge connecting Lake Huron and Lake Michigan are tinged with shades of green from their logo, contrasting sharply against the dark outlines of the surrounding environment. This evocative imagery of their service territory, combined with their brand colors, presents a natural and holistic vision.

Cloverland Electric Cooperative in Dafter, Michigan opted to integrate both a data visualization banner on their homepage to simplify who they are by the numbers as well as a custom footer illustration that gives subtle nods to their community while simultaneously displaying civic pride.

2. Sharp Teeth and Pale Skin – Stay Away from Stock Photos

Count Dracula had icy pallor skin and an aristocratic air that was polite but insincere. He could be unapproachable and aloof, sealed away in his castle, deep in the Carpathian Mountains. Similarly, stock photos are impersonal and can come across as cold and corporate.

Solution: Use Custom Images to Create a Community-Focused Feel

Photos should be of familiar locations and friendly faces that your customers or members recognize. This creates a warm sense of community that comes with custom photography of your service territory, office, and staff.

Wiregrass Electric Cooperative in Hartford, Alabama opts to have the Powerful web team repurpose their monthly local stories from Alabama Living into their website to ensure content from each story is searchable, translatable, accessible and responsive.

3. Riding blind – Don’t Assume Your Website Visitors’ Needs

In The Legend of Sleepy Hollow, the ghost of the Headless Horseman roamed the valley, searching for his lost head. It’s not unlike trying to guess the needs of your site’s visitors – without the ability to see what’s going on, you’ll be riding blind and left in the dark.

Solution: Optimize Usability with Google Analytics

We can’t make informed decisions until we have data to analyze. With Powerful’s Premium UX Package, we’ll install Google Analytics and heat mapping software on your electric cooperative or other utility website to track visitor behavior. This produces valuable empirical data showing us which pages are getting the most use, navigation patterns, bounce rates, and much more! It’s the difference between knowing for certain and having to guess.

A heat map displays the most commonly clicked areas of the mobile view for Central Lincoln PUD in Newport Oregon.

4. Escaping the Zombie Apocalypse – Avoid Complex Navigation

In zombie movies, you need a good plan and a clear path to escape the shambling hordes of the undead if you hope to survive. Too many twists, turns, and dead ends is a recipe to end up zombie food.

Your navigation should be an asset for your utility website, providing a clear roadmap for visitors to get around. Few things frustrate visitors more than not being able to find the information they’re looking for or complete the task they set out to do.

Solution: Content Consolidation and Simple Global Navigation

When building your new website, our content strategists will optimize your site’s navigation by consolidating where possible. By eliminating redundancies, we’ll give your visitors a streamlined experience.

A fantastic example of an efficient and straightforward global navigation can be found on Northeast Power’s website. Unlike overly busy site navigations, they have 5 top level navigation items, so visitors aren’t overwhelmed. Hovering your cursor over any item reveals a dropdown menu going to a second level, but no more, which is considered a best practice. Lastly, when you navigate to any page, you’ll find breadcrumbs in the top left corner, further helping orient site visitors.

Northeast Power in Wayne, Nebraska shows off their July 2021 launch of their website, using our Ashland blueprint on a laptop as well as our mobile-first design approach with their homepage being displayed on an iPhone.

5. Howling at a Full Moon – Get Rid of Awkward Transformations on Mobile Devices

The light of a full moon is all it takes to begin the transformation from man to werewolf for these frightening mythological creatures. What was once a rational human becomes a snarling, rabid wolf.

Solution: Build a Flexible Website using Progressive Enhancement

In the web design world, graceful degradation is the practice of designing a website for desktops and then working your way all the way down to small smartphone screens, stripping away features as you go to accommodate less space. The problem with this approach is that the majority of online activity takes place on smartphones in the U.S. For this reason, we use the design principle of progressive enhancement, first designing your site for mobile devices and then adding enhancements as screen sizes grow larger. This ensures a high baseline standard for your website, no matter how your visitors choose to engage with it.

To see an example of this in action, check out Lassen Municipal Utility District’s new website and shrink the width of your browser window all the way down. You’ll notice a hamburger menu icon in the top left corner. Clicking on it will reveal the global navigation in the form of a space-saving sidebar. All the content on the page is formatted as single column, and the hero image is a still photo. Now, slowly expand the width of your browser window until it is full screen. Note that the global navigation appears at the top of the screen now that there is more space. The content now takes up 3 columns, and the static hero image reveals itself to be stunning video footage! This is progressive enhancement in action.

Lassen Municipal Utility District in Susanville, California utilized our popular Sellwood blueprint with the goal of making it easier to complete tasks with fewer clicks for their customers. They also integrated NISC’s SmartHub login directly on their homepage and built the mobile-first design to have the login be the prominent focal point for their site visitors.

Trick or Treat?

Visitors coming to your site are a lot like trick or treaters – they don’t know what they’re going to get until you open the door. While everyone enjoys a good scare or spooky read during the Halloween season, it’s best to avoid having your website be the source of everyone’s fright.