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.

What

UX/UI Design, Prototyping, Design System Management, Content Management

When

December 2016 - June 2017 (majority of placement)

Mission Statement

“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.

Design System Overview

03

Interactive Prototypes

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

07

CMS Templates

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

54

Flexible Modules

Modules were the 'building blocks' of the page. Reusable blocks of content, media and functionality.

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.

Streamlined & Efficient Workflow

No UI Specification

We bypassed creating an official UI specification document (PDF) - meaning reducing time spent updating and re-exporting it!

Invision at the centre

Our ‘single source of truth’ - allowing us to preview prototypes and modules within their various states. It also allowed us to gather feedback through comments and also generate useful code snippets with the Inspect tool.

Sketch's Symbols Feature

Saved the design team hours having to rework individual components - symbols allow changes to be made across the whole design effortlessly and quickly.

Micro-interactions

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.

Responsive Design

Want to see the real thing?