Urb×-App

Urban Exploring App

Urb×- App

App-Screenshot of Urban Exploring App
App-Screenshot of Urban Exploring App with background
App-Screenshot of Urban Exploring App with photo grid
App-Screenshot of Urban Exploring App with map

Idee & Herausforderung
Das Projekt ist im Rahmen des Moduls "Interaction Design 1" entstanden. Die Aufgabe war es eine eigene App-Idee zu entwickeln und diese in einem High-Fidelity-Prototyp mit einem Design-Tool der Wahl umzusetzen. Aufgrund meiner großen Freude an der Fotografie und dem Erkunden außergewöhnlicher und abgeschiedener Orte, hatte ich die Idee, diese beiden Themenbereiche zu verknüpfen. "Urban Exploring" beschreibt eine wachsende Community von häufig abenteuerlichen und fotografieinteressierten Menschen, die gerne abgeschiedene, urbane, oft dem Verfall überlassene Orte erkunden und deren besondere Atmosphäre in Fotos festhalten. Wichtig ist es trotzdem immer die persönliche Sicherheit und den Schutz der Orte zu beachten. Mit meiner App möchte ich eine Plattform zur Inspiration für diese wachsende Bewegung bieten. Es soll ein Netzwerk an der Schnittstelle von Fotografie und Abenteuer sein. Menschen sollen dazu animiert werden ihre Freizeit wieder mehr draußen zu verbringen, Neues zu erleben und ihre Umwelt bewusster wahrzunehmen. Besonders herausfordernd im Rahmen des Projekts war es die große Menge an Informationen mit Fotos, Kartenansichten, Tabellen strukturiert zu gestalten. Außerdem war es mir wichtig ein Interface mit hohem Wiedererkennungwert zu schaffen sowie auch schon eine Art Marke zu gestalten, um eine große Akzeptanz in der potenziellen Zielgruppe erreichen zu können.



User Needs
Durch Gespräche mit Mitstudierenden, den Austausch in Internetforen zum Thema Urban Exploring und die Recherche innerhalb des Themenbereichs konnten diverse User Needs an eine potenzielle App für dieses Topic erkannt werden. Außerdem war der Pitch der App-Idee vor dem Plenum des Kurses und hier gesammeltes Feedback sehr hilfreich für die weitere Verfeinerung des Konzepts. Kenntnisse im Laufe des Prozesses waren zum Beispiel:
- Menschen mit Urban Exploring als Hobby tauschen sich gerne aktiv zu den gesammelten Erfahrungen aus
- Urban Exploring ist oft mit dem Fotografieren als Hobby verbunden
- es ist oft schwierig für Neulinge in diesem Bereich verlässliche Informationen und einen strukturierten Überblick über interessante Orte in ihrer Umgebung zu bekommen
- viele Menschen mögen spontane Ausflüge und wollen neue Abenteuer in ihrer gewohnten Umgebung erleben
- heutzutage wollen Leute, die neu in eine Stadt ziehen, ihre Heimat intensiv und auf eine außergewöhnliche Art kennenlernen
- als Urban Explorer bin ich neugierig, möchte Erfahrungen über eine normale touristische Erkundung hinaus sammeln und habe Lust auf Nervenkitzel
- viele nehmen sich vor wieder mehr Zeit draußen zu verbringen und Abenteuer neben ihrem normalen Alltag zu erleben
Um diese User Needs zu berücksichten weist die App zum Beispiel einen sehr hohen visuellen und fotografischen Anteil auf und bietet dem Benutzer die Möglichkeit eines intensiven Austauschs innerhalb der Community.



Scribbles, Wireframes & High-Fidelity-Screens
Nach ersten Scribbles auf Papier habe ich die groben Strukturen und UI-Elemente in einen ersten groben digitalen Wireframe übertragen. Nach und nach ist mithilfe des Prototyping-Programmms daraus ein High-Fidelity-Prototyp entstanden. Unten sieht man jeweils drei Beispielscreens der verschiedenen Ausarbeitungsstufen.



Urban Exploring line icons, objects and elements in cityscape
Urban Exploring line icons, objects and elements in cityscape
Urban Exploring line icons, objects and elements in cityscape
App-Screenshots of Urban Exploring App with gradient background
Interaktiven Adobe XD-Prototyp anzeigen ➞

Gestaltung
Der Name der App urb× steht für "urban exploring" und erzeugt in Zusammenhang mit dem hochgestellten "X" als Designelement eine Marke. Dieses "X" steht gleichzeitig als Metapher für die Ortsmarkierung auf einer Landkarte und wird im Header der verschiedenen Menüs immer wieder aufgegriffen. Dieses Designpattern fördert die Wiedererkennung der Marke und erleichtert die Orientierung in den Kategorien. Der Satz "Explore your city, deeper than ever." soll gleich zum Einstieg für die tendenziell junge Zielgruppe einen Slogan bieten, der die Nutzer neugierig macht. Das gesamte Interface ist darauf ausgelegt, Fotos seiner Abenteuer an urbanen Orten zu teilen. Der Content des eigenen Netzwerks wird unter verschiedenen Tabs abgebildet. Man kann sich z. B. die meistbesuchten Urban Places oder beliebtesten Beiträge anzeigen lassen. Außerdem ist es möglich sich in einer Karten- und Radaransicht interessante, veröffentlichte Orte in der Nähe anzeigen zu lassen. Die Nutzer können sich in der Community zu Fotos und Orten untereinander austauschen. Die Bottom-Navigation mit ihren minimalistischen Icons bietet eine einfache Möglichkeit durch die Menüs zu wechseln. Das Interface ist zeitgemäß minimalistisch im Flat-Design gehalten. Auffallend ist die Farbgestaltung die sich vor allem aus einem hellen Türkis und einem dunklen Blau zusammensetzt. Diese beiden Farben bilden einen guten Kontrast zueinander und wirken in Kombination modern und als Eyecatcher. Der wiederkehrende Farbverlauf dieser beiden Töne verleiht dem UI eine besondere Tiefe und ist eine Metapher für "das Unbekannte" und den oft mystischen Charakter von Urban Exploring. Außerdem kann das Türkis und der Farbverlauf Assoziationen zu urbanen Stadtkulissen, Neonlichtern und der Abenddämmerung wecken. Die im Prototyp zu sehenden Fotos sind alle bei meinen eigenen Fototouren und Abenteuern beim Urban Exploring entstanden und waren eine hervorragende Möglichkeit das Interface mit interessanten und realistischen Content zu versehen. Durch dieses Projekt hatte ich eine gute Gelegenheit zwei meiner großen Interessenbereiche in einer App-Idee zu vereinen und mich auf spannende Art und Weise mit unterschiedlichen Aspekten des UI-/UX-Designs auseinanderzusetzen.


App-Screenshots of Urban Exploring App with gradient background
Urban Exploring line icons, objects and elements in cityscape

Illustration für After Effects Tutorial-Video

Intro meines Urban Exploring Tutorial-Videos

KURS
IXD1
TOOLS
Adobe XD
BEWERTUNG
1,3
TAGS
App
Prototyping
Urban Exploring
Fotografie
Made with ×3
2023 Jan Becker
EN