Powering Change in the UK.

ESB Energy UK 


  Best Energy Site
- User Research 
- UX 
- UI 
- Design System 
- Front-End Design

- CMS: SiteFinity 13.1 
- ASP .NET Core ASP .NET Ajax 
- Net Core 2.1 ScrollMajic 
- Microsoft Azure Cloud PaaS RackSpace 
- Visual Studio 2019 
- SQL Server 
- Management Studio Postman



In UK’s competitive utility market ESB Energy provides power to more than 100,000 homes each day. With 100% renewable electricity the company offers competitive prices and over 90 years worth of industry experience.


The company’s website is their most important platform and a key channel through which they communicate and engage customers. Whether they are at the acquisition, engagement, or retention stage, esbenergy.co.uk provides vital information and customer journeys. It also provides access to a customer portal where current customers can manage their accounts online.





With the company’s rebrand, the platform redesign gave us the opportunity to revitalize the digital experience and create a seamless experience for customers to connect with the company.
One particular challenge was to use the same platform to cater to both B2B and B2C clients. While the brand had to remain the same, the design system needed to support a distinct visual expression and tone of voice for the different user groups.

01. Overview & Summary


360° Digital.
100% Effective.


In order to realize this opportunity, WONDR created a 360° digital experience that engaged, educated, converted and empowered consumers. Setting the ESB Energy as a digital-first experience allowed the business to do so in a cost-effective and innovative manner.

02. Defining the User Experience


Business Clarity.


The initial phase focused on planning the design system and developing the assets to create consistency across the product site, acquisition funnels, and customer portal. Our team reviewed the information architecture, navigation, and content strategy and mapped out the user journeys to make sure user and business needs were met.



Information Architecture



Low UX




Working with rapid prototyping, we were able to mock-up the entire experience and define all the elements needed, from colours, styles, and buttons, to components, templates, and flows.







03. The Design System


Maximum Detail.
Maximum Flexibility.


The new design system is structured and flexible at the same time, ensuring the platform is consistent throughout and while also meeting the changing needs of the company to communicate in a wide range of subjects and channels.



Grid for Mobile


Grid for Desktop









Icons Set



Without a strong performing portal, our call centre would be multiple sizes larger than it currently is.

Cian Haddock ESB Energy
Digital Marketing Specialist

04. Defining the User Interaction


Multiple Devices.
Singular Experience.


Customers interact with ESB Energy through many channels and devices, including web, mobile, and tablet. Understanding why and when users move from one channel to another helped WONDR to design smooth and consistently on-brand transitions.



Mobile landing page.


Tariffs display.


Customer Portal / Explore & Quote

Homes Served


Quote Process Completion


of Customers use Portal

Find Out More

If you would like to learn more about the ESB Energy project or speak to us about a commission please contact:



Arnotts eCommerce