Smart Meters

Built on: Figma

The project.

Within this project I looked at redesigning the UI and UX of the page which promoted and educated customers surrounding smart meters.

I was openly communicating with stakeholders to manage expectations throughout the entirety of the project. I also worked side-by-side developers and the brand team to combine our skill-sets and provide the best solution. Balancing business and customer needs to provide an excellent user experience while still prioritising the business’ needs of annual smart meter installation targets.

Problem Areas

Accessibility standards

This page makes it very difficult for users to access key information to do with smart meters, providing 4 videos with said key information in them. While also copying written information, the page doesn’t use the digital real estate to it’s full potential and showing information the customers actually care about.

Static content

One problem area is that, no matter where the user is within the process of getting a smart meter installed, on the current implementation the content presented on the smart meter page is the same.

Why would a user with a smart meter want to know why to install a smart meter? This page losses value and could be tailoring relevant information for the user, wherever they are within their journey of installing a smart meter.

Large amounts of information to do with
smart meters

There is so much to learn about smart meters and can be overwhelming for people interested, and especially off-putting for those not interested but needing to install one due to government mandates.

Competitor Analysis

1. Pros, Cons & Neutral

I took direct competitors in the energy sector and looked at how they presented information to do with Smart meters. From here I deduced lists for each competitor, including; pros, neutral features and cons.

2. The market as a whole

From there, I looked at Strengths and Weaknesses in the market as a whole.

3. Opportunities

Then, I decided ideas to magpie and adapt, and ideas to fill the gaps within the market.

The market as a whole

Strengths

  • Pages often have good CTA placement and copy
  • Pages often informative and useful
  • They effectively communicate a smart meters value
  • Considerations for different types of customers
  • "Path to Zero" strong selling point
  • Octopus - upfront on savings amount "~£100" and installation fees (no one else does this)

Magpie opportunities

  • Upfront on amount saved
  • Strong CTA placement and copy
  • Mention of Net-Zero
  • Considerations for different types of customers
  • Strong communication of smart meters value
Opportunities

Weaknesses

  • Pages are often very long
  • Pages have an excessive use of imagery
  • Many pages contain videos - restricts access to information
  • FAQs are often very far down the page
  • Some pages lack to mention the monetary savings of smart meters
  • Presentation/format of information can get repetitive
  • Some pages are not aligned within a users natural scanning of the page

Market gaps to fill

  • A concise page with only the information that is needed
  • Potentially splitting the information into two pages/tabs
  • Don't display videos, if needed present them with a "video summary" dropdown
  • An easier way to access the FAQs
  • Communicate stronger they save money
  • Find a way to present information outside traditional formats
  • Correct formatting/alignment on a page
  • Alignment of content

Forums & Articles

Furthering my research I wanted to learn how a
customer feels about smart meters.

1. Reddit, Mums-net & more

Here I looked at the publics opinions of smart meters, why they were hesitant to install one, why they liked having one or issue while owning one.

2. News articles

News articles can be very influential on public opinion. So I looked at how public news articles were talking about smart meters and listing overall pros and cons from each article.

3. Opportunities

Then, I pooled these concerns and positives surrounding smart meters into a list of potential pieces of information to include into the new smart meter page.

1. Reddit, Mums-net & more

I noticed themes with peoples’ concerns and grouped them:

  • Issues surrounding information
  • Issues surrounding payment
  • Smart meters not working
  • Consumers not understanding the value
  • Consumers not trusting companies

There were also some positive themes I noticed:

  • Automatic meter readings
  • Potential money saved
2. News articles
3. Opportunities

Reviewing the current page

Strengths

  • Good placement of CTAs.
  • Initial benefits short and sweet - easy to scan.
  • The videos were valuable, if watched.

Weaknesses

  • Videos made valuable information inaccessible.
  • Written benefits didn’t fully communicate their value
  • Company metrics may give off the wrong motivations behind pushing installations.
  • ‘Our installation promise’ reads as T&Cs for a customer, and provides too much cognitive load.
  • UI of the page felt dated and had formatting problems. Issues with the copy being too wordy

