Esslingen

Bei der Neugestaltung der Esslinger Website haben wir eine moderne, benutzerfreundliche Plattform geschaffen, die sowohl die digitale Präsenz stärkt als auch die Identität der Stadt widerspiegelt. Unsere Lösung wurde mit dem Ziel entwickelt, den vielfältigen Anforderungen der Stadt und ihrer Bürger gerecht zu werden und eine zukunftsfähige Online-Erfahrung zu bieten.

  • Strukturworkshop
  • Wireframing
  • Webdesign
  • CMS
  • Usability Testing
Detailansicht eines historischen Fachwerkhauses mit rosa Fassade und Holzverzierungen, im Hintergrund ein Turm mit Wetterfahne.

Im Rahmen des Web-Relaunchs der Stadt Esslingen nahmen wir uns der Herausforderung an, eine benutzerfreundliche und moderne Plattform zu schaffen. In enger Zusammenarbeit mit der Stadt analysierten wir die bestehende Struktur und entwickelten eine optimierte Informationsarchitektur. Von interaktiven Strukturworkshops über präzises Wireframing bis hin zu modernem Webdesign und intensivem Usability Testing – wir haben das Projekt von Anfang bis Ende begleitet. Das Ergebnis? Eine Website, die nicht nur funktional und benutzerfreundlich ist, sondern auch die Identität der Stadt widerspiegelt und den Anforderungen aller Nutzer gerecht wird.

Strukturworkshop

Im Rahmen unserer Strukturworkshops unterstützen wir unsere Kunden dabei, ihre Webinhalte nutzerfreundlich und effizient zu gestalten. Ein wesentlicher Bestandteil ist dabei der Content-Review, bei dem wir gemeinsam mit dem Kunden bestehende Inhalte und deren Verteilung analysieren und optimieren. Darüber hinaus entwickeln wir eine neue Webstruktur, die als zukunftsfähiger Rahmen für die Inhalte dient – losgelöst von verwaltungsinternen Sichtweisen und konsequent nutzerzentriert.
 
Für die Stadt Esslingen, die über eine hohe Content-Dichte verfügt, haben wir den Strukturprozess in mehreren Schritten durchgeführt. An drei intensiven Workshop-Tagen im Rathaus haben wir gemeinsam eine angemessene und nachhaltige Struktur erarbeitet, die den Bedürfnissen der Bürgerinnen und Bürger gerecht wird und die digitale Servicequalität der Stadt verbessert.

Infografik zur Website-Struktur der Stadt Esslingen mit verschiedenen Menüpunkten und Unterkategorien, übersichtlich angeordnet.

Das Ziel der Struktur Konzeption

Bürgerinnen und Bürger sollen gesuchte Informationen intuitiv und schnell auf der Website finden, wodurch zugleich das Serviceaufkommen im Rathaus reduziert wird.

Wireframe-Design für eine Website mit verschiedenen Layouts, Menüs und Formularen, in hellen und dunklen Farbtönen.

Wireframeworkshop

In unseren Wireframeworkshops erarbeiten wir gemeinsam mit dem Kunden das Konzept und den strukturellen Aufbau eines Webauftritts. Dabei analysieren wir, welche Elemente notwendig sind, in welcher Intensität sie genutzt werden sollten und wie sie in Relation zueinander stehen. 

Der Fokus liegt hierbei nicht auf dem visuellen Design – Farben, Formen, Schriftarten oder Bilder spielen in diesem Schritt noch keine Rolle. Stattdessen definieren wir gemeinsam relevante Seitentypen und erstellen Wireframes für wichtige Seiten, wie z. B. Rubrikseiten, Landingpages oder die Startseite. Diese Wireframes dienen als Leitfaden für die spätere Inhaltseinpflege und helfen dabei, das inhaltliche Konzept konsistent umzusetzen. Sie stellen zudem sicher, dass zentrale Elemente wie z. B. „Das könnte Sie auch interessieren“ nicht übersehen werden.

Da das Konzept der Stadt Esslingen diverse Besonderheiten enthält, war es hier besonders wichtig, ein tieferes Verständnis für den Aufbau der vorhandenen Seitentypen zu schaffen. Durch den Workshop konnten wir gemeinsam mit der Stadt eine fundierte Basis schaffen, die sowohl den inhaltlichen Anforderungen als auch den Bedürfnissen der Bürger gerecht wird.

Mir gefällt die sehr kollegiale und persönliche Zusammenarbeit mit allen Komm.ONE-Kreativ Kolleg:innen.

Martina Schober, Stadt Esslingen

Webdesign

Im Rahmen unserer Designprozesse unterstützen wir unsere Kunden dabei, ein ansprechendes und nutzerfreundliches Webdesign zu entwickeln. Den Auftakt bildet ein gemeinsamer Design-Kick-off, in dem wir Ziele, Anforderungen und gestalterische Wünsche erarbeiten. In der anschließenden Designphase setzen wir diese Erkenntnisse in ein visuelles Konzept um, das Ästhetik und Usability in Einklang bringt. Den Abschluss bildet die Design-Präsentation, bei der wir das finale Konzept vorstellen und gemeinsam den Feinschliff vornehmen.

