Pipes and structures of an oil refinery
Analysis: Using Storytelling to Transform Energy and Utility Websites
Storytelling is an essential element to conveying brand identity that can be leveraged by energy companies through the use of various design elements to set a warmer, more personal, human tone to the website.

Analysis: Using Storytelling to Transform Energy and Utility Websites

Companies in the energy sector are responsible for providing essential services that are the driving force behind modern economies. The impact the energy sector has on everyday life is so powerful that everyone: journalists, regulators, shareholders, customers, the general public, and prospective employees, regularly engage with energy companies. Most of the time, their website is the first point of contact.

As such, the importance of establishing a strong online narrative for these companies cannot be understated. Energy companies strive to communicate messages of trust, reliability, corporate social responsibility, the quality of their products and services, the scope of their operations, and their qualities as employers. Communicating a strong and positive brand identity and mission through various visual design elements is key.

1. Company History

Many firms in the energy industry have a long history, oftentimes employing several generations of family members and having an impact on the nation as a whole. Newer firms are history in the making: they can tell the story of what came before them and how they were established to meet the energy needs of customers for years to come. Not only does this storytelling position add legitimacy to the organization, but it also cements the company firmly into the fabric of the nation’s history, creating an intimate connection with citizens.

Husky Energy Logos over time


For instance, on Irving Oil’s website (a client of OPIN’s), they chose to present their company’s history as a series of “Historical Firsts”. This tells the brand’s story while positioning the company as a consistent innovator in the past.


Irving Oil History Page


Making the connection between past and present is important too: on Irving’s front page there is currently an announcement celebrating the first electric vehicle fast charging station in New Brunswick, making it clear that Irving is a company that will continue to innovate well into the future.

Irving Oil Home Page


Certain design elements are becoming increasingly popular among energy companies to communicate their company’s history through their website:


Timelines are a useful way to present the company’s history in a succinct manner. Writing dense paragraphs of text about the company’s history is high in cognitive load for the user, creating another obstacle to engaging with your brand’s story. Timelines present information in bite-sized chunks, allowing users (the majority of whom skim pages, according to recent research) to digest information more efficiently.

When it comes to timelines, the more interactivity, the better. Clickable links to more detailed content, a good mix of multimedia (enlargeable images, videos, and historical documents) and a clean design are all elements of a strong timeline feature.


Suncor Energy History Timeline from their website


Historical Photographs

Esso Employees 1980s

Generous usage of historical photographs can add an additional layer of authenticity and legitimacy to the brand. If presented in a logical manner, they tell stories all on their own about the lasting legacy of the company and put a human face on those involved in the company’s success over the decades. Additionally, there is the added benefit of inducing a warm sense of nostalgia in site visitors that will help connect them further with your brand.


Husky Energy Company History Photograph


Presented in design elements such as slideshows, hero banners or timelines, historical photographs can leave strong impacts on visitors the website.

2. Strong Visual Impressions

Hero Banner on Bruce Power Site

Bruce Power’s website

As the above hero banner on Bruce Power’s website states, oftentimes less is more. This is particularly true with storytelling through digital media. There are a number of visual design elements that can truly bring stories to life without much complexity, but they must be employed strategically.

Journalists tell stories for a living; let us deviate temporarily to take some inspiration from them. Take a look at how the front page of my local Ottawa Citizen has changed over the years:

Copies of the Ottawa Citizen from 1900, 1980 and 2018, illustrating the importance of images in storytelling

This admittedly extreme example shows a stark transformation. Today, people are far more inclined to skim content than read through it. The strategic use of text, images and animations can draw the visitor’s eyes to the most relevant content, faster. The objective is still to tell the story, but in a way that appeals to human psychology to drive engagement.

Emerging trends in web design take this into account, and should be leveraged by energy companies to tell their stories.


Hero Banners

Shell Oil Hero Banner

Shell Canada’s website

Hero banners are the first visual components that users see when landing on a website’s homepage. It is generally a large image that occupies a sizable screen estate featuring eye-catching statements, bold visual elements, and oftentimes imagery that reflects a location’s landscape, its people or special events.

From a business perspective, this visual component can serve as a way to attract users to the website, showcase a location’s appeal, and generate leads for new business acquisitions. From a user’s perspective, a hero banner is the first impression that they receive upon arrival, which in turn sets the tone and mood as they progress throughout the website. For example, a user enters a website where immediately they see a scenic overview of a landscape or the local gas station pump. In both examples, whether it is dependability or trust, these images set the tone and mood of the website giving the user a strong first impression.

 Husky Energy's About web page

