Product Designer & Photographer
I&C Trading.png

Electric Ireland I&C Trading

Electric Ireland I&C Trading

A Portal for Trading and Allocating Gas and Carbon for Businesses

I&C Web Screens PSD Mockup Crop.png

The Problem

In order for a Electric Ireland corporate customers to order gas or carbon they would have to fill out a complex spreadsheet and email it to an ESB trader. The trader would then try to make the trade at the price that the customer had stated or call the customer and ask them to change the spreadsheet and email it again. This was very labour intensive and customers found it difficult to have visibility over previous trades other than going through historical spreadsheets.

ESB approached Arekibo with the ask of designing a new system to replace this legacy spreadsheets and phone calls system. A cross company portal between ESB and Electric Ireland, the project involved stakeholders from teams such as Trading and CRM, as well as external contractors and was completed using agile methodologies.

Creating a Data Heavy Portal

The challenge with this project was in the data. What the client wanted was a simple, clear way for the user to see their previous trades and make further trades. The amount of data the user needed to see when looking at their history of trades as well as when making trades was immense but it needed to be clear, a single mistake could cost the user hundreds of thousands Euro.

To eliminate distractions we kept the UI of this portal quite minimal and focused on the tables, ensuring the data was presented clearly and in order of importance. Any data which was not needed on the summary tables was available in the trade or contract details page.

All mockup Crop.png
 

Portal Dashboard

The client initially did not want a dashboard but we discussed the experience of landing the user straight into the data and they decided that a limited function dashboard should be included in the MVP.

To keep the dashboard minimal for the MVP we decided to include some data about the number of pending trades, approved trades, and contracts so the user would see, on log in, whether they had any trades pending or new contracts. We also added links to the create trade request for both Gas Tracker and Frameworks.

The banner was a way of adding colour to a very data heavy portal. To keep in tone with the Electric Ireland brand guidelines I created this banner from a similar style on their website but made it shorter and with a darker gradient coming from the left.

 
Dashboard Mockup Crop.png
 

Design System

This portal would be accessed through the existing Business Online portal but rather than using the existing style, a new Electric Ireland style would be implemented. To make the build more efficient for this project and for other Electric Ireland projects going forward we opted to create and maintain a design system.

Using an agile process, the design system proved to increase efficiency during the design, development, and QA phases. In the design phase it meant I was able to quickly design screens using components which I had designed in the previous sprint. Our front end developers split the work in half, one focusing on building the components and the other using the components to build the screens. After the first round of QA there were only minimal bugs found as any spacing, font, or size issues from the first round had been fixed at the component level.

 
Design System.png