Case Study

Farbcheck Sicher entscheiden,
statt lange vergleichen.

Ein mobiles Vergleichstool für die OBI-App, das die Lücke zwischen Online-Recherche und Kauf im Markt schließt.

Rolle

Product Designer (UX/UI)
End-to-End

Zeitraum

4 Monate

Tools

Figma · Miro · KI-Tools

01 — Das Problem

Wandfarbe ist keine reine funktionale Entscheidung.

Wandfarbe ist eine emotional aufgeladene Entscheidung. Beim Kauf fehlt Nutzer:innen aktuell Orientierung in einem großen, markenübergreifend kaum vergleichbaren Sortiment. Digitalen Farbdarstellungen wird grundsätzlich nicht vertraut, Produkte unterschiedlicher Anbieter lassen sich weder digital noch im Markt direkt gegenüberstellen.

„Online sieht es nie so aus wie in echt."
„Die finale Entscheidung hat mich unter Druck gesetzt. Nicht wegen Zeitdruck. Sondern wegen Verantwortung der Entscheidung."
— Interview-Insight

Die Entscheidung verschiebt sich in den Markt, wo die Recherche von vorn beginnt. Online und Markt ergänzen sich nicht, sie verdoppeln sich.

„Als ich im Markt war hat meine Suche von vorne begonnen"
— Interview-Insight

100%

der Befragten kaufen Wandfarbe im Baumarkt: Der Markt bleibt der finale Kaufort

18/25

bewerten Wandfarbe als „sehr wichtig" für den eigenen Wohnraum: Die Entscheidung ist identitätsbezogen.

How might me?

Wie können wir unserer Zielgruppe helfen, Wandfarben über Marken hinweg zu vergleichen und sich sicher zu entscheiden – online wie im Markt?

02 — Wendepunkt

Was Farbcheck nicht ist.

× AR-/VR-Farbsimulation im Raum

Es geht nicht um digitale Raumsimulation, weil das Vertrauen in solche Darstellungen schlicht fehlt. Es geht darum, Orientierung in einem unübersichtlichen Sortiment zu schaffen: eine Entscheidungshilfe online wie offline, die den Weg in den Markt und zum Kauf leichter macht.

× Inspirations- und Beratungstool

Die Zielgruppe braucht keine zusätzlichen Optionen, sondern Orientierung in einem unübersichtlichen Sortiment. Was fehlt, ist nicht mehr Auswahl, sondern Vergleichbarkeit über Marken hinweg.

03 — Schlüsselentscheidungen

Drei Entscheidungen, die das Produkt geformt haben.

Entscheidung 01

Hard- & Soft-Facts im Vergleich statt Farbsimulation

Statt zu zeigen, wie eine Farbe wirken könnte, habe ich Farbcheck darauf ausgerichtet, was sie ist und wie andere sie erlebt haben. Herstellerangaben liefern Deckkraft, Farbwirkung und Preis als Spezifikation, kuratierte Kundenstimmen die Einordnung. Beide Ebenen stehen gleichgewichtig nebeneinander, weil die Entscheidung für eine Wandfarbe nicht aus einer einzelnen Information fällt, sondern aus dem Zusammenspiel.

„Der Vergleich von Farben unterschiedlicher Marken fällt mir schwer."
— Interview-Insight

Entscheidung 02

Anbindung an den Kaufabschluss nach dem Usability-Test

Ich habe den Vergleich um einen direkten Weg in den Warenkorb erweitert, weil Nutzer:innen im Test aktiv nach genau diesem nächsten Schritt gesucht haben. Der Vergleich war für mich ursprünglich der Endpunkt, im Test nach dem Test war klar: er muss die Brücke zum Kauf sein. Preisangaben rücken in die visuellen Header nach oben, ein CTA „In den Warenkorb" sitzt jetzt direkt in jeder Produktkachel.

„Ich würde hier gerne direkt in den Warenkorb gehen, statt auf die Produktseite zu springen."
— Zitat aus Usability-Testing

Vorher

Der Vergleich endete in einer Sackgasse. Nutzer:innen mussten ihn verlassen, um zu kaufen — der Flow zerriss.

Nachher

Drei-Klicks-Pfad von Einstieg über Vergleich bis Warenkorb. Der Vergleich ist nicht mehr Endpunkt, sondern Brücke zum Kauf.

Entscheidung 03

Vergleich auf zwei Produkte beschränkt

Ich habe den Vergleich auf zwei Produkte begrenzt statt drei oder mehr, weil die kognitive Belastung überproportional steigt, und genau die soll Farbcheck abbauen. Auf 375 px Mobile-Breite bleiben zwei Spalten lesbar; ein drittes Produkt würde entweder Lesbarkeit zerstören oder horizontales Scrolling erzwingen. Sequenzielles Austauschen einzelner Farben löst das Problem, ohne Informationstiefe zu opfern.

