British Gas Intranet UI

British Gas required a bespoke, internal dashboard to log and track projects, jobs and assets across the business. I was invited to be the designer to work on the UI for the project. The Technical Project Manager fleshed out all of the wireframes in Balsamiq and identified key pages that I would need to design.

British Gas UI
British Gas UI
British Gas UI

Concurrently, British Gas were going through a re-brand, so throughout my part of the project, I had to align the designs with the latest branding changes, keeping up with changes to button styles and colour palette.

British Gas UI
British Gas UI

I worked up a couple of the key pages to get feedback from BG on visual direction, and took their points on board regarding the look and feel, as well as usability, since they were to be the users. Once I had established a look and feel, I worked up the rest of the key pages, submitted them for approval, made tweaks as needed, then handed them over to the development team.

British Gas UI

Challenges

One design challenge was the asset library. Users needed to be able to filter, preview, see at-a-glance details, select and then perform actions with assets, all on the same screen. I created a filter section at the top, with all of the filtering options neatly laid out in a box, and laid the assets out in a card-style list below – each card containing a thumbnail, some topline details, a select button and, in some instances, labels indicating their status.

The dashboard contained a lot of different types of actions on each page – some negative, some positive, some more important than others. I created primary, secondary and tertiary button styles, to give a hierachy to actions on each page, and then used colour to indicate seriousness of the action – such as red for danger, amber for warning, blue for info and green for safety/success.

What I would do differently

My first dashboard homepage design was clean and neat, easy to follow, but visually underwhelming and lacking in personality. I didn't have any assets or idea of the new brand direction at this stage. Where it ended up was a great improvement, using some of the brand's new assets to give the homepage some life, personality and identity. I wish I had have asked for brand assets sooner, so as to impress stakeholders with my work from the very beginning, rather than the rickety, underwhelming start I had. I learned to always ask for anything that could hekp make a design better – the worst they could say is 'no'.

British Gas UI