Göteborg Energi

A new user interface and design system for an energy company.

Background

Göteborg Energi is a Swedish energy company and the agency I work at, Stendahls, was commissioned to create a new and accessible interface for their user portal. This is where both consumers and businesses log in to manage their electricity contracts and gain insights about their consumption. We also redesigned the page where you sign up for your electricity contract in the first place.

I was responsible for creating and maintaining the design system as well as designing some of the pages and user flows. I worked closely together with another digital designer, a UX designer and several front-end developers.

Some of the UI components.
Various UI components.

Process

Göteborg Energi is a public organization within the EU and thus their website is required by law to meet the WCAG 2.1 level AA accessibility guidelines. This was something I had to thorougly research, and adapt all parts of the design system accordingly. It meant giving up color combinations and interaction patterns that I liked, but I'm very glad for everything I learned about accessibility through this project.

Another challenge was the data-heavy nature of the UI. There were large amounts of information and complex user flows where the user does not always understand why or how certain things should be specified. This required a lot of trial and error, benchmarking existing solutions, and developing new innovative solutions where needed.

Result

Here are some examples of how the design turned out. The selection is based on what represents my personal efforts the best.

Desktop screens.
Mobile screens.
Lottie animations for a feedback form. The animation is activated on hover (desktop) or tap (mobile).
Selection components and states – an example from the design system.