UX-Designer

20.06. – 02.07.25

Case Study

frankfurt.de

Eine Stadtwebsite, die (alle) mitdenkt.

UX-Designer

20.06. – 02.07.25

Case Study

frankfurt.de

Eine Stadtwebsite, die (alle) mitdenkt.

UX-Designer

20.06. – 02.07.25

Case Study

frankfurt.de

Eine Stadtwebsite, die (alle) mitdenkt.

Problem

Die bestehende Website der Stadt Frankfurt ist inhaltlich überfrachtet und unübersichtlich. Die tiefe Verschachtelung der Inhalte und eine unklare Navigation führen dazu, dass sich Nutzer nur schwer orientieren können.

Visuell wirkt das Design veraltet und wenig ansprechend. Es spiegelt weder den modernen, vielfältigen Charakter der Stadt wider, noch vermittelt es ein klares Markenbild.

Nutzergruppen & Ziele

Nutzergruppen

Bürger*innen

Wirtschaft

Tourist*innen

Ziele

Nutzerfreundlichkeit

Barrierefreiheit

Design / Branding

Problem

Die bestehende Website der Stadt Frankfurt ist inhaltlich überfrachtet und unübersichtlich. Die tiefe Verschachtelung der Inhalte und eine unklare Navigation führen dazu, dass sich Nutzer nur schwer orientieren können.

Visuell wirkt das Design veraltet und wenig ansprechend. Es spiegelt weder den modernen, vielfältigen Charakter der Stadt wider, noch vermittelt es ein klares Markenbild.

Nutzergruppen & Ziele

Nutzergruppen

Bürger*innen

Wirtschaft

Tourist*innen

Ziele

Nutzerfreundlichkeit

Barrierefreiheit

Design / Branding

Problem

Die bestehende Website der Stadt Frankfurt ist inhaltlich überfrachtet und unübersichtlich. Die tiefe Verschachtelung der Inhalte und eine unklare Navigation führen dazu, dass sich Nutzer nur schwer orientieren können.

Visuell wirkt das Design veraltet und wenig ansprechend. Es spiegelt weder den modernen, vielfältigen Charakter der Stadt wider, noch vermittelt es ein klares Markenbild.

Nutzergruppen & Ziele

Nutzergruppen

Bürger*innen

Wirtschaft

Tourist*innen

Ziele

Nutzerfreundlichkeit

Barrierefreiheit

Design / Branding

Research

Zahlreiche Stadtportale wurden analysiert und daraus zentrale Anforderungen für den digitalen Auftritt einer Großstadt abgeleitet.

Intelligente Suche

Gute Suchfunktion mit datenbasierten Suchvorschlägen hilft ungemein um sich in der Fülle an Informationen zurechtzufinden.

01

Barrierefreiheit

Menü zur Barrierefreiheit sollte prominent angeboten werden.

02

Navigation

Menünavigation darf nicht zu verschachtelt sein, damit User einen guten Überblick behalten.

04

Mobile First

Da ein Großteil der Nutzer Stadtwebsites über mobile Endgeräte aufruft, muss das Design von Anfang an für das Mobilformat optimiert sein.

04

Research

Zahlreiche Stadtportale wurden analysiert und daraus zentrale Anforderungen für den digitalen Auftritt einer Großstadt abgeleitet.

Intelligente Suche

Gute Suchfunktion mit datenbasierten Suchvorschlägen hilft ungemein um sich in der Fülle an Informationen zurechtzufinden.

01

Barrierefreiheit

Menü zur Barrierefreiheit sollte prominent angeboten werden.

02

Navigation

Menünavigation darf nicht zu verschachtelt sein, damit User einen guten Überblick behalten.

04

Mobile First

Da ein Großteil der Nutzer Stadtwebsites über mobile Endgeräte aufruft, muss das Design von Anfang an für das Mobilformat optimiert sein.

04

Research

Zahlreiche Stadtportale wurden analysiert und daraus zentrale Anforderungen für den digitalen Auftritt einer Großstadt abgeleitet.

Intelligente Suche

Gute Suchfunktion mit datenbasierten Suchvorschlägen hilft ungemein um sich in der Fülle an Informationen zurechtzufinden.

01

Barrierefreiheit

Menü zur Barrierefreiheit sollte prominent angeboten werden.

02

Navigation

Menünavigation darf nicht zu verschachtelt sein, damit User einen guten Überblick behalten.

04

Mobile First

Da ein Großteil der Nutzer Stadtwebsites über mobile Endgeräte aufruft, muss das Design von Anfang an für das Mobilformat optimiert sein.

04

Design

Design

Design

Das Ziel unseres Designprozesses war, die Stadt Frankfurt als zukunftsorientierte und zugängliche Metropole zu präsentieren.

Wir wollten ein Design schaffen, das nicht zu nüchtern oder bürokratisch wirkt, sondern freundlich, einladend und nahbar – ohne dabei die Seriosität eines städtischen Auftritts zu verlieren.

Ziehe den Pfeil-Button nach rechts für das Ergebnis.

Farben

Das Farbschema orientiert sich an den Stadtfarben Frankfurts, wurde aber für eine einladende, weniger behördlich wirkende Atmosphäre durch warme Akzente ergänzt.

Typografie

FUTURA

Lato, Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Farben

Das Farbschema orientiert sich an den Stadtfarben Frankfurts, wurde aber für eine einladende, weniger behördlich wirkende Atmosphäre durch warme Akzente ergänzt.

Typografie

FUTURA

Lato, Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Farben

Das Farbschema orientiert sich an den Stadtfarben Frankfurts, wurde aber für eine einladende, weniger behördlich wirkende Atmosphäre durch warme Akzente ergänzt.

Typografie

FUTURA

Lato, Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Mobile Screens

Mobile Screens

Homescreen

Suche als Kernfunktion

Die prominent platzierte Suchleiste animiert die Nutzenden, die Suchfunktion aktiv zu verwenden.

Suche

Mit zwei Klicks zum Ziel

Datenbasierte Suchvorschläge helfen, das gewünschte Ergebnis schnell und einfach zu finden.

Suche

Immer in Reichweite

Die Suche ist in der Top Navigation jederzeit verfügbar.

Häufig besucht

Vorschläge auch beim Scrollen

Auch im Verlauf der Hauptseiten werden immer wieder Angebote zur weiteren Navigation gemacht.

Menü

Verschachtelung mit Durchblick

Die Verschachtelung in Dropdown-Menüs erleichtert die Orientierung, da jede Ebene eingesehen werden kann.

Ein schnelles Wechseln zwischen den Ebenen ist möglich.

Weitere Screens

Weitere Screens

Verschiedene Mobilescreens der Case Study-Website für frankfurt.de
Verschiedene Mobilescreens der Case Study-Website für frankfurt.de
Verschiedene Mobilescreens der Case Study-Website für frankfurt.de