2021
Hunderunde_weiß

Wannado: Hunde­runde

Konzept eines Hundewiesen-Portals

Informationsarchitektur | Wireframes | UI Design

Ziel

Hunderunde soll ein Webportal werden, auf dem Hundebesitzer:innen Auslaufzonen für ihre Fellnase ausfindig machen können. Das freie Laufenlassen von Hunden ist in vielen Städten so reglementiert, dass Hunde nicht beliebig ohne Leine laufen gelassen werden dürfen. So wird es notwendig, ausgewiesene Hundewiesen oder -auslaufzonen zu finden, um einerseits Hunde frei laufen zu lassen und dabei keine Menschen zu belästigen, aber auch um andere Hunde für das gemeinsame Spiel zu treffen.

Herausforderung

Nach der Hundeadoption stehen Besitzer:innen in entsprechenden Gemeinden vor der Frage, wo in ihrer Umgebung sie solche Zonen finden können. Das ist nicht immer leicht – und vor allem ganz oft nicht nutzerfreundlich. Am Beispiel Hamburg lässt sich das gut verdeutlichen. Für eine ordentliche Angabe der „genauen Lage der Flächen“ sieht sich nicht die Stadt verantwortlich, sondern sie gibt es in die Hand der Bezirke. Von zentraler Stelle wird lediglich ein konsolidiertes 20-seitiges PDF für die Bürger bereitgestellt, in dem Zonen alphabetisch geordnet mit Beschreibungen wie „Bebelallee“ – einer 2,5km langen Straße – aufgelistet sind. Jeder Bezirk ist selber für die Aufbereitung zuständig. Einige Bezirke gehen über die textuelle Beschreibung nicht hinaus – und das bei 238 Zonen.

Als Hundebesitzer:in gibt es verschiedene Anlässe, nach Auslaufzonen zu suchen: nach Adoption des Hundes, nach einem Umzug in eine andere Gegend, um spannende Ausflüge mit dem Hund zu machen oder aber wenn man einen Städtetrip macht. Es gibt jedoch kein Portal, in dem deutschlandübergreifend nach offiziellen Hundeauslaufzonen gesucht werden kann - das soll mit Hunderunde gelöst werden. Nutzerfreundlich und visuell - in Kartendarstellung.

Zielgruppen

Hunderunde versteht sich als Vermittler zwischen Stadtverwaltungen und Hundebesitzer:innen - und hat damit auch als Haupt-Zielgruppe eben die Herrchen und Frauchen. Die Mitarbeit der Stadtverwaltungen ist jedoch bedeutend für den Erfolg des Portals – so braucht es also Funktionen wie die Einbindungsmöglichkeit in Stadt-Portale, um deren Unterstützung zu fördern. Nicht zuletzt muss sich das Projekt wohl finanziell tragen – das kann hoffentlich mit qualitativer Werbung erreicht werden – für Werbetreibende wie Hundeschulen oder Tierhandlungen.

Lösung

Als visueller Stil drängt sich für Hundebesitzer:innen eine regelrecht kitschige Gestaltung auf. Da allerdings auch Stadtverwaltungen und Werbetreibende vom Portal überzeugt werden sollen, darf ein professionellerer, moderner Ton angeschlagen werden. Da das Portal von seiner Nutzerfreundlichkeit leben soll, muss es eine einfache und unaufdringliche Designsprache sprechen und dabei doch das Herz von Hunde-Mamas und -Papas ansprechen. 

Im Zuge dieses Projekts soll eine erste Gestaltungslösung für das Minimum Viable Product von Hunderunde entstehen – dabei wird sich für den Moment auf den B2C-Aspekt konzentriert.

Live und in Farbe

Wannado: Hunderunde

Konzept eines Hundewiesen-Portals

Informationsarchitektur | Wireframes | UI Design

Ziel

