Hot Sauce Company

UX-Research | UX-Design | Wireframes | Mockups | UI-Design

Entwicklung einer responsiven Webseite vom Wireframe bis zum High-Fidelity Prototyp

Bettys, Sandys und Holys Hot Sauce Company steht für einzigartige, handgemachte Kreationen, die Feuer und Geschmack in perfekter Balance vereinen – und das zu fairen Preisen. Unsere Saucen begeistern vor allem eine Zielgruppe zwischen 25 und 50 Jahren: junge Berufstätige und leidenschaftliche Köch*innen, die Wert auf Qualität legen und stets auf der Suche nach neuen kulinarischen Inspirationen sind. Die Webseite soll den Stil und den Anspruch der Hot Sauce Company vermitteln, sowie eine einfache und schnelle Bestellung der Saucen ermöglichen.

Zeitraum

2025

Rolle

UI Design und UX Research

Ziele

Gestaltung einer benutzerfreundlichen Webseite für eine Hot Sauce Company mit einer klaren Navigation und einem reibungslosen Bezahlvorgang.

Zielgruppe

Die Webseite richtet sich an eine breite Zielgruppe aus Erwachsenen, die ohne viel Aufwand ihre Lieblingssauce online bestellen wollen. Außerdem sollen Köch*innen angesprochen werden, die ihrem Essen einen besonderen Kick verleihen wollen.

Herausforderung

Die größte Herausforderung im Designprozess bestand darin, den Anspruch an ein modernes und attraktives Erscheinungsbild mit einer klaren Informationsstruktur zu vereinen. Neben einer ansprechenden Ästhetik sollte die Webseite es den Nutzerinnen ermöglichen, die Hot-Saucen nach individuellen Geschmackspräferenzen zu filtern. Gleichzeitig musste ein intuitiver und effizienter Bestellprozess geschaffen werden, der Besucherinnen schnell und unkompliziert zum Ziel führt.

01 Forschung

Ich habe Nutzende interviewt. Anhand der Interviews habe ich Empathy Maps erstellt, um die Zielnutzenden und ihre Bedürfnisse besser zu verstehen. Es hat sich herauskristallisiert, dass die Nutzenden oft eine schnelle und unkomplizierte Bestellung wünschen. Oftmals sind sie gestresst von der Arbeit und haben keine Zeit auf aufwendige Weise eine Sauce zu suchen. Sie möchten sehr schnell zum Ziel kommen. Informationen sollten klar und schnell erfassbar und die Bestellung sollte schnell und einfach zu erledigen sein.

Beispiel einer Persona

Beispiel der User Journey

Nutzungsforschung: Probleme

Einige wichtige Probleme die identifiziert wurden:

Navigationen sind oft überladen, dadurch findet der Nutzer nicht sofort was er bnötigt
Interaktion: Der Weg zur Auswahl von Saucen mit speziellen Gewürzen ist oft missverständlich gewesen.
Erfahrung: Hot Sauce Company Sites bieten kein entspanntes Bestellen, sondern sind oft mit vielen unnötigen Informationen überladen.

02 Skizzen / Wireframes

Bei der Erstellung der Sitemap habe ich auf eine klare, minimalistische Struktur gesetzt. Hauptmenü fokussiert sich auf die Kernfunktionen. Nutzerführung sollte schlank gehalten werden.

Skizzen

Als Nächstes skizzierte ich Papier-Wireframes für jeden Bildschirm der Webseite, wobei ich die Problempunkte der Nutzenden in Bezug auf Navigation, Surfen und Bezahlvorgang berücksichtigte. Um die verschiedenen Bildschirmgrößen anzulegen habe ich punktiertes Papier verwendet. Damit konnte ich genauer betrachten, wie welche Elemente je Bildschirmgröße angelegt werden.

Digitale Wireframe

Die Umstellung von Papier auf digitale Wireframes machte es leicht zu verstehen, wie die Seite aufgebaut sein soll, damit die Nutzerführung gut funktioniert. Teaser mit Schaltflächen für eine Kaufwahl ermöglichen ein schnelles Bestellen. Die Vorauswahl von Eigenschaften ermöglicht eine schnelle Filterung.

Low-Fidelity-Prototyp

Mit dem fertiggestellten Low-Fidelity Prototyp habe ich eine Nutzerstudie mit fünf Teilnehmenden durchgeführt. Dabei legte ich besonderen Wert darauf, eine diverse Gruppe von Personen einzubeziehen, um unterschiedliche Perspektiven und Bedürfnisse zu berücksichtigen.

04 Usability Studie

Art der Studie: Moderierte Usability Studie
Ort: Deutschland, remote
Teilnehmende: 5 Teilnehmende
Länge: 20 bis 30 Minuten

Dies waren die wichtigsten Ergebnisse der Usability-Studie:
1. Warenkorb: Teilweise wollten die Nutzenden die Anzahl der Waren korrigieren und zurückgehen, aber dabei gab es Probleme.
2. Startseite: Die Nutzer waren irritiert, worum es genau geht und suchten nach einer Beschreibung.
3. Konto: Manche Nutzende wünschten sich eine Möglichkeit der Anmeldung, aber viele fanden die Bestellung als Gast gut.

05 Design

Das Webdesign wurde bewusst modern und dynamisch gestaltet, um die Energie und Leidenschaft scharfer Saucen zu transportieren. Kräftige Farben und satte Rottöne greifen das zentrale Thema der Schärfe auf und schaffen eine visuelle Verbindung zum Produkt. Unterstützt wird dieser Eindruck durch die markante Schriftart Bebas Neue, deren kräftiger und dominanter Charakter Mut, Stärke und Entschlossenheit symbolisiert – Eigenschaften, die mit dem Genuss von scharfen Saucen assoziiert werden. Als Kontrastelement hebt sich die Buttonfarbe in einem satten Orangeton deutlich vom dunklen Rot- und Schwarzspektrum des Layouts ab. Dadurch wird nicht nur eine klare Handlungsaufforderung geschaffen, sondern auch ein dynamisches, spannungsgeladenes Gesamtbild erzeugt.

Berücksichtigung der Barrierefreiheit: Ich habe Überschriften mit unterschiedlich großem Text für eine klare visuelle Hierarchie verwendet. Ich habe Orientierungspunkte verwendet, um Nutzenden die Navigation auf der Website zu erleichtern, einschließlich Nutzenden, die auf assistive Technologien angewiesen sind. Ich habe die Website so gestaltet, dass auf jeder Seite ein Alternativtext verfügbar ist, damit Screenreader problemlos darauf zugreifen können.

06 High-Fidelity Prototyp

Aus dem ersten Entwurf habe ich einen interaktiven Prototypen erstellt und mit diesem noch einmal einen Nutzungstest mit 5 Teilnehmenden durchgeführt.

Mein Hi-Fi-Prototyp folgte demselben User Flow wie der Lo-Fi-Prototyp und beinhaltete die Designänderungen, die nach der Usability-Studie vorgenommen wurden, sowie mehrere Änderungen, die von Mitgliedern meines Teams vorgeschlagen wurden.

High-Fidelity-Prototyp

07 Fazit

Eine ansprechende Designlösung bedeutet nicht im selben Zuge eine gelungene Nutzerführung. Deshalb habe ich gelernt, wie unglaublich wichtig es ist, immer wieder Tests durchzuführen, um das Design wirklich den Bedürfnissen der Nutzer entsprechend anzulegen.