KlassischInteraktiv
DEEN
Alle Referenzen

Ladival Website mit Hauttypentest

Ladival

Überblick

Ladival ist eine Marke für Sonnenschutz. Für Ladival habe ich eine Website mit Hauttypentest konzipiert und gestaltet. Ich habe zuerst einen Flowchart mit 15 mobilen Screens gezeichnet. Danach habe ich den Test mit fünf Fragen und einem Ergebnis entworfen. Außerdem habe ich Startseite und Produktseite gestaltet. Der Test hilft Nutzern, ein passendes Produkt zu finden.

Typ
Website
Rolle
UI/UX Design und Konzeption
Tools
Figma

Projekt-Snapshot

Ziel

Die Website soll Nutzern helfen, ein passendes Sonnenschutz-Produkt zu finden. Der Hauttypentest soll kurz und leicht verständlich sein. Das Ergebnis soll direkt zu einem Produkt führen.

Herausforderung

Die Website verbindet Produkte, Artikel, Apothekenfinder und Test. Ich musste entscheiden, wo der Test beginnt und wohin das Ergebnis führt. Die fünf Fragen sollen schnell zu beantworten sein.

Ergebnis

Ein Flowchart zeigt 15 mobile Screens und ihre Wege. Der Test stellt eine Frage pro Screen und zeigt den Fortschritt. Das Ergebnis nennt einen Hauttyp mit drei Kurzangaben und empfiehlt ein Produkt. Startseite und Produktseite führen zum Test.

Farbpalette

  • #ffd451Sonnengelb
  • #fcc92bDunkelgelb
  • #005db4Markenblau
  • #e66d7fRosa
  • #e5eef7Hellblau
Titelbild: Kopf der Ladival Startseite auf gelbem Grund. Links stehen der Titel Purer Sonnenschutz und eine Reihe von Produktflaschen. Rechts springen vier Personen.

Vom Flowchart zum Design

Flowchart der mobilen Wireframes

Flowchart der mobilen Wireframes auf hellem Grund. Kleine graue Screens stehen in drei Reihen. Orange Linien verbinden sie. Die erste Reihe führt von der Startseite über Produkte und Produkt-Detail zur Probe, zum Hauttypentest und zum Ergebnis. Die zweite Reihe zeigt zwei Unterseiten und den Apothekenfinder mit Liste, Umschalter und Karte. Die dritte Reihe zeigt zwei Verteilerseiten und die Kartenansicht mit Adresse.

Flowchart

15 Screens in drei Reihen

  • Ich habe zuerst die Seiten der Website gesammelt und sortiert.
  • Der Flowchart zeigt 15 mobile Screens in drei Reihen.
  • Die erste Reihe zeigt Startseite, Produkte, Produkt-Detail, Probe bestellen, Hauttypen-Test und Ergebnis.
  • Die zweite Reihe zeigt Subseite I, Subseite II und vier Screens des Apothekenfinders.
  • Die dritte Reihe zeigt zwei Verteilerseiten und die Kartenansicht mit Adresse.
  • Orange Linien zeigen, wie die Screens zusammenhängen.

Flowchart vor den Details

  • Warum: Der Flowchart zeigt, wie Startseite, Produkte, Test und Apothekenfinder zusammenhängen. Das sehe ich, bevor ein Screen Details bekommt.
  • Statt: Jeden Screen einzeln auszuarbeiten.
  • Abwägung: Die Screens sind klein und grob gezeichnet. Dafür liegen alle 15 Screens auf einem Blatt.

Der Test als eigener Weg

  • Der Hauttypentest hat im Flowchart einen eigenen Weg.
  • Auf der Startseite führt der Knopf Zum Test zum Hauttypen-Test.
  • Der Knopf Weiter führt vom Hauttypen-Test zum Ergebnis.
  • Vom Ergebnis führt der Knopf Jetzt informieren zur Subseite II.
  • Diese Linie steht für Artikel, die zum Thema passen.

Smartphone zuerst

  • Warum: Auf dem kleinen Bildschirm zählt jeder Platz. Die Wireframes zeigen darum zuerst die mobile Ansicht.
  • Statt: Zuerst die Desktop-Ansicht zu zeichnen.
  • Abwägung: Das Desktop-Layout folgt später. Dafür bleibt der Inhalt auf das Wesentliche begrenzt.

Hauttypentest

Ablauf des Tests

  • Der Einstieg trennt Erwachsene und Kind oder Baby.
  • Danach folgen die Fragen, etwa zu Empfindlichkeit, Hautfarbton, Hautzustand und Aktivität.
  • Jede Frage zeigt, wie weit Nutzer sind, zum Beispiel Frage 3 / 5.

Eine Frage pro Screen

  • Warum: Eine Frage ist schnell beantwortet. Die Anzeige Frage x / 5 zeigt, wie viel noch folgt.
  • Statt: Ein langer Fragebogen auf einer Seite.
  • Abwägung: Jede Frage braucht einen eigenen Klick auf Nächste Frage. Dafür zeigt jeder Screen nur eine Frage.

