Dallas Flower Florist ist ein Online-Flower-Shop, der Blumen in die USA und nach Kanada liefert.

Die Website richtet sich an Menschen, die Blumen für verschiedene Anlässe kaufen möchten – sei es für Geburtstage, Jubiläen oder besondere Events.

Alle Bilder wurden mit DALL·E erstellt, und dieses Redesign ist Teil eines Studienprojekts.

Mobilen Prototyp ansehen
Project Overview​​

Über das Geschäft:

 

  • Ein Online-Flower-Shop mit Sitz in Dallas, Texas
  • Produkte: Verkauf von Blumen für verschiedene Anlässe
  • Lieferung in die USA und nach Kanada
  • Ersatzlieferung oder Rückerstattung bei Problemen

Problemstellung:

 

Der Online-Shop von Dallas Flower Florist ist schwer zu navigieren und wirkt veraltet.
Kunden haben Schwierigkeiten, Blumen zu finden, anzupassen und zu kaufen,
was zu geringeren Verkaufszahlen und einer abnehmenden Kundenbindung führt.

Ziele:

 

  • Die visuelle Attraktivität des Online-Shops mit einem modernen Design verbessern.
  • Die Navigation optimieren, damit Kunden Blumen leichter finden und kaufen können.
  • Das Einkaufserlebnis optimieren, um die Kundenbindung zu erhöhen und den Umsatz zu steigern.
The Process

Unser dreiköpfiges Team arbeitete nach dem Double-Diamond-Ansatz, basierend auf der Design-Thinking-Methodik.
Es war kein linearer Prozess – wir wechselten während des Projektverlaufs mehrfach zwischen den einzelnen Phasen hin und her.

Discover

Research Methodology:

Unsere Forschungsmethodik basiert auf drei zentralen Methoden:

 

  • Heuristische Evaluation hilft uns, Usability-Probleme schnell zu erkennen.
  • Wettbewerbsanalysen zeigen, was andere gut machen und wo wir uns verbessern können.
  • Interviews ermöglichen es uns, die Gedanken und Erfahrungen der Menschen besser zu verstehen.

Heuristische Evaluation

Bevor wir Nutzerinterviews durchführten, führte unser dreiköpfiges Team eine heuristische Evaluation der Website durch.
Dies half uns, zentrale Usability-Probleme zu identifizieren und die Hauptschwerpunkte für unsere Nutzerforschung festzulegen.

Dabei stellten wir fest, dass das Design und die Inhalte der Website veraltet waren und zahlreiche Probleme aufdeckten.

Was haben wir herausgefunden?

 
 

1. Die Kategorien sind unlogisch und unübersichtlich angeordnet.

 

2. Die globale und lokale Navigation sind unstrukturiert und nicht miteinander verbunden.

 

3. Die Suchleiste ist nicht nutzbar.

 

4. Adresse und Kontaktdaten befinden sich an einer ungeeigneten Stelle.

 

5. Die verwendeten Begriffe verwirren die Nutzer, und beim Scrollen stoßen sie auf eine übermäßige Menge an Lieferinformationen.

6. Die Fotos sind von geringer Qualität, und die Farben sowie Schriftarten des Textes sind ungeeignet.

 

7. Die Informationen über die verfügbaren Blumen sind unvollständig.

 

8. Der „In den Warenkorb“-Button ist visuell nicht standardisiert.

9. Die Informationen auf der Seite der ausgewählten Blume sind ebenfalls ungenügend; beim Scrollen erscheint eine übermäßige Menge an Informationen, einschließlich der Beschreibung.

 

10. Das lange Nutzerformular im Kaufbereich ist überladen, unorganisiert und nicht standardisiert.
Auch die Platzierung von Datum, Adresse, Lieferhinweisen sowie Geschenk- und Nachrichtenoptionen ist ungeeignet.

Wettbewerbsanalyse

Wir führten eine Wettbewerbsanalyse von Websites mit ähnlichen Geschäftsmodellen wie Dallas Flower Florist durch und identifizierten zentrale Verbesserungspotenziale.

 

Wichtigste Erkenntnisse:

  • Klar definierte Produktkategorien
  • Same-Day-Delivery-Option
  • Hervorhebung der Bestseller
  • Zugang zu Kundenbewertungen
  • Reaktionsschneller Kundensupport

Interviews & Affinitätsdiagramm


Die Perspektive der Nutzer verstehen

Wir führten Interviews mit 15 Teilnehmenden durch, um ihre Pain Points besser zu verstehen.

Affinitätsdiagramm

Auf Grundlage aller gesammelten Informationen erstellten wir ein Affinitätsdiagramm und identifizierten die wichtigsten Faktoren, die zu berücksichtigen sind.

 

