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 zu entwickeln.
Das Look and Feel sollte dabei einen modernen, höherpreisigen Eindruck transportieren.
Das Look and Feel sollte dabei einen modernen, höherpreisigen Eindruck transportieren.
Probleme der Kunden
Der Kunde hat wenig Zeit, kein oder wenig professionelles Fotografiewissen, kein Fotoequipment und Personal, um die Bilderproduktion selbst durchführen zu können. Deshalb möchte er die Leistung extern abgeben.
Ziel des Unternehmens
Ziel ist es, Kunden zu vermitteln, welche Produkte und Dienstleistungen House of Pictures anbietet. Der Kunde sollte sich schnell abgeholt und inspiriert fühlen.
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.
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 Anna):
- Vielfalt an Einrichtungs-Themen und Bildinspirationen: Damit Anna einen schnellen Eindruck davon bekommt, welche Themen angeboten werden, habe ich fünf Überbegriffe für das Hauptmenü verwendet. Zudem platzierte ich auf der Startseite einen Bereich mit Bildinspirationen, die regelmäßig ausgetauscht werden, um für die Stammkunden noch mehr Variation reinzubringen.
- Hohe Qualität: Hierfür platzierte ich einen vollfächigen automatisch rotierenden Bilderslider auf der Startseite, damit der Kunde einen schnellen Eindruck von der Bildqualität bekommt.
- Wenig Zeit für Bildrecherche: dafür analysierte ich Bilderkeywords und führte Stakeholdergespräche, um die wichtigsten Punkte für einen Suchfilter zu definieren, den ich auf der Resultspage platzierte.
Empathy Map (aus Kundensicht von Anna):
- Vertrauenswürdigkeit, Support und die Frage nach Kundenbeispielen: um Annas Fragen und Bedürfnissen zu diesen drei Punkten nachzukommen, entschied ich mich dazu, die Menüpunkte „About“ und „Contact“ hinzuzufügen. Dafür gestaltete ich Unterseiten, die das Unternehmen beschreiben, Projektbeispiele auflisten und Kontaktpersonen zeigen. Für ein besseres Support- und Vertrauensgefühl setzte ich große Personenfotos ein und platzierte Zeitschriftencover bekannter Marken, die Professionalität und damit Sicherheit und Vertrauen ausstrahlen.
Customer Journey Map (aus Kundensicht von Anna):
- Hierbei wurden die Punkte aus der Zeile „Lösungen“ der Customer Journey Map gestalterisch umgesetzt oder wurden aus Prioritätsgründen noch zurückgestellt. Zudem muss ich einige Lösungen noch auf Sinnhaftigkeit überprüfen. Insbesondere möchte ich den Punkt "Inspirationen" mit Hilfe eines Fragebogens abklären, den ich an einige Zielgruppenvertreter senden werde.
Gestalterische Gedankengänge (aus meiner Sicht):
- Um das Premium-Gefühl zu unterstreichen, setzte ich auf eine dunkle UI, zudem unterstützt der dunkle Hintergrund dabei, sich von anderen Interior-Bildanbietern abzusetzen und die dargestellten Fotos mehr strahlen zu lassen.
- Da es sich bei House of Pictures 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.
Mobile Mockups
Mockups sind ein statisches Vorführmodell der Webseite, um Design und Funktionalität zu demonstrieren.
Desktop Mockups
Mockups sind ein statisches Vorführmodell der Webseite, um Design und Funktionalität zu demonstrieren.
