Award-winning B2B website for companies managing their energy use

UX, UI, Design Thinking, Design System Management, Interaction
December 2016 - June 2017
The Mission Statement
Create a scalable marketing website that provides organisations with end-to-end solutions to help them better manage and control their energy usage.
A Design Thinking workshop to kick-off our relationship
My role prior to this involved creating personas and the proposed user journeys of target customers. On the day, I was a facilitator looking to provoke thought and encourage all stakeholders to participate in active discussions. From Centrica's perspective, their ambition was to create a website that generated new B2B customer engagement and leads.
Persona cards printed out ready for the design thinking workshop
Devising a sitemap to structure content
Considering the website was leaning towards more of a knowledge centre and lead generation site, we needed to ensure that the structure of the site was easy to navigate for the user, as well as make sure that additional content could be added by content managers at Centrica. I created a live sitemap document to show the layered hierarchy of the site and where the CTA's would be directed. Moreover, the top navigation and footer links were also labelled to provide further navigational information for fellow developers and content editors.
Download Sitemap PDF Document
A responsive design smooth across all touch-points
To gain trust and client buy-in, we started designing high-fidelity designs of the proposed solution. We had set a precedent for the work to follow, and given them a first impression of what we can offer. Through various iterations, designs were created for desktop, tablet and mobile. This was a crucial step, ensuring that all the same functionality was still present on reduced viewport sizes.
Centrica business solutions combined hear and power technology page for web
Centrica business solutions blog article page for mobile web
Centrica business solutions technology overview page for mobile web
Centrica business solutions blog overview page for web
Centrica business solutions get in touch contact page for web
Invision as our ‘single source of truth’ for design elements
Invision was used as our main prototyping tool for the responsive solutions. We also split up specific sections of pages into a repository of flexible modules that would form the 'building-blocks' of the website. In addition, it also allowed us to gather feedback through comments and also generate useful code snippets with the Inspect tool.

The Design System, at a glance.


Interactive Prototypes
We created 3 interactive prototypes; desktop, tablet and mobile using InVision, these represented the MVP we were aiming for.


CMS Templates
CMS templates were openly editable templates allowing users to create new pages and add specific modules to fill them out.


Flexible Modules
Modules were the 'building blocks' of the page. Reusable blocks of content, media and functionality.
On hover animation for the centrica business solutions case study cards
Micro-interactions to provide smoothness and delight
I created short animations to provide the development team with an interactive representation of how we envisioned specific modules to react when interacted with.
Parallax scrolling animation for the blog article pages for web
An outstanding case study for IBM Interactive Experience
This project highlighted successful multi-agency collaboration between UX, branding, content, marketing and also build & development. Since the initial launch, Centrica Business Solutions boasts not just one but nine websites: US, UK, Belgium, Germany, Italy, Hungary, Ireland, The Netherlands and Mexico. Centrica Business Solutions, in partnership with IBM iX, won the 2018 Acquia Engage Awards for Excellence in Digital Marketing B2B 🏆
Centrica Business Solutions Website


Faster conversion compared to industry benchmark


Content downloads (and subsequent data capture) in the first 18 months


New website visitors daily and 71% returning visitors

Made it this far?
Let's start a conversation.

Thanks for checking out my work 🙌