Wichtigste Erkenntnisse:

  • Klare Informationen: Kurze und nützliche Blumenbeschreibungen sowie Pflegehinweise.
  • Hochwertige Fotos: Mehrere klare Bilder aus verschiedenen Perspektiven.
  • Transparente Preise: Klare Preisangaben, keine versteckten Kosten, sichtbare Rabatte.
  • Zuverlässige Lieferung: Pünktliches Liefer-Tracking und reaktiver Support.
  • Einfache Navigation: Überschaubare Kategorien und hilfreiche Filter.
Define

Persona


Wer nutzt die Website von Dallas Flower Florist?

Die Website wird auf Grundlage der Bedürfnisse und Präferenzen dieser Persona neugestaltet.

 

Lerne Alex kennen:

  • Vielbeschäftigter Lebensstil: Häufige Reisen machen ein gutes Zeitmanagement entscheidend.
  • Streben nach Bequemlichkeit: Benötigt eine schnelle und einfache Möglichkeit, Blumen online zu bestellen.
  • Priorität: Schnelle Lieferung: Pünktliche Zustellung garantiert frische Blumen.
  • Qualitätserwartung: Wünscht sich hochwertige Blumen und Geschenke.

Card Sorting


Wie stellen sich die Nutzer die Organisation der Website vor?

 

Um die Struktur und die intuitive Navigation der Website zu verbessern, führten wir 9 Card-Sorting-Sitzungen mit potenziellen Nutzern durch.
Die Erkenntnisse aus diesen Sitzungen halfen uns, die Informationsarchitektur und die Seitenstruktur (Site Map) neu zu gestalten.

 

Wichtigste Erkenntnisse:

  • Anlässe: Kategorien wie Hochzeiten, Gute Besserung und Jubiläen.
  • Navigationsleiste: Direkte Links zu Kontakt, Über uns, Geschenke und Bestsellern.
  • Filter: Optionen wie Blumengröße, Farbe, Art und Verfügbarkeit.
  • Startseite: Zeigt Lieferinformationen, Bewertungen, Bestseller, Preise und Angebote.
  • Footer/Kontakt: Enthält Chat, Kontakt und Hilfe.

Seitenstruktur


Wie haben wir die Informationsarchitektur neu gestaltet?

Develop

Ideation & Wireframing


Welche Redesign-Entscheidungen haben wir getroffen?

Die wichtigsten Erkenntnisse aus unserer Recherche sind die Pain Points und die dazugehörigen Lösungen.

1. Pain Point : Unübersichtliche Kategorien 

Lösung:
Kategorien mithilfe von Interviews, Wettbewerbsanalyse und Card Sorting neu strukturiert und besser platziert.

 

Nutzen für Nutzer

Logische Struktur, schnellere Orientierung.

 

2. Pain Point: Keine schnelle Suche.

Lösung:
Suchfunktion nach Lieferzeit und Standort integriert. 

 

Nutzen für Nutzer:

Zeitersparnis, gezielte Ergebnisse.

 

3.Pain Point: Schwierigkeit bei saisonalen Blumen.

Lösung:
Saisonale Blumen im Hero-Bereich der Startseite hervorgehoben.

 

Nutzen für Nutzer:

Leichter Zugriff auf saisonale Angebote.

 

4.Pain Point: Bestseller & Same-Day-Delivery schwer zu finden.

Lösung:
Eigene Kategorien für Bestseller und Same-Day-Delivery auf der Startseite.

 

Nutzen für Nutzer:

Nutzer finden beliebte Produkte schnell und einfach.

5. Pain Point: Keine klaren Filter 

Lösung:

Einfache Filter für Preis, Farbe, Art, Lieferung auf der Produktseite.

 

Nutzen für Nutzer:

Gezielte Produktauswahl, bessere Übersicht.

 

6. Pain Point: Unklare Lieferzeit & -ort 

Lösung: Anzeige von Lieferzeit und Lieferort direkt auf der Produktseite.

 

Nutzen für Nutzer:

Mehr Transparenz und Planungssicherheit.
 

7. Pain Point: Geschenke & Karten schwer zu verwalten 

Lösung:

Option, Geschenke/Gutscheine hinzuzufügen, zu entfernen oder zu ändern + persönliche Nachricht. 

 

Nutzen für Nutzer:

Individuelle Anpassung, persönlicher Einkauf.

8. Pain Point: Kein Login & Profil

Lösung:

Login/Registrierung via E-Mail, Google, Apple + Gastzugang. 

 

Nutzen für Nutzer:

Mehr Flexibilität, weniger Warenkorbabbrüche.

9. Pain Point: Doppelte Adress-Eingabe

Lösung: 

