Centrica Business Solutions
Using atomic design principles to systematically design and build a responsive B2B website for Centrica Business Solutions whilst on placement at IBM iX.
UX/UI Design, Prototyping, Design System Management, Content Management
December 2016 - June 2017 (majority of placement)
“Innovative, end-to-end distributed energy solutions enabling organisations to improve operational efficiency, increase resilience and drive their business vision forward.”
Design System Management
High Fidelity wireframes for client buy-in
We had shown Centrica that we’re capable of injecting creativity and unparalleled functionality into the ideas that we created. From this initial meeting, we had set a precedent for the work to follow, and given them a great first impression.
Designing in modules for the prototyping process
We designed the site using modules, forming the building blocks for the Content Management System (CMS). There were also templates that formed the foundation for the Minimum Viable Product (MVP), these would be selected by the user creating the pages.
Using Invision as our ‘single source of truth’ for design elements
Invision was used as our main online repository for the flexible modules that made up the website. The online software made it extremely easy to change designs / modules quickly and upload them using the Craft sync plugin.
Using the Inspect Tool to gain critical development snippets of code. The development team could go directly from their native environment in JIRA and access fundamental measurements / dimensions and get snippets of code applicable to specific modules. Another great feature of the Invision software.
From research we realised that the majority of consumers viewing the site would be viewing on a desktop device at work. They were unlikely to view on mobile, yet, we still conformed to responsive design. Ensuring the website was fully functional and smooth across all touch-points.
Working on Centrica Business Solutions relied on efficient multi-agency collaboration. IBM iX were at the centre of the collaboration, working with Manasian and Earnest for branding and content. From a development perspective, Aperto, a development team based in Berlin, were collaborated with to produce the website in a systematic manner.
Short video clips were created to explore the micro-interactions of the website and provide the development team with a visual representation of how we expected the specific modules to react when interacted with.