Year
2018-2019 (6 months)
Client
EON Energy
Role
UX Design

Redesigning the EON UK website

To create a new design system for the UK website including new components, templates, a site map and design guidelines that are flexible enough to be rolled out to other regions.

The Results

 

+33%

reduction in bounce rate

+22%

increase in click-throughs to enter the smart meter booking journey

+50%

increase in dwell time due to increase in page engagements

 

54

Components

19

Page templates

EON Web Deliverable.png

Project Goals

Reduce
cost to serve (decrease call centre costs & increase digital efficiency)

Encourage
up & cross-selling of energy products other than tariffs

Increase
acquisition leads from businesses & cities

 

Enable
content authors to create & update pages more efficiently

Improve
NPS & brand perception

Shift perceptions from energy supplier to energy solutions provider

Discover & Define

 
Journey.png
 

JOURNEY MAPPING
uncovering opportunities by using pre-existing research taken from user & stakeholder interviews

Component.png
 
Prototype.png
 

COMPONENT MAPPING components, content and functionality needed to fulfil the business and user requirements

TESTING
Tree-testing for the business site-map & Usability testing for the residential navigation

 

User Insights

Using a combination of pre-existing research, personas and web & SEO analytics, my colleague and I mapped opportunities for the users. There are two customer audiences:

Residential & SME
- ‘task’ focussed i.e. I want to play my bill, I want to get a smart meter
- want dealing with energy providers to be as quick, pain-free and ‘in the background’ as possible. 
- want sophisticated self-serve options. 
- not familiar with energy solutions other than tariffs and smart meters.
- want energy providers to be proactive for their custom (not reactive)
- cost is king, comfort and eco-concerns are secondary

Business & Municipalities
- ’needs’ focussed i.e. I need to reduce carbon emissions, I need to secure supply, I need to reduce costs etc.
- require a bespoke offering, with a dedicated account manager 
- need be affiliated with a credible business
- time-poor 
- many stakeholders and decision makers with differing agendas
users to the site are not the decision makers
- need to stay on top of the energy market news
- keep up to-date on Linkedin regularly 
- want energy providers to be proactive for their custom (not reactive)
- main goals are reducing costs and reducing carbon emissions (CSR)

EON Web Discovery.png
 
 

I collaborated with the lead UX designer to update the business site map, utilising research from previous rounds of card-sorting, tree-testing and stakeholder/user insight. I also undertook tree-testing and navigation usability testing, making recommendations based on the insights gathered. 

EON Site Map.png

Design

 

Working in UX/UI teams over 2 week sprints, involving content writers & developers, I designed and delivered multiple components, templates & contributed to design guidelines. 

 

Combining business and user needs

Designing components that could be used to: 
- Cross/up-sell energy products outside of the standard supply
- Increase the number of leads from large corporations & cities
- Showcase EON as a credible energy partner for large corporations & cities

EON UX Scamps.png
 

Promoting products & services

A selection of components that can be used to promote product and services across the residential and business websites

EON Product Listings & Content.png

Education about products

A selection of components that can be used to educate customers about products and services, via videos about the products, via the ability to download resources or via the ability to easily compare similar products to each other to reduce decision friction.

 
EON Product Education.png
 

Tailored communications

The ability for business customers to self-identify in order to receive a response specific to their type of business or need, as well as the ability for all customers to communicate via the method most suited to them.  

EON Contact.png

Social Proofing

A selection of components that can be used for quotes & testimonials from customers and industry experts to showcase EONs trustworthiness and credibility. 

 
EON Social Proof.png
 

News & Articles

A selection of components that can be used to build a content blog about innovation and industry news suitable for the business customers, and social/PR content and energy advice for residential customers.

EON Content hub.png

Deliver

Specs.png
 

TECH SPECS
writing functional requirements for components

Wireframe.png
 
Design.png
 

TEMPLATES
creating a series of defined page templates of components

DESIGN GUIDES
design principles, design & copy guidelines

 

I consulted with the content strategist & UI designer to put together guidelines for the templates and pages to enable EON content teams to create consistent copy & designs across different pages within the site.

I took part in weekly check-ins with the developers to discuss the functional requirements for the components, before finalising designs and writing technical specifications. 

EON Tech Specs.png
 
 

I contributed to the creation of the page templates alongside content writers.

EON Templates.png

Deploy

 

Working alongside the strategists, content strategists & UI designers to create the new pages which would guide the content authors on how to choose components, structure pages and write copy.

The insights which guided the content were:
Residential -fulfilling needs specific to the user, ie. whether they are eco-conscious, need to save money, or want comfortable living etc.
Business - choosing an energy partner that is credible, innovative & authoritative in the energy solutions space.

 

Promoting products

Pages that educate the customers about their energy products and services, showcasing innovative products, benefits, service of EON, costs and ease of purchase, with some product pages tailored around specific personas (i.e. eco-conscious or personal comfort).

EON Product.png
EON Product Promo.png
 

Showcasing EONs credibility

Pages that inform the business customers of how other businesses have benefited from EONs products and service, including case studies and testimonials from a variety of different scales and industries.  

The content chosen also helped businesses to identify which solutions may or may not be suitable for them based on the scale and types of businesses used in the case study (insights from user testing).

 
EON Credibility.png
 
 

Energy solutions by user goal

Pages which enabled the (business) user to search for the solutions they needed, by the problem they needed to solve or goal they needed to achieve, as opposed to searching by product which they often are unfamiliar with (which is a habit discovered through user research). 

EON Solutions.png

Key Takeouts

.

 

Recognition for my contribution
Was promoted as a result of my contributions to this project, as I proactively took charge of UX responsibilities from a UX lead & a senior designer when the team was in a state of transition.

Aligning stakeholders
The importance of consistently reminding all stakeholders (internal & client) of the ‘north star’ and project purpose to ensure the primary objective stays in focus for the duration of a long project.

Staying flexible and agile
As many things can change during a project, the importance is to keep an attitude and way of working that is robust but adaptable.

Other projects

BRITISH BUSINESS BANK

Website design

EON ENERGY

E-commerce component library

COSTA COFFEE

Website redesign (pitch)

Get in touch