Checkbox„Rechnungsadresse = Lieferadresse“, automatische Übernahme der Daten. 

 

Nutzen für Nutzer:

Schnellerer Checkout, weniger Aufwand.

10.

Pain Point: Fehlende Bestellbestätigung & Follow-up

Lösung:

Nach der Zahlung: Bestätigungsseite mit Dank, Info zur E-Mail-Bestätigung, sowie Optionen zum Stornieren, Konto aufrufen oder weiter einkaufen.

Nutzen für Nutzer:

Klarheit & Sicherheit, nächste Schritte sofort ersichtlich.

UI Design

Ein passendes UI-Design für die Website von Dallas Flower Florist finden

Deliver

High-Fidelity-Prototyp

Wir haben das UI-Kit angewendet und die Inhalte finalisiert.

Usability-Tests & Iterationen

Im Verlauf des Projekts durchliefen wir mehrere Iterationen, die durch die Erkenntnisse aus Usability-Tests gesteuert wurden.

Diese Tests waren entscheidend dafür, unsere Designentscheidungen zu formen und das Projekt kontinuierlich zu verbessern.

Lieferdatum- und Stadtauswahl

 

Vorher:
Nutzer hatten Schwierigkeiten, die Optionen für Lieferdatum und Lieferort am Ende der Adressseite zu finden.
Viele übersahen diese Felder, was zu Frustration und Verzögerungen führte.

 

Nachher:
Die Optionen „Lieferdatum wählen“ und „Lieferort wählen“ wurden auf die Produktdetailseite direkt unter dem Preis verschoben.
Nutzer bemerkten und nutzten diese Optionen leichter.
Der Checkout-Prozess wurde reibungsloser und die Zufriedenheit der Nutzer stieg.

 

Zusammenfassung:
Durch die Neupositionierung der Lieferoptionen auf die Produktdetailseite konnten die Usability und das gesamte Nutzererlebnis deutlich verbessert werden.

Blumenpflege-Informationen

 

Vorher:
Nutzer hatten Schwierigkeiten, die Pflegehinweise für Blumen zu finden, da diese mit anderen Informationen vermischt waren.
Das machte es schwer, schnell zu verstehen, wie die Blumen zu pflegen sind.

 

Nachher:
Die Pflegeinformationen wurden unter „Beschreibung“ und „Größenguide“ verschoben und hervorgehoben.
Die Tipps zur Pflege sind nun klar und leicht verständlich: Wasser wechseln, Stiele kürzen und richtige Platzierung.

 

Zusammenfassung:
Durch die Trennung und Hervorhebung der Pflegehinweise können Nutzer die benötigten Informationen nun schnell und unkompliziert finden.

Filter-Funktionalität

 

Vorher:

  • Problem: Der Filter-Button war klein und schwer zu finden.
  • Folge: Nutzer hatten Schwierigkeiten, Filter anzuwenden, was zu Frustration führte.

Nachher:

  • Änderung: Die Filteroptionen wurden nach oben verschoben und deutlich sichtbarer gemacht.
  • Ergebnis: Nutzer bemerkten die Filter leichter und nutzten sie häufiger, was die Zufriedenheit erhöhte.

Zusammenfassung:
Durch die bessere Sichtbarkeit und Zugänglichkeit der Filter konnte die User Experience deutlich verbessert und die Nutzerzufriedenheit gesteigert werden.

A/B Testing

Nach den Nutzertests äußerte die Mehrheit der Teilnehmenden eine Präferenz für Version B.

Version B bietet ein nahtloses Nutzungserlebnis:
Nutzer können verschiedene Produktbilder ansehen, ohne vorher ein geöffnetes Bild schließen zu müssen.
Dies macht den Prozess benutzerfreundlicher und effizienter.

A

B 

Figma Prototype

Obwohl sich der Designprozess stets an das verändernde Nutzerverhalten und die Bedürfnisse anpasst, haben wir entschieden, dass dieser Prototyp unseren „Done“-Punkt markiert.
Er zeigt, was wir durch unsere Designarbeit erreicht haben.

 
Mobilen Prototyp ansehen
Reflections

Was habe ich gelernt?

 

  • Die zentrale Rolle der Recherche, um die Effektivität des Produkts zu steigern.
  • Teamarbeit stellte die termingerechte Lieferung und das Einhalten von Deadlines sicher.
  • Testing und Iteration verbesserten die Benutzerfreundlichkeit.

 

Wie geht es weiter?

 

  • Die Mobile-Version des Designs finalisieren, um Anpassungsfähigkeit sicherzustellen.
  • Die User Experience durch weitere Usability-Tests und Iterationen verbessern, um den User Flow noch feiner abzustimmen.