Energie Stadt Zürich Concept and design for an energy portal of the City of Zurich: real concerns as the organising principle, from question to calculator to a solar installation step by step.
In 2020 we at Liip designed a portal for the City of Zurich's energy office that brings all of the city's energy topics together in one place, first in the pitch, then in the project. Clarissa Küchler led the UX, I was responsible for art direction and design: from the concept visual to the home page, the process pages and the mobile view. The guiding line: not the administration orders the content, but the concern of the person asking.
Many offers, one topic, no door
Starting point
Energy advice, the 2000-watt society, subsidy programmes, calculators, fact sheets: the city had plenty, but spread across departments and utilities. Anyone planning a solar installation had to know who was responsible before finding the answer.
Inspire or advise
Two modes
The concept separates two situations. Those who are curious want to be inspired and informed: what does the 2000-watt society mean, what can I do? Those with a concrete concern want advice and support: may I install panels on my parents' house, how do I get subsidies? Both get their own door on the home page.
Real concerns instead of an org chart
Organising principle
Three personas from the brief became the yardstick: the single mother who wants to lower her electricity bill, the father renovating the house he inherited from his parents, the retired landlord considering a solar installation. User group, topic and tool can be combined crosswise. Instead of a hierarchy, a network emerges in which every piece of content can be reached by several paths.
Tools instead of texts
Topic page
The topic page "Into the future with new energies" leads via search and filters to tools: building check, investment and yield calculator, provider comparison, building law, subsidies, insurance, maintenance. Each card answers a question, not a responsibility.
A grid that grows
Questions
Questions and answers are not a list but a grid indexed by search. Anyone who cannot find an answer submits their question directly. The editorial team gets to know the real concerns and produces content where it is missing.
Step by step to a solar installation
Process
The path to your own installation as a process in eight steps, from requirements through costs, subsidies and insurance to maintenance, with calculators right where you need them. Content can be bookmarked, notes saved, progress stays visible.
Making energy glow
Imagery
The vision from the pitch, "we make the topic of energy glow", became the visual language: overlays of city, infrastructure and light. Solar modules, high-voltage lines above the lake, the city at dusk, the magazine in hand. Not technology as machinery, but energy as something you can see and feel.
All energy topics under one address
Result
The pitch against three other agencies was won in May 2020. The concept phase ran until September 2020 with workshops, steering groups from the city's utilities, tree testing and a linking logic across all offers. On 2 February 2021 the portal went live at stadt-zuerich.ch/energie, built by the city in its own system. The city's press release summed it up: all energy topics of the City of Zurich under one address.
One image, one topic, one button
Mobile
On the phone, one aerial image per screen carries the topic: 2000-Watt Zurich, climate, renovation, construction, to swipe through. Menu, search and the direct path to an adviser stay below. One level down the question sits in the image, and the tabs at the bottom switch between topic areas.
How it was made
1
Brief
The city is looking for a portal that brings all energy topics together in one place: 2000-watt society, renovating, building, subsidies, advice.
2
Two modes
Inspire and inform those who are curious. Advise and support those with a concrete concern.
3
Concerns, not org chart
Three personas with real questions as the yardstick: saving energy, renovating the parents' house, a landlord considering solar power.
4
Filter logic
User group, topic and tool combinable crosswise, a network instead of a hierarchy. Sketch from the pitch.
5
Designs
Home page, topic page, question grid, solar process, mobile. Aligned with the existing front end of the City of Zurich.