Briefing
Aufgabenstellung an mich
Die Aufgaben bestanden darin, für die Webseite ein ansprechendes Design und eine gute User Experience für die Kunden zu entwickeln.
Das Look and Feel sollte dabei aus den gesammelten Nutzerdaten entstehen.
Das Look and Feel sollte dabei aus den gesammelten Nutzerdaten entstehen.
Probleme der Kunden
Der Kunde hat wenig Zeit, keine Fachkenntnisse und nicht genug Equipment bei der Produktion von Foodbildern, Videos und Rezepten und möchte die Leistungen deshalb extern abgeben.
Ziel des Unternehmens
Ziel ist es, dem Kunden die Produktpalette von StockFood Studios näher zu bringen. Zudem sollte der Kunde sich schnell abgeholt fühlen, damit er StockFood Studios für seine Wünsche beauftragt.
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 Oliver):
- Wenig Zeit für Organisation: Präsente Erwähnung, dass StockFood Studios alles aus einer Hand anbietet in Form einer Illustration zu Beginn der Seite. Zudem habe ich die Erwähnung mehrfach in Texten platziert.
- Wenig Material, Equipment, Wissen und Personal: Platzierung einer inspirierenden Bildergalerie und Fotos, die die Produktion hinter den Kulissen zeigen. Dadurch wird kommuniziert, dass sich Oliver auf den Prozess verlassen kann und dabei gute Ergebnisse entstehen. Die Platzierung einiger bekannter Kundenlogos bestärkt das Vertrauen.
- Kosten- und Aufwandskalkulation: Die Erwähnung einer berechenbaren Kostenkalkulation, platzierte ich textlich.
Empathy Map (aus Kundensicht von Oliver):
- Hilfe bei Fragen: Im Footer habe ich Wert darauf gelegt, die Ansprechpartner mit einem Foto zu platzieren, damit sich Oliver bei Fragen gut aufgehoben fühlt.
- Produktionskosten und Produktionsablauf: Diese Themen habe ich bewusst nur wenig angeschnitten, da StockFood Studios noch relativ jung ist und sich interne Prozesse und Kostenvoranschlags-Erfahrungen erst entwickeln müssen.
- Generelle Fragen: die Unterbringung eines FAQ-Bereichs ist noch in Planung. Bis dahin werden intern Fragen gesammelt, die sich für einen FAQ-Bereich eignen.
Customer Journey Map (aus Kundensicht von Oliver):
- 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 Kundenlogos und eine Hinter den Kulissen-Galerie Sinn ergibt.
Gestalterische Gedankengänge (aus meiner Sicht):
- Da es bei StockFood Studios vor allem um Bilder geht, wollte ich ihnen möglichst viel Raum zur Verfügung stellen, damit sie gut auf den Betrachter einwirken können.
- Damit die Webseite insgesamt nicht zu bunt wird, entschied ich mich dafür, möglichst neutrale Farben bei den Gestaltungselementen einzusetzen (mit Ausnahme der Buttons).
- Um den kreativen handgemachten Charakter zu unterschreichen, setzte ich selbstgezeichnete Illustrationen und eine Typografie ein, die an handgeschriebene Schrift erinnert.
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 Mockup
Mockups sind ein statisches Vorführmodell der Webseite, um Design und Funktionalität zu demonstrieren.