Für die Stadt Esslingen haben wir diesen Prozess in enger Abstimmung durchgeführt. Von der ersten Idee bis zur fertigen Gestaltung haben wir ein individuelles Design entwickelt, das nicht nur die Identität der Stadt widerspiegelt, sondern auch eine klare Nutzerführung und eine optimale Bedienbarkeit gewährleistet.

Gestaltung einer Website mit vielfältigen Farben und unterschiedlichen Informationsformaten für eine benutzerfreundliche Erfahrung.

Usability Testing

Nach der Entwicklung des Webkonzepts für die Stadt Esslingen wurde ein umfangreiches Prototyping durchgeführt. Dabei entstand ein High-Fidelity-Prototyp, der eine erste visuelle und funktionale Umsetzung des Konzepts beinhaltete. Dieser Prototyp ermöglichte es Testpersonen, sich durch verschiedene Seiten zu navigieren und dabei Feedback zur Optik, Logik und Bedienbarkeit zu geben.

Die erste Studie fand im Usability-Labor der Hochschule für angewandte Wissenschaften in Neu-Ulm statt. Ziel war es, frühzeitig mögliche Schwachstellen im Konzept zu identifizieren und Optimierungspotenziale zu erkennen. Die gewonnenen Erkenntnisse wurden genutzt, um das bestehende Konzept zu überarbeiten und zu verfeinern, bevor die eigentliche technische Umsetzung der Website begann.

Nach dem Onlinegang der neuen Website folgte eine zweite Iteration der Usability-Studie. Dieses Mal wurde die final entwickelte Seite getestet, um weitere beobachtete Bedienschwierigkeiten zu analysieren und gezielt Anpassungen vorzunehmen. So konnte sichergestellt werden, dass die Website nicht nur in der Theorie, sondern auch in der Praxis eine optimale Nutzerführung bietet und den Bedürfnissen der Bürgerinnen und Bürger gerecht wird.

Eine große Glasscheibe, die den Raum trennt. Auf der einen Seite zwei Personen an zwei Bildschirmen, auf der anderen Seite eine Person, die sich Ergebnisse notiert.

Die Stadt Esslingen präsentiert sich mit einer optimierten Webstruktur und einem modernen Design, das sowohl optisch als auch funktional überzeugt. Die folgenden Impressionen zeigen einen Ausschnitt der finalen Ergebnisse.

Übersicht der Startseite der Webseite Esslingen mit aktuellen Meldungen, einem Veranstaltungskalender und weiteren Bildern.
Übersicht einer Rubrikseite der Webseite Esslingen mit verschiedenen Bildern, die zu weiteren Unterseiten führen
Übersicht einer Detailseite der Webseite Esslingen mit vielen Texten und einem großen Bild.

Der offene Austausch mit unseren Kunden ist uns besonders wichtig. Ihr Feedback hilft uns, stetig besser zu werden und unsere Leistungen weiterzuentwickeln. Lesen Sie hier, was die Stadt Esslingen über die Zusammenarbeit mit uns sagt.

Was hat Ihnen am Relaunch-Projekt am besten gefallen?

Komm.ONE ist schon bei der Ausschreibung am Besten auf unsere Vorstellungen eingegangen. Wichtig war uns zum Beispiel, dass das neue Layout unser Print-CD aufgreift und wiedererkennbar umsetzt. Das ist super gelungen. Außerdem war komm.ONE allen unseren Ideen gegenüber sehr offen und hat vieles umgesetzt. Manches auch nicht, aber dafür gab es dann auch nachvollziehbare Gründe. Insgesamt war und ist der Austausch immer sehr konstruktiv.

Würden Sie unsere Online-Suite weiterempfehlen und wenn ja, warum?

Auf jeden Fall. Das CMS ist flexibel und sehr umfangreich und garantiert technisch die Barrierefreiheit unserer Seiten.

Zudem ist es benutzerfreundlich zu bedienen. Es gibt neben der strukturierten "Profi-Oberfläche" auch die Möglichkeit, Korrekturen in der Seitenansicht vorzunehmen oder für die Eingabe von Veranstaltungen ein einfaches Formular zu verwenden. So kommen auch Userinnen und User gut zurecht, die nicht täglich damit arbeiten. Im Rahmen von Weiterentwicklungen würde ich mir noch die Möglichkeit wünschen, Elemente verpflichtend vorgeben bzw. verbieten zu können. So könnten wir die Einhaltung unseres individuellen Styleguides noch besser sicherstellen und ganz grobe Fehler bei der Verwendung der Elemente verhindern.

Segel neu setzen

Wir gehen mit Ihnen auf die Reise und steuern Ihr Schiff in eine erfolgreiche Richtung. Unser Team steht fest an Ihrer Seite - ob die See glatt daliegt oder die Wellen hochschlagen. Gemeinsam ankern wir sicher im Zielhafen.