Furthermore, by shifting the focus towards a user-centric approach this component can be most effective at conveying the organization’s brand and messaging,  especially when paired with the right content and calls-to-action to help create a user experience that reflects the company’s values and beliefs.


Imagery of Husky Energy's Website

Imagery typically consists of photos but it can also take the form of custom illustrations: visual elements that are used on the website to help bring the content that is being displayed to life. The selection of images to be displayed on the website can truly make or break the user experience as the goal is to expose the user to the brand, message, personality, and tone. As a result, imageries that are successful at conveying these nuances can help to immerse the user into the journey.


Hero Banner on Uranium One's Website

Uranium One’s website

Typography is a powerful design element that can be used to make impactful statements that give users a snapshot of the brand’s mission, values, or service offerings. For example, Uranium One’s use of typography in the above hero banner uses a modern font that implies a forward-thinking organization. The blue font colour of the word “clean” makes it stand out immediately to the user, leaving a subconscious association between the brand and the concept of clean energy. The font itself is clean - the use of a square, sans-serif font was a conscious decision to support the message. The large font size and capitalization makes the statement impactful without being overwhelming due to the slight transparency in the text.

This is merely one example to demonstrate the importance of strategic typography on a website and the impressions it can give. Strategic typography should be used on all sections of the site to support the brand’s story and convey the intended message in a succinct manner while appealing to users on a subconscious level.

3. Employee Stories and Corporate Social Responsibility

Story on Imperial Oil's Website

One major objective of energy company websites is to attract strong talent to the ever-growing industry. Humans have a natural desire to feel like their part of a story, not a faceless corporation. Energy companies have countless employee stories that can be drawn upon to give visitors a glimpse into what it would feel like to be a part of the brand’s story. Leveraging these through strategic web design will drive engagement, and with it, recruitment.

Employee stories also reflect the values of the organization as a whole to customers and the public. Encouraging employees to submit stories, or embedding social media images and posts are effective and organic ways to produce this valuable content.

Irving Oil Company Stories

The majority of energy websites include “Sustainability”, “Community Involvement”, or “Corporate Social Responsibility” as elements of their main menu navigation. This is a key part of the brand’s story, particularly for companies that face frequent public scrutiny.

Irving Oil Corporate Social Responsibility

This image selected by Irving Oil on their CSR page is an excellent example of telling a story through the use of imagery. It represents the mutually beneficial coexistence between the company and nature or society as a whole.


On Shell Canada’s website, cards have been used to showcase the company’s commitment to sustainability in an easy-to-digest manner. Popularized by the emergence of Material Design by Google, the card component has seen a sharp increase in its usage across many web and mobile platforms that are not necessarily affiliated with Google products.


Cards on Shell Canada's Website

The card component is a means of organizing various data into sizeable chunks so the user can quickly gain an understanding of the content and what they can reasonably expect should they click on it. Oftentimes cards are paired with imagery to give the user a visual representation of what the card entails.

The Vision

The most important story for an energy company to communicate is its vision for the future, its purpose for existence. Communicating the value the company provides to society currently and the innovations it intends on making in the future is essential to engaging the online audience.

Shell Canada Energy Future


Imperial Oil About Energy Page



In order to create impactful change, a website must shift its focus from a purely business mindset and move towards a user-centric approach. By placing the user at the forefront, we can focus our efforts on truly understanding what problems currently exist today and how we as experts within our domain can help resolve these issues.

Creating a digital experience rich in pathos for website visitors will help them feel like they are a part of your brand. Telling stories through visual design is the most effective way of accomplishing this. Design elements such as hero banners, slideshows, cards, imagery, typography and various multimedia content all support the compelling narrative that will entice and get users excited about why they should continue to engage with your organization.

At OPIN, we take this powerful interpretation of human psychology into account for all of our client projects. If you'd like to learn more about the services we provide to companies like Irving Oil, feel free to reach out.

Become an expert. Learn how to make a crucial design choice: Mobile-First vs Mobile Responsive design.
Navy blue plain colour background

Stephen has built a marketing career on his belief that even the most complex problems of the digital age should be resolved by starting from first principles, not chasing trends. This approach helps Stephen provide insights to our readers about the forces that are reshaping the digital landscape.