„Das ist praktisch – ich kann eine Farbe einfach ersetzen, statt den Vergleich komplett neu zu starten."
— Zitat aus Usability-Testing

04 — Der Prozess

Drei Wege, ein Ziel

Drei Einstiege – Farbkatalog, Produkt scannen, Merkliste – führen zur selben Kernfunktion: dem Produktvergleich. Welcher Weg passt, hängt von der Situation ab. Zuhause der Farbkatalog, im Markt der Scanner, nach Recherche die Merkliste. Die Architektur ist bewusst flach und man gelangt in nur wenigen Taps zum Vergleich.

Navigationsstruktur

Farbcheck nutzt die globale Tab Bar der OBI App als konstanten Anker, denn so bleibt der Nutzer jederzeit im vertrauten App-Kontext. Innerhalb des Features übernimmt der Header die lokale Navigation: zurück eine Ebene, schließen zurück zum Landing Screen mit den drei Einstiegspunkten Produkt scannen, Farbkatalog und Merkliste. Neue Vergleiche werden aktuell in der Thumb-Zone angeboten, statt als permanentes UI-Element den Flow zu überlagern.

Das Designsystem

Das Designsystem basiert auf der visuellen Sprache von OBI, ist aber bewusst reduziert: weniger Farbflächen, klare Hierarchien, OBI-Orange nur als Akzent. So bleibt der Fokus dort, wo er hingehört — auf den Produktfarben.

05 — Die Lösung

Drei Einstiege. Zwei Farben.
Eine Entscheidung.

Nutzer:innen können erstmals in wenigen Klicks zwei Wandfarben markenübergreifend und direkt nebeneinander vergleichen, mit technischen Daten, echten Kundenerfahrungen und Preis. Zuhause oder im Markt, der Mehrwert liegt nicht im Tool selbst, sondern in der Journey. Was vorher eine doppelte Recherche zwischen Online und Markt war, wird zu einem zusammenhängenden Entscheidungsprozess. Die Vorauswahl entsteht zuhause, im Regal oder in der eigenen Marktseite – der Marktbesuch wird nicht ersetzt, sondern entlastet.

Prototyp ansehen →

06 — So messe ich Erfolg

Eine North Star, zwei sekundäre KPIs – und ein Guardrail.

Primärer KPI · North Star

Erfolgreiche Vergleiche mit Kauf in Kategorie

Anteil der Farbcheck-Nutzer:innen, die innerhalb von 14 Tagen nach Tool-Nutzung in der relevanten Produktkategorie kaufen — online oder im Markt. Auch wenn es nicht eines der verglichenen Produkte ist: Farbcheck ist Orientierungshilfe, nicht Verkaufstrichter.

Sekundärer KPI

Feature Adoption

Anteil der OBI-App-Nutzer:innen, die Farbcheck pro Session aktiv aufrufen — aufgeschlüsselt nach Einstiegspunkt (Produkt-Scanner, Farbkatalog, Merkliste). Zeigt, ob das Feature seine Zielgruppe im Kaufprozess tatsächlich erreicht.

Sekundärer KPI

Conversion vom Vergleich zum Warenkorb

Anteil der abgeschlossenen Vergleiche, die direkt zum Warenkorb-Klick führen. Zeigt, ob die Anbindung an den Kaufabschluss funktioniert — und ob der Vergleich am Ende zur Handlung motiviert, nicht nur zur Information.

Guardrail · Qualitativ

Usefulness

„Wie nützlich war Farbcheck für deine Entscheidung?" sichert ab, dass Adoption und Conversion nicht auf Kosten der wahrgenommenen Hilfestellung steigen, denn ein genutztes Feature ist nur dann erfolgreich, wenn es auch hilft.

07 — Learnings & Ausblick

Lessons learned und was offen bleibt.

Was ich beim nächsten Mal anders machen würde

Hypothesen früher gegen Research prüfen. Ich startete mit der Annahme, das Problem läge in der digitalen Farbdarstellung. Der Research zeigte: Misstrauen in digitale Farben ist nicht zu lösen, sondern zu akzeptieren. Die eigentliche Lücke war Vergleichbarkeit.

Constraints früher als Designhilfe verstehen. Die Begrenzung auf zwei Produkte ist aus Mobile-Format und kognitiver Belastung entstanden. Mehr Optionen hätten genau das Problem (Overload) reproduziert, das ich lösen wollte.

Usability-Testing als Prioritäten-Verschieber einplanen. Vor dem Test war der Vergleich für mich das Endprodukt. Danach war klar: Er muss die Brücke zum Kaufabschluss sein. Ohne den Test wäre der Warenkorb-CTA nicht entstanden.

Was ich nicht bauen konnte — und warum

Scope

Echte Kundenrezensionen aus OBI-Datenbank – prototypisch mit kuratierten Quotes gelöst, produktiv wäre eine API-Anbindung nötig.

Zeit

Desktop-Variante mit drei bis vier Produkten im Vergleich: konzeptionell skizziert, aber nicht ausdesignt.