Problem area: Static content

Users are presented with the same information once they had their smart meter installed. This isn’t a pleasant user experience, feeling as though your needs are no longer met.

Safe to say change was needed, I wanted to make users feel as though they were supported every step of the journey.

A user without a smart meter

A user with a smart meter

Design iterations

Iteration 1: Tabs

Within the first iteration I wanted to create an experience where the user could easily access all information to do with smart meters, without scrolling hoping they’ll find what they need.

A large issue within the competitive analysis was that smart meter pages were incredibly long, to allow users to still have access to all this valuable information, without giving them too much to search through - I took the approach of using tabs to group information.

Iteration 2: User States

The next idea was to have the single URL be responsive to the step in the installation process the user was in.

Only showing information when it was relevant. Reducing cognitive load and solving the problem area of a large amount of information surrounding smart meters.

Working with the development team, here are the user states we could determine:

  • Logged out
  • Customer does not have a smart meter
  • Customer has booked and is waiting for an installation
  • Customer has a smart meter
  • Customer has registered and is waiting to hear if their property is eligible
  • Customer has registered and their property was not eligible

Here are some considerations I made for user states:

Customer without a smart meter

  • Make the page easily scannable.
  • Include information to reduce customers anxiety
  • Work with the brand team to angle the tone as to not come across as ‘upselling’.

Customer with a smart meter

  • Rather than showing a customer why to get a smart meter, I wanted to give information on what to do with one, now it’s installed. Providing a more supportive approach.
  • Something which was important here was changing the header images and UI above the fold, so in different states users could quickly understand they were getting shown new information.

Customer waiting for a smart meter
installation

  • Appointment booking and waiting around can provide an area of anxiety for the customer. So I wanted to provide as much information as I could to ease their mind.
  • While in the meantime providing information to help them get the best use out of their smart meter once it arrives.

Further refinements: the installation process

I wanted to make the installation process easy to understand with 3-4 simple steps to getting a smart meter installed.

Round 1: Simple, but not mobile responsive and little room for information.

Round 2: Slightly more complex, but responsive and more room for information

Desktop
Mobile

Round 3: Sometimes simple is better! Responsive and room for lots of information.

Desktop
Mobile

Iteration 3: Refining the designs

Myself, the UX team, developers and product owners had all agreed on this solution of user states - Once I had received all the copy and gotten approvals from legal, PR and brand team, the final step was to refine the UI

Leading us to our final designs.

The final designs

User without a smart meter

User waiting for an installation

User with a smart meter

Considerations

User without a smart meter

I wanted to make this page simple and easy to scan and tailored content towards customers who wanted to know how a smart meter helps them.

With 3 simple steps to help the customer understand that installing a smart meter is easy.

Re-iterating the CTA with a brief overview of how a smart meter helps, incase a user quickly scrolled through - they’d still get relevant information

FAQs answering some questions / anxiety from my research.

User waiting for an installation

I wanted to give users everything they needed to prepare for their appointment.

Also, changing the FAQs so they were relevant to the user at this point in their journey.

User with a smart meter

I wanted to give users useful information on how they can get the most out of their smart meter.

Again, changing the FAQs so they were relevant to the user at this point in their journey.

Niche user states

User with an ineligible property

In the rare case when a user has an ineligible property, we provide some copy surrounding why this may be the case.

In the current designs there is no feedback for the user on why this may be the case.

The CTA is here so users have the option to re-register if they think something is wrong.

User waiting to hear if they are eligible

In some cases, a user will have to wait to hear from us regarding the eligibility of their property.

Here we just provided some copy to give users a clearer picture of what’s happening.

Takeaways

What I learned

  • How to effectively communicate with stakeholders and manage expectations.
  • The importance of agile ceremonies and how to work within them as a UX
    Designer.
  • How to work with a brand team.
  • To stop worrying about ‘the perfect solution’ and push for incremental changes to
    better measure and adapt the solution.

What I’d do differently

  • Conduct user interviews, to get more insight into how people feel about smart
    meters.