Ecotricity

My current job as a UX Designer for Ecotricity has involved me co-leading UX/UI in their large-scale Salesforce E&U project, looking to overhaul their customer and B2C staff-facing software. My primary role as one of two UX designers, is bridging the gap between the industry expert’s and customers’ requirements and the development team’s constraints, by gathering information and producing Figma prototypes with both in mind. Here - along with the other UX Designer - I use my user-centred UX/UI design expertise to gather requirements and produce Lo-Fi, then Hi-Fi prototypes with an easy-to-use, clean and modern UI. These designs are then used by the external development team, to create the Salesforce platform used by Ecotricity customers and B2C staff, where I will perform final internal and external user testing to validate the final product. As the B2C project comes to an end, the B2B project begins. The discovery phase for this project has just started, where we are leading observations, workshops and interviews to gather as much information and context as possible, to understand this new environment further and hopefully produce better designs as a result of this newfound knowledge.

A prototype of the customer-facing landing page once they logged in.
A prototype of the customer-facing landing page once they logged in.
An example of a table design, used for showing a customer's previous bills.
An example of a table design, used for showing a customer's previous bills.
A simple page with a modern UI design, allowing the user to notify Ecotricity of a change request to their tariff.
A simple page with a modern UI design, allowing the user to notify Ecotricity of a change request to their tariff.
Radio buttons using Ecotricity's primary colour and opacity settings to create a clear hierarchy.
Radio buttons using Ecotricity's primary colour and opacity settings to create a clear hierarchy.
Concept for a tariff selection screen, using minimalist detailing to create a concise informational flow.
Concept for a tariff selection screen, using minimalist detailing to create a concise informational flow.
A design for a customer-facing nav bar using iconography and information separation for easy navigation - the iconography had to get scrapped due to project limitations.
A design for a customer-facing nav bar using iconography and information separation for easy navigation - the iconography had to get scrapped due to project limitations.
A simple popup design using complimentary type faces, colouring and bolding to create a clear informational hierarchy.
A simple popup design using complimentary type faces, colouring and bolding to create a clear informational hierarchy.
A summary page with 2x2 box layouts, separated with a horizontal divider. This is used to separate pieces of information and reduce the user's cognitive load.
A summary page with 2x2 box layouts, separated with a horizontal divider. This is used to separate pieces of information and reduce the user's cognitive load.
A page using clickable tiles to allow the user to navigate a 'get help' page.
A page using clickable tiles to allow the user to navigate a 'get help' page.
A simple deactivation page using a tick box and text bolding to highlight important information.
A simple deactivation page using a tick box and text bolding to highlight important information.
An account information page designed with greyed-out text boxes to denote static information, and 100% opacity text boxes for editable information.
An account information page designed with greyed-out text boxes to denote static information, and 100% opacity text boxes for editable information.
A concept page to demonstrate what would happen to a customer's monthly bill, if they moved from a single fuel tariff to a dual fuel alternative.
A concept page to demonstrate what would happen to a customer's monthly bill, if they moved from a single fuel tariff to a dual fuel alternative.
A request refund page using spacing, along with primary and neutral colouring to create clean informational grouping, allowing for a concise and smooth user experience.
A request refund page using spacing, along with primary and neutral colouring to create clean informational grouping, allowing for a concise and smooth user experience.
A large number input box is placed in the centre of the user's eye line for maximum cognitive flow.
A large number input box is placed in the centre of the user's eye line for maximum cognitive flow.
A tariff - and subsequent payment - summary page using a horizontal alignment, paired with a vertical user flow for succinct reading.
A tariff - and subsequent payment - summary page using a horizontal alignment, paired with a vertical user flow for succinct reading.
An early concept looking into displaying energy readings using a mixture of iconography and dividers.
An early concept looking into displaying energy readings using a mixture of iconography and dividers.
A concept displaying 'refer a friend' options, using clickable tiles with logos to create faster screen targeting.
A concept displaying 'refer a friend' options, using clickable tiles with logos to create faster screen targeting.
↑Back to Top