Enabling customers easier access to critical information when the lights go out.
Endeavour Energy is an energy distribution business that serves more than 2.7 million customers.
They own and operate infrastructure that takes energy from its source to homes and businesses across large areas of regional and metropolitan New South Wales. Some of these areas are prone to extreme environmental conditions such as bushfires, flooding and high winds. Other areas include demographics where English is not necessarily the first language.
The company’s website was originally created to serve as a source of information and support resources for its customers, suppliers, contractors and employees.
In recent times however, the company’s customer support teams were receiving increasing volumes of calls and support tickets relating to issues where customers couldn’t find the information they needed or complete tasks.
The company decided to move its website to Squiz’s DXP platform to help it manage and update the site more easily so we set out to help them overhaul the website and its contents and provide an easier, more intuitive experience for its customers as well as help to create a governance framework to help them manage and update the site more frequently.
One of Endeavour’s objectives was to reorganise the content of their website into a customer-facing public site and then later develop an internal-facing intranet style site for its employees and contractors.
I worked paired with another designer as a UX consultant on this project. While my colleague worked on redesigning key screens in the website, my focus was around solving the findability and discoverability issues with the content and information architecture of the website as well as to identify key usability issues and provide recommendations.
This project included:
Content review and audit with recommendations on how to consolidate
Creation of exemplar content - re-written examples of key content pages showing how they could be written in a way that’s user friendly, easy to understand and targeted to the needs of the intended audience
Information architecture review, design and testing - card sorting and tree testing (using Optimal Workshop)
Stakeholder management with regular checkpoints with client stakeholders to provide updates, present findings and make recommendations
My role
Process
Heuristic evaluation and data analytics
Using a light heuristic review, I aimed to highlight some key UI issues to address in the redesign. There were several obvious issues with accessibility such as images lacking alt text, missing ARIA keyboard selections and tables missing “th” labels meaning assistive technologies such as screen readers would not be able to interpret them. There were colour contrast errors with the company’s bright green frequently being used on a white background. Pages lower down in the IA were especially hard to navigate with little visual feedback to let users know where they were and it was challenging to form an overall mental model of the site’s contents.
Content pages generally lacked visual hierarchy and heading structures with little emphasis placed on important tasks or content and links to external pages often had no indication they would take the viewer away from the experience. I also found widespread use of industry jargon and acronyms which meant labels were hard to understand and the information scent was hard to follow.
The homepage featured an auto-scrolling carousel containing key CTAs to the site’s key features - such as the outage map showing timely outage information to people without power) but hotjar heatmaps showed it caused widespread “banner blindness” with users frequently skipping over it.
Generally, the site was challenging to navigate with no visibility of lower pages in the IA, no breadcrumbs or system for timely notifications or statuses.
Looking at usage analytics revealed high bounce rates for key content pages, the most visited pages - for me, most illuminating was the “How to contact us” page was the fourth most visited page on the site, there are several contact and feedback forms already such as complaints or to report streetlight outages but the data showed these had low traffic and even lower completion rates.
Endeavour Energy’s previous homepage was challenging for customers to access key information they were looking for.
Content and SEO
I began reviewing the site’s top 10 most viewed pages in more detail and quickly found some glaring items to address. The content was typically dense and hard to read, scoring very high Flesch reading grade scores of well over the recommended grade 8 for the general population. This meant the content would be difficult to read for over 80% of the population.
In Endeavour’s case, this issue is exacerbated as we knew a large number of their customers use English only as a second language. I found a lot of the content was overly wordy and lacked important context, paragraphs to set the scene or provide base knowledge and explanations for industry jargon were often missing. I spotted many cases of overlapping content, making recommendations to cull and consolidate - if you want to make information easy to find, you have to look at information needs. Aim to address those needs in one place and using labels that make sense to your audience is crucial.
I found many examples of pages lower down in the IA with very light content. This could all be consolidated into parent pages using a clear heading hierarchy. In all, I reviewed around 100 of the 498 pages, documenting them in a spreadsheet with recommendations on what to keep, remove, consolidate or update.
The IA was more than 5 levels deep with most of the top pages sitting at level 3. Most pages lacked metadata, used duplicate page titles and did not include meaningful keywords or meta descriptions causing low rankings in search engines. These issues would all come into consideration when we came to looking at a new governance framework.
To help Endeavour Energy’s web team get a better handle on writing more readable content, I selected 5 key pages and wrote some exemplar content they could use to model their pages on. For these, I focused mainly on using plain English language without complex sentences to keep the Flesch reading scores below grade 8 and reduce instances of jargon. When we had acronyms, it’s important to spell it out in the first instance and I used chunking to make the information easier for readers to take in and understand.
Information Architecture (IA)
To address the findability and discoverability issues with the navigation, I began with a card sorting exercise using Optimal Workshop. This would give me an idea for how customers might categorise a cross-section of the content from across the website. This provided some clues and a starting point for a redesigned IA. I used the opportunity to include some survey questions too as a way to gather a few more insights from customers on what they felt were key issues with the site.
This was a typical response:
Put the customer first - make the naviation intuitive, and do not have a gazillion subsequent clicks for poeple to follow to find what they want.
Also use design / visual to make navigation easier both on laptops and on mobile devices
I proposed a new IA structure based on the card sort findings and ran tree-testing to understand whether this new design made better sense with mixed results. Tree tests ask participants where they might find certain information using an existing IA label structure. We asked participants where they would find information across 10 tasks.
Paying close attention to first-click data and directness scores, the first test showed where we could make some adjustments before a second round of testing showed marked improvements.
Similarity matrix showing strong card pairings and clusters of pairings - these clusters are shown in blue and indicate which content participants felt should be grouped together
These dendograms show how much agreement participants had between the grouping of similar content and gave clues as to how they thought about the labels. I used the "Best merge method" for this as we only had 33 responses to work with
Pie graph visualisations like this show where participants clicked during the tree test as well as where they indicated they would find the information in the task. For this one we asked where they might go to report a faulty streetlight
The proposed top level IA design - I decided to introduce a "utility" navigation menu to house the company-centric information and used the main navigation to house the more customer-focused information
What we learned
Card sorting is a great way to learn how people think and categorise different types of information. It shows you themes and categories that may or may not align with how things are currently organised in a website. Using this data as a base really opened our thinking.
Rather than trying to tree-test the existing structure and making small incremental changes, the card sort revealed the complete mental models people had created in a more holistic sense.
The final round of tree test data provided our client with confidence that this new IA structure would be much more intuitive for their customers to find the important information they need.
The content audit provided clues and recommendations on how to consolidate and reorganise it to address clear information needs and then map it to the new IA effectively.
The governance framework guidance provided a set of guidelines and introduced a more audience-centric thought process behind new content-creation.
Project overview
Company
Squiz
Client
Endeavour Energy
Role
Senior UX Consultant
Year
2021