Kacheln statt Eingabefelder

  • Warum: Nutzer tippen eine Kachel an, ein Haken zeigt die Wahl. Beim Hautfarbton stehen sechs runde Farbflächen statt Text.
  • Statt: Auswahllisten und Freitext.
  • Abwägung: Nutzer können nur vorgegebene Antworten wählen. Dafür muss niemand etwas eintippen.

Ergebnis mit nächstem Schritt

  • Das Ergebnis nennt den Hauttyp und zeigt drei runde Kurzangaben mit einem Text.
  • Rechts steht ein empfohlenes Produkt mit dem Knopf Zum Produkt.
  • Warum: Nach dem Test sehen Nutzer sofort ein Produkt und einen Knopf dazu.
  • Statt: Zwei Produkte wie im Flowchart.
  • Abwägung: Eine Empfehlung lässt weniger Auswahl. Dafür ist der nächste Schritt eindeutig.

Design

Startseite

  • Die Startseite zeigt oben den Titel Purer Sonnenschutz und eine Reihe von Produkten.
  • In der Mitte steht der Einstieg in den Hauttypentest mit runden Hautfarbtönen und dem Knopf Jetzt testen.
  • Darunter folgt die Produktauswahl mit Reitern.

Gelb und Blau der Marke

  • Warum: Gelbe Flächen tragen die Marke. Blau steht für Knöpfe, Überschriften und die Fußzeile.
  • Rosa erscheint nur in kleinen Akzenten, zum Beispiel bei LSF 30.
  • Statt: Rosa auch für Knöpfe und Flächen.
  • Abwägung: Die Produktlinien unterscheiden sich so weniger durch Farbe. Dafür sehen alle Knöpfe gleich aus.

Produktseite mit Weg zum Test

  • Die Produktseite zeigt Beschreibung, Produktprofil und weitere Produkte.
  • Rechts steht die Flasche mit dem Knopf Probe bestellen.
  • Am Ende folgt unter Das könnte Sie auch interessieren der Teaser Hauttypen-Test.
  • Warum: Wer ein Produkt ansieht, soll den Test direkt finden.
  • Statt: Den Test nur in der Navigation anzubieten.
  • Abwägung: Wer nicht bis zum Seitenende liest, sieht den Teaser nicht. Dafür muss niemand die Navigation suchen.

Hauttypentest: Einstieg, Fragen und Ergebnis

Der Test führt in sechs Screens vom Einstieg zum Ergebnis. Wische durch die Screens.

Einstiegs-Screen des Hauttypentests auf gelbem Grund. Links steht die Überschrift Testen Sie Ihren Hauttyp mit einem kurzen Text. In der Mitte springen drei Personen. Unten stehen die Knöpfe Erwachsene und Kind oder Baby.

Einstieg

Frage 2 von 5: Wie empfindlich ist die Haut? Vier Kacheln bieten normal, trocken, allergisch und fettig an. Die Kachel trocken trägt einen Haken. Darunter steht der Knopf Nächste Frage.

Frage 2

Frage 3 von 5: Um welchen Hautfarbton handelt es sich? Sechs runde Farbflächen von hell bis dunkel stehen zur Wahl. Eine trägt einen Haken. Darunter steht der Knopf Nächste Frage.

Frage 3

Frage 4 von 5: Wie ist der aktuelle Hautzustand? Vier Kacheln bieten normal, trocken, allergisch und fettig an. Die Kachel trocken trägt einen Haken. Darunter steht der Knopf Nächste Frage.

Frage 4

Frage 5 von 5: Für welche Aktivität brauchen Sie Sonnenschutz? Vier Kacheln bieten Sport, Strand, Winter und Pool an. Die Kachel Strand trägt einen Haken. Darunter steht der Knopf Zum Ergebnis.

Frage 5

Ergebnis-Screen. Links stehen der keltische Hauttyp, drei runde Kurzangaben und ein Fließtext. Rechts steht eine Produktflasche als Empfehlung mit dem Knopf Zum Produkt.

Ergebnis

Design: Startseite und Produktseite

Startseite und Produktseite stehen als freigegebene Designs in voller Länge nebeneinander. Beide führen zum Hauttypentest.

Startseite

Die freigegebene Startseite in voller Länge auf gelbem Grund. Oben stehen der Titel Purer Sonnenschutz, eine Produktreihe und eine springende Familie. Darunter folgen Zellschutz, der Einstieg in den Hauttypentest und die Produktauswahl mit Reitern. Es folgen ein Feld mit einer großen Zahl, zwei Textblöcke und die blaue Fußzeile.

Produktseite

Die freigegebene Produktseite in voller Länge. Links stehen Titel, Beschreibung, Produktprofil und weitere Produkte. Rechts steht die Produktflasche auf gelber Fläche mit dem Knopf Probe bestellen. Unten verweist ein Teaser auf den Hauttypentest.