Hunderunde soll ein Webportal werden, auf dem Hundebesitzer:innen Auslaufzonen für ihre Fellnase ausfindig machen können. Das freie Laufenlassen von Hunden ist in vielen Städten so reglementiert, dass Hunde nicht beliebig ohne Leine laufen gelassen werden dürfen. So wird es notwendig, ausgewiesene Hundewiesen oder -auslaufzonen zu finden, um einerseits Hunde frei laufen zu lassen und dabei keine Menschen zu belästigen, aber auch um andere Hunde für das gemeinsame Spiel zu treffen.

Herausforderung

Nach der Hundeadoption stehen Besitzer:innen in entsprechenden Gemeinden vor der Frage, wo in ihrer Umgebung sie solche Zonen finden können. Das ist nicht immer leicht – und vor allem ganz oft nicht nutzerfreundlich. Am Beispiel Hamburg lässt sich das gut verdeutlichen. Für eine ordentliche Angabe der „genauen Lage der Flächen“ sieht sich nicht die Stadt verantwortlich, sondern sie gibt es in die Hand der Bezirke. Von zentraler Stelle wird lediglich ein konsolidiertes 20-seitiges PDF für die Bürger bereitgestellt, in dem Zonen alphabetisch geordnet mit Beschreibungen wie „Bebelallee“ – einer 2,5km langen Straße – aufgelistet sind. Jeder Bezirk ist selber für die Aufbereitung zuständig. Einige Bezirke gehen über die textuelle Beschreibung nicht hinaus – und das bei 238 Zonen.

Als Hundebesitzer:in gibt es verschiedene Anlässe, nach Auslaufzonen zu suchen: nach Adoption des Hundes, nach einem Umzug in eine andere Gegend, um spannende Ausflüge mit dem Hund zu machen oder aber wenn man einen Städtetrip macht. Es gibt jedoch kein Portal, in dem deutschlandübergreifend nach offiziellen Hundeauslaufzonen gesucht werden kann - das soll mit Hunderunde gelöst werden. Nutzerfreundlich und visuell - in Kartendarstellung.

Zielgruppen

Hunderunde versteht sich als Vermittler zwischen Stadtverwaltungen und Hundebesitzer:innen - und hat damit auch als Haupt-Zielgruppe eben die Herrchen und Frauchen. Die Mitarbeit der Stadtverwaltungen ist jedoch bedeutend für den Erfolg des Portals – so braucht es also Funktionen wie die Einbindungsmöglichkeit in Stadt-Portale, um deren Unterstützung zu fördern. Nicht zuletzt muss sich das Projekt wohl finanziell tragen – das kann hoffentlich mit qualitativer Werbung erreicht werden – für Werbetreibende wie Hundeschulen oder Tierhandlungen.

Lösung

Als visueller Stil drängt sich für Hundebesitzer:innen eine regelrecht kitschige Gestaltung auf. Da allerdings auch Stadtverwaltungen und Werbetreibende vom Portal überzeugt werden sollen, darf ein professionellerer, moderner Ton angeschlagen werden. Da das Portal von seiner Nutzerfreundlichkeit leben soll, muss es eine einfache und unaufdringliche Designsprache sprechen und dabei doch das Herz von Hunde-Mamas und -Papas ansprechen. 

Im Zuge dieses Projekts soll eine erste Gestaltungslösung für das Minimum Viable Product von Hunderunde entstehen – dabei wird sich für den Moment auf den B2C-Aspekt konzentriert.

Live und in Farbe

 

Details 

Navigation

Hunderunde kumuliert nahe beieinanderliegende Hundewiesen zu einzelnen Pins mit Countern. So werden sie auch interagierbar. Bei Tap auf einen Pin wird so gezoomt, dass alle entsprechenden Hundewiesen im Viewport liegen.

Die Suche kennt verschiedene Zustände, je nachdem ob sie leer, aktiv und/oder ausgefüllt ist. Es gibt verschiedene Arten von Pins, deren Art sich nach Tap als Untertitel offenbart.

Hundewiesen

