Van digitale rebrand naar een design system dat snelheid en kwaliteit bracht.
With the message 'Welcome to the new world' Eneco is transforming from an energy supplier that supplies electricity and gas to Dutch households to a sustainable service provider. I had a leading role in the creation of the concept, design and design system of Eneco.nl. Based on interviews, research and data, I worked closely with people from Eneco to renew the highly outdated Eneco website & app.
How can I transform a written strategy to a sustainable design language? Can I find a way to keep consistency across different teams, with multiple designers and developers?
A sustainable design language that not only reflect Eneco's design principles, but is also sustainable and ready to scale with its design system.
The strategy was to make green energy attractive. Making this visible to different consumers in The Netherlands is a super cool challenge. In a small workshop with a few designers and stakeholders we came up with micro-concepts and visuals to define how this new strategy should feel like. With the same group we translated these concepts into so called design principles. These guiding principles were (and still are) the foundation of all the digital platforms. We made everything visual in a poster to inspire other designers, developers and stakeholders. We welcomed them in the new world.
Translating tiny cool concepts to a sustainable design sounds like a huge thing, but is pretty easy. The trick is to don't push them into your design, but implement them when the right opportunity is there.
The right opportunity won't come by just waiting, at least that's what I've learned. With 850K monthly users, having 5MIL monthly page views, you have to find a way to implement awesome ideas with low effort but high impact. I used these 3 steps to find my own 'right time' to implement our cool ideas.
The right opportunity won't come by just waiting, at least that's what I've learned. With 850K monthly users, having 5MIL monthly page views, you have to find a way to implement awesome ideas with low effort but high impact. I used these 3 steps to find my own 'right time' to implement our cool ideas.
We made a list with all the key pages/journeys and made sure we had the conversion rate and NPS scores included. By sorting them from low to high we quite easily knew what journeys and pages were ready for something new! Combined with the pages that have the biggest brand awareness we created a shortlist to start with.
What I do a different from regular designers, is starting with 75% of the test plan before designing anything. By having specific objectives, you also have more specific user stories to work with. This gives me and the team more time to get creative and brainstorm ideas based on our design principles. We just created the right time to implement our tiny cool ideas! I made mobile and desktop designs for key journeys and product pages. Someone else did the actual test because I don't believe in doing a concept test with your own design.
My worst nightmare is inconsistency and when others start reinventing the wheel or use different patterns to solve the same problem. In 90% of all product teams this is also where the biggest waste of money is. To prevent this, I came up with three solutions that are still being used.
So the first thing I started with was creating a single source of truth for design. I made a Boilerplate that lets every designer start with the same blank canvas as I was working with. At least we know had the same starting point.
Up next I started to document all the other styles and building blocks. For Eneco this was extremely important in the adoption process. It gave other teams the opportunity to get familiar with a new style and it gave my insights in the implementation priorities of other teams.
By having these patterns in design libraries was a great start, but we had a problem... Designers started to adopt patterns, but developers had no clue what we meant with a pattern. They basically implemented everything based on the handovers we did, which wasn't super effective. So that's why we started documenting every pattern in Confluence. We documented our principles, guidelines on how to use colour, behavior of components and even patterns on a template and journey level. By documenting these patterns I went from designing a form in 4 different breakpoints with annotations, to write down the type of form fields we needed. This upgraded our implementation speed by at least 50%!
One of the most interesting parts of the pattern library was when we started to implement design tokens. I read a super interesting article by Nathan Curtis that opened our teams eyes completely. By implementing design tokens we finally started to have conversations in the same language. Small example.. as a designer I think in pixels, so when I say 'this body-text should be 16 pixels', I say nothing weird. However, a developer doesn't combine pixels with font sizes, they use REM. We fixed this by creating a simple tokens like: '$font-size-m = 1rem;'. Now we don't only think the same, but also mean the same. Which was HUGE in creating complex products at Eneco.
What you've just read was about 1.5 years of work. Our system got more mature and the organisation slowly started to see the benefits. As you've read I don't had a hard strategy on pushing a design system. It grew organically, which is in my opinion always the way to go. A design system is never the goal, so after a while I also had to explain this to the organisation.
More focus on the problem Don't 'over' design Get grip on what's made
Create a universal design language Sustainable building blocks
Pattern based design Uplift journeys Uplift Mijn Eneco
After a while, as Head of Design, I noticed that my desk started to look more like a ticket booth where I approved designs and managed stakeholders. This made me super tired. That's why I came up with three solutions that structured our communication to less but better.
Weekly design meet - Every week we had a design meet with all the digital designers and the Head of Branding. We divided the meet in two chapters. One about giving feedback on the actual design from a UX perspective and the other part on what the role of the design system was.
In the bi-weekly 'heads of meet' I discussed together with the head of content, development and marketing our bigger epics. The goal of this meeting was to get alignment on the bigger patterns components and behaviours.
In the quarterly meetings we presented our design system updates to about 100 stakeholders. They varied from management, to product owners, commerce, communication and other designers that worked on Eneco.
After working almost 1.5 year on Eneco a lot has happened. While a few tiny ideas grew to a sustainable platform, I personally grew a lot as well. Lets wrap this case study up with a final top 3 items that I've learned while working with Eneco.