Briefing
Aufgabenstellung an mich
Die Aufgaben bestanden darin, für den Online-Shop ein ansprechendes Design und eine gute User Experience für die Kunden und Fotografen zu entwickeln.
Das Look and Feel sollte dabei einen modernen, leichten und freundlichen Charakter transportieren.
Das Look and Feel sollte dabei einen modernen, leichten und freundlichen Charakter transportieren.
Probleme der Kunden und Fotografen
Der Kunde hat wenig Zeit, kein oder wenig professionelles Fotografiewissen und Fotoequipment, um die Bilderproduktion selbst durchführen zu können. Deshalb möchte er die Leistung extern abgeben.
Die Fotografen möchten sich auf die Produktion von Bildern konzentrieren, statt auf den Bilderverkauf und deren Abwicklung. Um Zeit zu sparen, möchten sie die den Verkauf und die Abwicklung deshalb extern abgeben.
Die Fotografen möchten sich auf die Produktion von Bildern konzentrieren, statt auf den Bilderverkauf und deren Abwicklung. Um Zeit zu sparen, möchten sie die den Verkauf und die Abwicklung deshalb extern abgeben.
Ziel des Unternehmens
Ziel ist es, Kunden und Fotografen zu vermitteln, welche Produkte und Dienstleistungen die GartenbildAgentur anbietet. Der Kunde sollte sich schnell abgeholt fühlen. Die Fotografen sollten sich eingeladen fühlen, sich bei der GartenbildAgentur zu bewerben, damit ein breites Spektrum an Gartenbildfotos angeboten werden kann.
UX Design
Persona
Die Persona ist der Prototyp einer Zielgruppe und dokumentiert gleiche oder sehr ähnliche Merkmale, die die Personen innerhalb der Gruppe aufweisen. Sie beschreibt Kernprobleme, -bedürfnisse und Ziele und hilft dabei, die Zielgruppe greifbar zu machen. Mit ihr ist es möglich, die Kerninformationen im Blick zu behalten und es können von Beginn an fundierte Entscheidungen bei der Entwicklung nutzerfreundlicher Produkte getroffen werden.
Empathy Map
Die Empathy Map geht auf empathischer Ebene tiefer ein und schärft das Bewusstseitn für die Kundensicht. Dabei wird der Zielgruppenvertreter auf vier Dimensionen analysiert.
Customer Journey Map
Die Methode beschreibt die Reise eines Nutzers entlang aller Schritte vom Beginn einer Aufgabe bis zur Erreichung des gewünschten Ziels. Dabei können Touchpoints, Tätigkeiten, Gefühle und Probleme erfasst und dokumentiert werden. Die Customer Journey hilft dabei, das Bewusstsein für jeden Schritt zu schärfen und Lösungen für den Nutzer zu erarbeiten.
Affinity Map
Die Affinity Map erleichtert die Verarbeitung mehrerer unterschiedlicher Informationen oder Ideen, indem Ähnlichkeiten notiert und entsprechend gruppiert werden. Dabei bezieht sie Informationen von Stakeholdern und Kunden mit ein. Die gruppierten Informationen helfen während des gesamten Entwicklungsprozesses keine Berücksichtigungen zu übersehen.
Informationsarchitektur
Die Informationsarchitektur zeigt wo Inhalte platziert werden, welche Inhalte in Beziehung zueinander stehen und in welcher Prioritätenabfolge sie dargestellt werden sollen. Damit ist die Informationsarchitektur ein hilfreiches Werkzeug, um die Strukturierung aller Inhalte festzulegen und einen Gesamtüberblick über das Projekt zu behalten. Bei der Erstellung der Architektur werden stets die Nutzerbedürfnisse berücksichtigt.
Sitemap
Die Sitemap zeigt das Inhaltsverzeichnis der Webseite und die hierarchischen Verknüpfungsstrukturen.
User Flow
User Flows stellen die Schritte grafisch dar, die ein Besucher durchlaufen muss, um eine Aktion auszuführen. Dabei werden Fallunterscheidungen, Start- und Endpunkte, Richtungen, Aktionen, Entscheidungsstellen und Eingaben visualisiert.
UI Design
Resultierende Lösungen für die nutzerzentrierte Gestaltung
Persona (aus Kundensicht von Silvia):
- Vertrauenserweckung: Unterbringung des Themenblocks „Über uns“ und dem Slogan „Ihr führender Gartenbild-Experte in Europa“ auf der Startseite und im Menü. Zudem platzierte ich offizielle Siegel im Footer.
- Unterschiedliche Gartenbild-Themen: Unterbringung von sechs Haupt-Themen auf der Startseite und im Menü. Nach Datenerhebung aus der IT konnte ich herausfinden, was die häufigsten Suchbegriffe sind und platzierte unter den sechs Haupt-Themen beliebte Keywords.
- Aktuelle Bildthemen: Unterbringung eines rotierenden Sliders auf der Startseite, der aktuelle Bilder vorschlägt, die meist zur Jahreszeit passen.
Empathy Map (aus Fotografensicht):
- Unsicherheit: Der Fotograf hat viele Fragen und diverse Unsicherheiten. Daher platzierte ich auf der Startseite einen Teaser, um den Fotografen abzuholen. Innerhalb des Teasers platzierte ich einen Link zu einer Unterseite, bei dem der Fotograf seine Fragen beantworten kann und Tipps bekommt, wie er seine Bilder erfolgreich verkaufen kann.
Customer Journey Map (aus Kundensicht von Silvia):
- Hierbei wurden die Punkte aus der Zeile „Lösungen“ der Customer Journey Map gestalterisch umgesetzt oder wurden aus Prioritätsgründen noch zurückgestellt.
- Durch die Customer Journey Map hat sich bestätigt, dass ein rotierender Startseiten-Slider Sinn ergibt.
Gestalterische Gedankengänge (aus meiner Sicht):
- Nach Vergleich diverser Webseiten zum Thema Garten (UI-Benchmarking), fiel mir auf, dass häufig ein ähnlicher warmer Grünton verwendet wird, der aus meiner Sicht etwas verstaubt wirkt. Um der GartenbildAgentur einen moderneren freundlichen Touch zu geben, setzte ich ein kühleres Grün für die Corporate Identity ein.
- Da es sich bei der GartenbildAgentur um eine Bildagentur handelt, wollte ich den Fotos möglichst viel Raum zur Verfügungs stellen und achtete darauf, auf der gesamten Webseite großflächige Fotos einzusetzen.
Wireframes
Wireframes stellen das Konzept der Webseite als Drahtgittermodell dar. In dieser Entwicklungsphase können besonders effizient Änderungen durchgeführt werden. Die Grafik zeigt einige Beispiele der Desktop und Mobile Wireframes des Projekts.
Design System
Ein Design-System ist eine Sammlung von wiederverwendbaren Komponenten mit klaren Regeln, Prinzipien, Code-Snippets und Einschränkungen für die Designentwicklung, um eine konsistente CI und UI zu gewährleisten.
Desktop Mockups
Mockups sind ein statisches Vorführmodell der Webseite, um Design und Funktionalität zu demonstrieren.
