Autoren:
Hannah Geißler, Sara Heinrich, Saskia Tröge, Fabian Knabel

Dieser Artikel behandelt die Entwicklung des digitalen Fotoguide "picta", der Einsteigern interaktive Tutorials und organisierte Touren zur Fotografie bietet. Ziel ist es, ästhetisch ansprechende Fotoorte zu präsentieren und Nutzer zur kreativen Entdeckung ihrer Umgebung zu inspirieren.


Ideenfindung

In einer Webanalyse wurden bewährte Praktiken durch die Analyse von verschiedenen Medien, wie der Webseite "Powerhouse" und dem Buch "GERMAN ROAMERS", identifiziert und dienten später als Inspiration für die Gestaltung des Erlebnisguides. Ein weiterer Schwerpunkt liegt auf dem Brainstorming von Marken, Nischen und Themen im Kontext der Fotografie, um eine umfassende Perspektive für die Entwicklung des Erlebnisguides zu schaffen. Die Ergebnisse zeigen die Wichtigkeit kreativer Vielfalt und zielgruppenorientierter Gestaltung. Die Schlussfolgerung aus den Lernerfahrungen betont die Fokussierung auf Zielgruppenbedürfnisse und den Wunsch nach inhaltlicher Qualität, um ein erfolgreiches und ansprechendes Erlebnis zu gestalten.


Zielgruppe

Die Zielgruppenanalyse erfolgt durch ein strukturiertes Interviewformat, das in drei Teile unterteilt ist. Dabei werden allgemeine Informationen zur Fotografieerfahrung, Ausrüstung, Motivation, Internetnutzung und technologischen Gewohnheiten sowie spezifische Fragen zu fotografie- und reisebezogenen Aspekten abgefragt.

Die Zielgruppensegmentierung konzentriert sich auf die adaptiv-pragmatische Mitte mit hoher Anpassungsbereitschaft. Zwei erstellte Personas, Philieppe und Vera, repräsentieren unterschiedliche Facetten der Zielgruppe.

Die Future State Szenarios bieten visionäre Einblicke in die potenzielle App-Nutzung und den Lebensstil der Nutzer. Diese Szenarien ermöglichen eine gezielte Gestaltung der App für maximale Benutzerrelevanz.

Die Analyse schafft eine solide Grundlage für die Ausrichtung der App an den Bedürfnissen und Präferenzen der Zielgruppe, um eine optimale Benutzererfahrung zu gewährleisten.

Saskia Zielgruppe
Saskia Zielgruppe

Kommunikation und Markenerlebnis

In der Entwicklung unserer Fotoanwendung haben wir durch eine gründliche Analyse eine klare Strategie für Kommunikation und Markenerlebnis entwickelt. Sorgfältig definierte Anforderungen betonten Benutzerfreundlichkeit, klare Informationen und soziale Interaktion. Die Marken- und Nutzerziele wurden identifiziert, wobei die Förderung der Fotografie-Leidenschaft und eine aktive Community im Fokus stehen. Die Brand Story integriert diverse Elemente für eine ausgewogene Markenerfahrung.

Strategische Marktpositionierung durch Analyse von Konkurrenten betonte die Qualität|Quantität und Passiv|Aktiv-Dimensionen. Drei Verhaltensattribute, nämlich "Einfühlsam", "Inspirierend" und "Unterstützend", wurden definiert, um eine benutzerfreundliche, inspirierende und unterstützende App zu schaffen. Ein visuelles Markenleitbild in Form eines Moodboards wurde gestaltet, welches klare Typografie, ein strukturiertes Layout, ein Schwarz-Weiß-Farbschema mit Akzentfarben und eine authentische Bildsprache umfasst.

Zusammenfassend bildet die sorgfältige Analyse und Planung eine solide Grundlage für die Entwicklung einer benutzerfreundlichen Fotoanwendung. Klar definierte Anforderungen, eine strategische Marktpositionierung und die Identifizierung von Verhaltensattributen ermöglichen ein tieferes Verständnis der Zielgruppe und dienen der weiteren Optimierung des Produkts.

Hannah Marken und Nutzerziele
Hannah Marken und Nutzerziele

Nutzererlebnis planen und Ideen generieren

Im Rahmen der Nutzererlebnisplanung haben wir Sitemaps und Process Flows als entscheidende Instrumente genutzt. Die Sitemap diente der hierarchischen Strukturierung der Webseite, während Process Flows den Ablauf von Interaktionen visualisierten.

Die Ideenentwicklung erfolgte durch die 635-Methode und das Kreativschreiben. Die 635-Methode betonte schnelle Ideenproduktion und Vielfalt, während das Kreativschreiben zukünftige Benutzererlebnisse fokussierte.

