E.ON Redesign | Component Library & Homepage Design
Brief
Engine was tasked to design a component library for eonenergy.com’s residential and business sites.
As part of a multidisciplinary team of UX, UI and content we worked in two-week sprints at a time to deliver a component library for eonenergy.com. I designed the components with consideration to content, interaction design, brand principles and the two end-users in mind; E.ON's content authors and users of eonenergy.com. Each sprint I designed and presented WIP work to clients, stakeholders and developers. The final deliverables were 57 components and page templates, including a specification documentation for design and interaction build.
Client
E.ON Residential and Business
THE TEAM
2 UX Designers; 2 UI Designers; external web development agency; client stakeholders
DESIGN
sketches
Each sprint I was responsible for designing the 3-4 components and the interaction design specification for the build. The first week of the sprint began with the sketching of the component, identify how the components work for both mobile, tablet and desktop view.
work in progress sessions
I presented a weekly WIP session to the clients and dev team of the components in design, how they work on templates, the designs for small and large view devices and interaction design.
COMPONENT DESIGN
SOCIAL MEDIA FEED
The purpose of this component is to promote and publicise social media content from E.ON. For this component, E.ON wanted to pull content from social media platforms which would be relevant to their business customers. I began by identifying the social media platforms E.ON would use and how that content can be previewed on a social feed. The social media feed had to showcase the content of the social post which often contained media and it had to work fluidly across device sizes.
TIMELINE
To communicate the number of steps and time it takes to acquire/implement a product or service. For example; getting a smart meter, installing solar panels, installing street lighting into cities etc. Each element of the component is optional, the image, heading, abstract and arrow to make the component as versatile as possible.
residential product listing
The Residential Product Listing allows users to simply and clear read a short snippet of content on E.ON's products and services. This component provides a variety of options in how it can be used dependant on the amount of content is required.
Components
Below is a selection from the 54 components designed for E.ON, each component was designed giving consideration to three device sizes.
E.on Residential sitemap
Through user and stakeholder insights the sitemap for the residential and business sites were updated.
delivery
At the end of each sprint, the deliverables from Engine were Technical Specifications including the design and functional requirements for the build. Templates to show the page types and Design Guidelines this included design and experience principles and content guide.
design and Build specifications
This documentation provided the external engineering company the details about the design (colours, size, font) and build (transitions and interaction) documents.
PERFORMANCE
Impacting the top of the funnel
The new smart pages are more effective at driving customers to sign up for a smart meter. 22% more customers clicked on the CTAs to enter the smart meter appointment booking journey (13/01/19-28/02/19 vs s13/01/18-28/02/19)
Driving organic traffic
The pages that are have been redesigned with the new component library are easier to find through organic search than legacy website pages. This is the result of introducing new navigation, restructuring URLs, reviewing the keywords and revisiting page and CMS structure - driving 25% more traffic to the site from organic search (13/01/19-28/02/19 vs 13/01/18-28/02/19).
Improving customer experience
Engagement with solutions content has increased, evidenced by how customers are engaging with the boiler pages. Dwell time has doubled and the bounce rate has reduced by a third, measure over 12 months.
content design
About Us section
Below are examples of the pages I designed for the ‘About Us’ section of the E.ON site. Working with a copywriter and liaising with the stakeholders from E.ON, I identified changes in the IA of this section, how the content would link to specific pages and which components to use.
HOMEPAGE RE-DESIGN
Once the component library was delivered and built I was briefed to work on the redesign the homepages for E.ON Residential and Business sites. I worked with a UI Designer and two Creatives on this project. My role was to identify the hierarchy for the content, the message that we wanted to get across and key content that intrigues users about E.ON this was based on data from analytics and call centres.
The components used on the Homepage are made up of components created called the Interactive Need components which are used to communicate important information and provide breathing space between more visual components.