Introducing Elemental — Fortum Design System
Fortum Design, in its current form, just turned two years recently. When I joined Fortum, roughly at the same time, I was introduced to several digital products and services, some exciting new concepts were on the making and digital hype was real.
When I joined Fortum I must have met at least two hundred new people in the first month from here and far, from communications, marketing and brand. I got to know project leaders and managers, developers and specialists. I talked to product owners and people shaping the new services. I shook hands with external partners working hard to drive Fortums digital goals and I met the new design team members from Finland, Sweden and Norway.
Shaping the system
It was clear from the beginning, that in order for our design to function in systematic ways, we would need to base it on a system. With this kind of large multiform group of talents, it´s inevitable to work systematically in order to achieve harmony.
Harmony is a stepping stone towards aesthetic entities. This sentence basically frames my personal mission as a Lead designer at Fortum. Based on my experience, I can´t recall a single case where harmony would have been achieved by an accident on a larger scale. From my perspective, to first achieve harmony you need to be based on a system, any kind of system really.
“Harmony is a stepping stone towards aesthetic entities”
According to Merriam-Webster, a system is a group of interacting or interrelated entities that form a unified whole (1).
In our case — a system is a group of interacting UI components that form a unified whole. But by themselves, these components are not enough; “They need to live in a larger process, one that ensures that these components feel unified, cohesive, connected. Part of a whole.
In other words, they need a design system” (2).
Ignition
Before making the conscious decision to build our design system, many indicators clearly pointed out the need for it. Our old style guide (in PDF format) was hard to maintain and share. A common vision for our products was missing. As an international team, we shared different languages and lacked a common vocabulary (design language). We were missing clear design principles. Our design resources (in terms of our components) were close to none. The code and technology decisions behind our design were not clearly stated. Finally, our digital style was not rooted, causing projects to compete against one another with different approaches on design, which would lead these projects losing the focus from the real UX issues they should have been targeting.
We started the building work of our design system by having sort of a design inventory for all of our existing components to form an understanding of where we were. The findings were not too comforting; the same stuff had been done again and again but every time almost from scratch. As a result of this, our components were somewhat different all the time, causing our user interfaces to speak differing messages.
To change things up, we decided to work towards three main goals:
- Drive cohesive customer experiences across devices and products
- Make rapid design and layout prototyping possible
- Support all teams globally through a centralized design system and re-usable components
One system to support them all
I got the designers together and got funding to hire one React developer. That was really the starting point. In the beginning, we were developing the system as an individual project, but soon we realized that some of the decisions we had made did not function well in real life. Sometimes we had to go back and forth when we discovered that our designs were not suitable for a real use-case, or when we had been so enchanted by our own designs that the actual use-case was missing completely.
Since our design resources were rather limited, so it happened that all of the designers who were working on the design system (which was five at the time) were scattered around in different projects, none of us was being able to work on the design system for full time. I believe that when we got separated ended up being a rather lucky coincidence, since it must have been the reason why we were able to generate nice organic pull for the system later; our designers, committed to the design system, used these commonly established practices and took these components, patterns and best practices to their individual projects around the organizations, showing how it is to work with a design system where everything is connected. Suddenly a lot of things started to point towards the system.
“The ultimate goal is not the design system itself, we only succeed when we see projects succeeding using it.”
For me, this has also been the biggest learning; As some wise design system prophet once said — The ultimate goal is not the design system itself, we only succeed when we see projects succeeding using it.
The Fifth Element
When I joined Fortum I was fascinated by the way the company is shaping the powers of nature towards a cleaner world. This reminded me of the classical elements — earth, water, air and fire — and how Fortum is harnessing these elements to produce sustainable energy. In my mind earth stands for geothermal, water for hydro, air for wind, and fire for solar energy. From the beginning, our objective as a design team had been to add a design into this mixture — the fifth element.
The idea of design is the fifth element had been in the back of my mind ever since we took the first steps towards Fortum Design System. It is therefore quite natural that because of this thought, I started calling the Design System as Elemental.
While the name might sound profound to some ears, I feel it actually fits us perfectly. As every design system should be a reflection of its owner, this is certainly the case for Elemental. Elemental is something fundamental, primary or basic from which all other structures are compounded.
The journey continues
Looking back the past two years I can really say that we have accomplished something worth being proud of. Today Elemental is up and running with an increasing number of projects have been linked to it, and I have encountered internal projects along the way, that I´ve never heard of before, taking the system into use very successfully.
However, the work with a system is never-ending. Those components don´t maintain themselves (yet) and developing the user-centric guidance for the use and best practices of our design system remains a continuous task. We have also recently started to scale up the system to React Native for mobile development.
Now, let me have a moment for a smile when looking back the great people I have had a chance to work with (you know who you are) and things we have achieved together.
The Fortum Design System journey continues.
(1) https://www.merriam-webster.com/dictionary/system
(2) Ethan Marcotte
*Fortum is a leading clean-energy company developing and offering solutions for our global customers in electricity, heating, cooling, as well as solutions to improve resource efficiency. Digitalization is enabling us to create new customer offerings and improve the productivity of our businesses. See more on www.fortum.com