Sitemaps und Process Flows erwiesen sich als unverzichtbare Werkzeuge für klare Strukturen und effiziente Interaktionen, wobei strategische Positionierung und Zielgruppenanalyse die Basis für erfolgreiche Markenkommunikation bildeten.

Hannah Nutzererlebnis
Hannah Nutzererlebnis

Individuelle Ideenfindung

Die Ideensammlung für die Gestaltung umfasste die Erstellung individueller Styleguides basierend auf dem Look and Feel von viel Weißraum und einem eher minimalistisch brutalistischen Stil. Jedes Gruppenmitglied erstellte Stilstudien und dokumentierte diese, um am Ende einen individuellen Styleguide zu präsentieren. Dieser umfasste Überlegungen zu Typografie, Farben, Layout und anderen gestalterischen Möglichkeiten. Die Skizzen dienten als visueller Einblick in die Struktur der Website und spigelten die jeweiligen Styleguides wieder. Hierbei hatte jeder verschiedene Ansätze die dann in den digitalen Wireframes unterschiedlich realisiert wurden.

Styleguide Sara
Styleguide Sara

Digitale Umsetzung

Der Fokus liegt auf dem Umsetzen von Ideen und der Auswahl der richtigen Elemente. Zunächst werden die Elemente aus den Skizzen in Figma umgesetzt, ohne jedoch einen interaktiven Prototypen zu erstellen, sondern vielmehr die Strukturierung der Inhalte und Seitenlayouts zu berücksichtigen.

Nach unseren individuellen Entwürfen haben wir uns dazu entschieden Saras minimalistisches Layout und Design zu übernehmen und mit den interaktive Elemente von Hannahs Wireframes zu kombinieren. Daher haben Sara und Hannah den finalen interaktiven Wireframe gebaut (finale Gestaltung) und Saskia und Fabian sich um die Recherche gekümmert.

Sara Wireframe
Sara Wireframe

Recherche

Während der Recherche wurde intensiv über den textuellen und bildlichen Inhalt nachgedacht, um die inhaltlichen Konzepte festzulegen, die in die Webseite integriert werden sollen. Diese Konzepte bilden die Grundlage für weitere Inhalte wie Fotografie, Herausforderungen und Touren. Es wurde auch über die zu integrierenden Locations nachgedacht, um daraus Inhalte und Herausforderungen zu entwickeln. Die Persona Vera wird als Standardbenutzer betrachtet, und der Inhalt wird aus ihrer Perspektive betrachtet.

Saskia Mapbox
Saskia Mapbox

Finale Gestaltung

Die finale Gestaltung des Projekts umfasst verschiedene Aspekte, die einen umfassenden Überblick über die Schlussphase des Entwicklungsprozesses bieten. Dies beinhaltet die Gestaltung des finalen Look and Feel, des abgestimmten Styleguides, des minimalistisch gestalteten Logos und der erstellten Bauelemente. Es wird eine detaillierte Betrachtung der Gestaltung für Mobile, Tablet und Desktop durchgeführt, wobei der Ansatz "mobile first" konsequent verfolgt wird.

Der finale Look and Feel des Projekts kombiniert Elemente von Brutalismus und Minimalismus. Die Gestaltungselemente wie Layout, Farben, Bilder und Schriften werden dort festgelegt. Vorallem haben wir uns für einen großen Schriftschnitt der Montserrat und nur eine Akzentfarbe entschieden.

Der finale Styleguide wird an das Look and Feel angepasst, wobei Aspekte wie Icons, Linienstärken, Farbgestaltung und Schriftgrößen festgelegt werden.

Das finale Logo, einschließlich des Favicons, wurde erstellt und dessen Abstände berechnet.

Die erstellten Bauelemente, darunter Navigationselemente, Ausklappfenster, interaktive Elemente wie Buttons und horizontales Scrollen für Bilder, werden auch hier erläutert.

Die Gestaltung für Mobile, Tablet und Desktop wird jeweils separat betrachtet, wobei wir spezifische Anpassungen und Herausforderungen für jedes Gerät ausführlich diskutiert haben.

Schlussendlich waren wir zufrieden mit unserem erstellten Wireframe auch wenn manche Kleinigkeiten noch nicht perfekt waren wie Bildformate oder Abstände. Vorallem haben wir daraus gelernt wie sehr man Design doch mathematisch begründen kann und wie viel reduktion doch sinnvoll ist.

Hannah & Sara Tablet Wireframe für Challenge, Tour und Account
Hannah & Sara Tablet Wireframe für Challenge, Tour und Account
Figma Datei

Realisierung mit HTML und CSS

Schlussendlich haben wir uns wieder in zwei Gruppen aufgeteilt und den Wireframe individuel umgesetzt. Daraufhin haben wir unsere einzelnen Ideen zusammengefügt und sind auf dieses Ergebnis gekommen.

Fabian Mok Up
Fabian Mok Up