Iberdrola Global

2018 · DESIGN SYSTEM

Iberdrola's first design system that aims to boost efficiency and improve the visual consistency across company's digital products.

What's Iberdrola?

Iberdrola is one of the largest energy companies in the world and a leader in renewable energy, with subsidiaries all around the world. It is also the parent company of ScottishPower.

CONTEXT
I led the Design Systems efforts for Iberdrola across web, mobile and native platforms, including careful planning and creating of the core libraries (atoms) and component libraries (molecules) which constituted the building blocks of the design system. Meanwhile, I also mentored team members in areas like accessibility, type scaling, version control, and design tokens.
MY ROLE
Product Strategy
Interaction Design
Visual Design
User Flows
Rapid Prototyping
User Testing
TOOLKIT
Sketch app logo Marvel app Logo Abstract app logo
PLATFORMS
Apple iOS Logo Android OS Logo Safari Browser Icon

The Problem

In recent years, it has become increasingly difficult to maintain consistency between the digital products of different parts of the company. Evidently, there was a clear need for a scalable design system to be put in place.

The Approach

• Atomic Design Principles

The process involved the analysis of hundreds of pre-existing UI designs within the Iberdrola family and collaborating with stakeholders to identify common UI patterns across the organisation's digital products. Doing so allowed me to progress with the design of the more complex UI patterns (organisms and templates) and to ensure the scalability of the whole design system.

I worked closely with front-end and mobile developers throughout the design process to ensure its feasibility and ultimately bring the design system to life.

The Solution

• Component libraries

The resulting documentation, component libraries and patterns helped us boost the efficiency of Iberdrola's digital teams around the globe and improve the consistency across the company's products. The examples below offer a small glimpse into the contents of this new design system.

ScottishPower app cover photo
Userflow
Screen design
Home screen
Home screen
Energy usage
Smart thermostat
Change energy tariff
Change energy tariff
Change energy tariff
Change energy tariff

Explore more projects

Buzludzha VR

VR EXPERIENCE • SteamVR • Oculus Rift

An immersive virtual reality experience based on one of Europe’s most iconic abandoned structures.

VIEW PROJECT
3D real-time render of the Buzludhza monument created in Unreal Engine 4