Informationsarchitektur | Wireframes | UI Design
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.
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.
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.
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.
Informationsarchitektur | Wireframes | UI Design
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
Karten-Screenshots: https://www.google.de/maps/search/Hamburg - GeoBasis-DE/BKG (©2009)
Fotos Hundewiesen : https://unsplash.com/photos/5-zbFncFv-M, https://unsplash.com/photos/W-Ta6KgSdnY, https://unsplash.com/photos/RBp8uQdl9b8
Foto Profil: https://unsplash.com/photos/FtuJIuBbUhI
Mockup: https://mockup.photos/doyoumockup/801206/man-holding-iphone-x
Das klingt gut für dich und du würdest gerne mit mir zusammenarbeiten? Schreib mir oder ruf mich an.
Das klingt gut für dich und du würdest gerne mit mir zusammenarbeiten? Schreib mir oder ruf mich an.
Das klingt gut für dich und du würdest gerne mit mir zusammenarbeiten? Schreib mir oder ruf mich an.
© Felix Häußer
© Felix Häußer