*

Gestaltung einer interaktiven Kartenwebsite

2020—2021
UX / UI / Markendesign

Website mit einer interaktiven Karte, die einen Überblick über kulturelle Angebote im Berliner Bezirk Lichtenberg gibt. Ziel war es, die Wahrnehmung des Bezirks Lichtenberg zu verändern und seine lebendige Kunstszene sichtbar zu machen.

landing page screenshot cultural map Lichtenberg with some explanatory elements like one tour visualisation

Für das Bezirksamt Lichtenberg haben wir eine interaktive Karte entworfen, die einen Überblick über das kulturelle Angebot im Berliner Bezirk Lichtenberg gibt. Jedes Angebot ist mit einem Pin auf der Karte positioniert, der klickbar ist und nähere Informationen preisgibt. Ziel unserer Kundin war es, die öffentliche Wahrnehmung des Bezirks Lichtenberg zu verändern und seine lebendige Kulturszene sichtbar zu machen.

Die Kundin war in den gesamten Gestaltungsprozess einbezogen. Angefangen mit einem Click-Dummy bis hin zu einer eigens entwickelten Bewertungsmetrik machten wir es ihnen leicht, die User Experience zu bewerten und demokratisch zwischen verschiedenen Designs zu entscheiden.

Eine stichwortbasierte Suchfunktion ergänzt die Kartenschnittstelle. Alle unsere Webdesigns sind nutzer*innenorientiert, barrierefrei und passen sich den jeweiligen Ausgabegeräten an. Die in der Karte verwendeten Farben sind für Menschen mit eingeschränktem Sehvermögen optimiert, was besonders wichtig ist, da die Arten der kulturellen Orte und Veranstaltungen farblich kategorisiert sind.

Eine weitere Funktion der Website ist, dass neue Karteneinträge über ein einfaches Online-Formular vorschlagen werden können. Diese können seitens der Kundin mit einem einfachen Klick genehmigt oder zur Bearbeitung zurückgeschickt werden. Wir berücksichtigen stets den Verwaltungsaufwand, den unsere Kund*innen für ihre Projekte benötigen, und konzipieren entsprechend den verfügbaren Ressourcen. Dies ist die Grundlage für erfolgreiche und nachhaltige digitale Produkte.


Kunde

Bezirksamt Lichtenberg von Berlin, Amt für Weiterbildung und Kultur

Mitwirkende

Konzept: black flamingo

Implementierung: Digitale Strategieberatung Vincent Van Uffelen

Design: typoint und DGA

Link zum Project

kultur-in-lichtenberg.de/

*

Fakten zum Projekt

Ein ausreichender Farbkontrast ist sehr wichtig, um Barrierefreiheit zu gewährleisten. Auf der Website color contrast-checker können Sie jederzeit überprüfen, ob der von Ihnen verwendete Kontrast ausreichend ist.

color contrast-checker

Es ist uns sehr wichtig, dass die digitalen Produkte, die wir entwickeln, für unsere Kund*innen unabhängig und Ressourcen schonend verwaltbar bleiben. Zum Beispiel Online-Formulare können ein hilfreiches Instrument sein, um einem Team das Leben zu erleichtern.

Wenn es um die Gestaltung komplexer Inhalte geht, ist Struktur der Schlüssel. Um die Dinge zu ordnen und filterbar zu machen, sind sogenannte Tags/Keywords in der digitalen Welt das effizienteste Mittel.

Besonders wenn Sie ein digitales Produkt entwickeln, das hauptsächlich der Orientierung dient, ist ein Mobile-First-Ansatz wichtig.

Ohne die Verwaltungen unseres Landes würde nichts funktionieren. Ihnen bei der Digitalisierung zu helfen und dadurch effizienter zu arbeiten, ist uns eine Herzensangelegenheit.

Die Karte basiert auf der individuell gestalteten Open-Source-Lösung »mapbox«. Im Vergleich zur Verwendung von Google Maps entstehen dadurch keine zusätzlichen Kosten.

mapbox.com

Die Karte basiert auf einer nachhaltigen .svg-Lösung, die im Vergleich zu einer Karte, die auf datenintensiven .png-Dateien basiert, Energie spart.