Sobald Hundewiesen groß genug sind, werden sie als Pfade auf der Karte angezeigt. Ein Tap drauf öffnet die Hundewiesen-Details als halbes Sheet mit klarem Anschnitt. Das Sheet kann auf volle Höhe gezogen werden und scrollt danach. Tap auf die durchschnittliche Bewertung scrollt zur Sektion.

Filter & Karteninteraktion

Filter und Karteneinstellungen sind über den entsprechenden Button oben rechts erreichbar. Ein entsprechender Indikator auf dem Button symbolisiert aktive Filter und ein Hinweis gibt in Daumenreichweite die Möglichkeit, sie zu deaktivieren.

Bei langem Tap auf der Karte wird ein roter Pin gesetzt und das Ziel als Sheet angezeigt mit der Option, neue Hundewiesen vorzuschlagen - ein entsprechender User Flow ist allerdings nicht im Scope für den MVP.

Hauptmenü

Im Hauptmenü kann sich der Nutzer anmelden (ein weiterer Flow, der nicht in diesem Projekt abgebildet werden konnte), Einstellungen vornehmen, Hilfe bekommen und rechtliche Informationen abrufen.

Die Merkliste bietet einen Shortcut auf den „Nur Favoriten“-Filter.

Color, Typography & Grid

Es gibt ein sehr übersichtliches Set an Farben, die nach grundlegenden und semantischen Farben unterteilt sind. Schriftschnitte sind auch in wenigen Ausführungen vorhanden. copy100 in green150 ist im Gegensatz zu den anderen Farben in SemiBold statt Medium gesetzt, da sonst der Kontrast nicht ausreicht. Die Gestaltung folgt einem 8px-Grid, das es auch erlaubt, unterschiedliche Außenabstände in verschiedenen Kontexten zu wählen.

Es werden außerdem die Definitionen des Material Design für Erhebungen genutzt. Diese bringen die naturnahe Nachbildung von Schatten bei gestreutem Licht mit. Dadurch lassen sich verschiedene Elemente hierarchisch ordnen und Interaktionen hervorheben.

Logo, Icons & Komponenten

Das Logo kann als Lok- und als Star-Variante verwendet werden. Die Schrift ist dabei in display100 gesetzt und das Logo bewegt sich im 8px-Grid bei 64 Pixel. Die Farben sind black100 und green100.

Für Hunderunde wurden gesonderte Icons entworfen, statt sich auf vorgefertigte Sammlungen zu verlassen. So kann ein einheitlicher und markengerechter Stil gepflegt werden. Sie haben 2px Strichstärke unabhängig von der Skalierung, um sauber auf Pixeln dargestellt zu werden und können in beliebigen Farben gesetzt werden.

Außerdem soll an dieser Stelle ein kleiner Abriss der entstandenen Komponenten gegeben werden. Hunderunde ist vollständig nach dem Prinzip des Atomic Design gestaltet.

Quellenangaben

Weitere Projekte

Priojet
Wireframing & Interactive Prototype
Bosch Global Network
UX Vision
OTTO Design System
Design System Management
Wedolo
Konzeption & Styleguide-Entwicklung
Luisa Münch
Konzeption & Entwicklung
Porsche Design
Konzeption
Bosch Brand Guide
Konzeption
Porsche Financial Calculator
Konzeption
SAP Varianten­konfiguration
Konzeption & Entwicklung
SAP Design Eye Opener
Trainer

Zusammenarbeiten

Zusammenarbeiten

Zusammenarbeiten

Das klingt gut für dich und du würdest gerne mit mir zusammenarbeiten? Schreib mir oder ruf mich an.

mail@felixhaeusser.de
+49 172 6169090

Das klingt gut für dich und du würdest gerne mit mir zusammenarbeiten? Schreib mir oder ruf mich an.

mail@felixhaeusser.de
+49 172 6169090

Das klingt gut für dich und du würdest gerne mit mir zusammenarbeiten? Schreib mir oder ruf mich an.

mail@felixhaeusser.de
+49 172 6169090