01The brief — a work tool, not a shop windowDer Auftrag — Arbeitswerkzeug, nicht Schaufenster
The subject is the used-car section of a major classifieds marketplace — one of those interfaces millions of people use and nobody loves. The people who spend real time in it aren't casual browsers: they evaluate dozens of listings per session, and a used car is one of the largest, most distrust-laden purchases a person makes. The interface has to earn trust and support fast, dense comparison at the same time.
Gegenstand ist der Gebrauchtwagen-Bereich eines großen Kleinanzeigen-Marktplatzes — eines dieser Interfaces, das Millionen nutzen und niemand liebt. Wer dort wirklich Zeit verbringt, stöbert nicht beiläufig: Er bewertet Dutzende Inserate pro Sitzung — und ein Gebrauchtwagen ist einer der größten, misstrauensbeladensten Käufe überhaupt. Das Interface muss zugleich Vertrauen aufbauen und schnellen, dichten Vergleich ermöglichen.
This is a redesign concept, and I treat it as such: no live product, no A/B tests, no traffic — so no outcome numbers anywhere on this page. What a concept can demonstrate is process discipline: every design decision below traces back to the audit, the competitor teardown or the scenario analysis. That traceability is the deliverable.
Dies ist ein Redesign-Konzept, und ich behandle es als solches: kein Live-Produkt, keine A/B-Tests, kein Traffic — also nirgends auf dieser Seite Ergebniszahlen. Was ein Konzept zeigen kann, ist Prozessdisziplin: Jede Designentscheidung unten führt auf das Audit, den Konkurrenz-Teardown oder die Szenario-Analyse zurück. Diese Nachvollziehbarkeit ist das Deliverable.
02Rapid product audit — annotating the live appSchnelles Produkt-Audit — die Live-App annotiert
Before touching anything, I walked the existing app end to end with the Search tab as the target area and annotated every screen with sticky-note observations: the car list, the filters, the listing card, the photo gallery, the seller-contact flow. Not "I don't like this" notes — each one names what the element is supposed to do and where it fails.
Bevor ich irgendetwas anfasste, bin ich die bestehende App komplett durchgegangen — mit dem Such-Tab als Zielbereich — und habe jeden Screen mit Sticky-Note-Beobachtungen annotiert: die Fahrzeugliste, die Filter, die Inserats-Karte, die Fotogalerie, den Kontakt zum Verkäufer. Keine „Gefällt mir nicht"-Notizen — jede benennt, was das Element leisten soll und wo es scheitert.
The recurring findings: the listing snippet buried the freshness signal (time before date), key specs sat in comma-separated prose instead of scannable units, redundant icons competed for attention, unavailable listings looked identical to live ones and wasted taps, and a bare rating number on the seller block carried no meaning without a label. The gallery's 360° view existed but was practically undiscoverable.
Die wiederkehrenden Befunde: Das Snippet vergrub das Aktualitätssignal (Uhrzeit vor Datum), Kern-Specs standen als kommagetrennter Fließtext statt scanbarer Einheiten, redundante Icons konkurrierten um Aufmerksamkeit, nicht verfügbare Inserate sahen aus wie aktive und verschwendeten Taps — und eine nackte Bewertungszahl beim Verkäufer trug ohne Label keine Bedeutung. Die 360°-Ansicht der Galerie existierte, war aber praktisch unauffindbar.
03Defining the direction — criteria before pixelsDie Richtung definieren — Kriterien vor Pixeln
A redesign without explicit success criteria is just taste. So the next artifact isn't a screen — it's two working tables that turn the audit into commitments: one maps parameters → decisions → ideas, each idea anchored to a concrete user need; the other states what the redesign must achieve before any visual work counts as done.
Ein Redesign ohne explizite Erfolgskriterien ist nur Geschmack. Das nächste Artefakt ist deshalb kein Screen, sondern zwei Arbeitstabellen, die das Audit in Verbindlichkeit übersetzen: Eine mappt Parameter → Entscheidungen → Ideen, jede Idee an ein konkretes Nutzerbedürfnis geknüpft; die andere legt fest, was das Redesign erreichen muss, bevor visuelle Arbeit als fertig gilt.
| CriterionKriterium | What it demands of the designWas es vom Design verlangt |
|---|---|
| TrustVertrauen | A high-stakes purchase: seller information, ratings and vehicle history must be explicit, labeled and impossible to misreadEin Kauf mit hohem Einsatz: Verkäuferinfos, Bewertungen und Fahrzeughistorie müssen explizit, beschriftet und unmissverständlich sein |
| Comparison speedVergleichstempo | Users triage dozens of listings — the list must maximize decision-relevant data per row, not decorationNutzer sichten Dutzende Inserate — die Liste muss entscheidungsrelevante Daten pro Zeile maximieren, nicht Dekoration |
| Clear tone of voiceKlarer Tone of Voice | Precise, jargon-free language — competent without hiding behind trade slangPräzise Sprache ohne Fachjargon — kompetent, ohne sich hinter Branchenslang zu verstecken |
| Contemporary aestheticsZeitgemäße Ästhetik | The visual layer must stop signaling "patched for years" — it is itself a trust signalDie visuelle Ebene darf nicht länger „seit Jahren geflickt" signalisieren — sie ist selbst ein Vertrauenssignal |
04Competitor teardown & visual reference boardKonkurrenz-Teardown & visuelles Referenzboard
Three automotive classifieds platforms, taken apart screen by screen with the same annotation discipline as the audit. The functional finding: near-total feature parity — same filters, same listing mechanics, same detail pages. The differentiation opportunity wasn't a missing feature; it was that none of them had a contemporary visual language.
Drei Auto-Kleinanzeigen-Plattformen, Screen für Screen zerlegt — mit derselben Annotations-Disziplin wie im Audit. Der funktionale Befund: nahezu vollständige Feature-Parität — dieselben Filter, dieselbe Inserats-Mechanik, dieselben Detailseiten. Die Differenzierungschance war kein fehlendes Feature, sondern dass keiner eine zeitgemäße visuelle Sprache hatte.
Alongside the teardown I built a visual reference board of automotive UIs — consistently dark, photo-first patterns that let the car itself carry the screen. That board is the argued case for the final direction: in a category where the product photo is the product, the interface should recede and frame.
Parallel zum Teardown entstand ein visuelles Referenzboard automobiler UIs — durchgehend dunkle, foto-zentrierte Muster, die das Auto selbst den Screen tragen lassen. Dieses Board ist das Argument für die finale Richtung: In einer Kategorie, in der das Produktfoto das Produkt ist, sollte das Interface zurücktreten und rahmen.
05Scenario & interface analysis — what the screens must doSzenario- & Interface-Analyse — was die Screens leisten müssen
Two artifacts bridge research and design. First, a written scenario list of the user flows the redesign has to serve: browse the car list · switch views and sorting · filter · open detailed info · contact the seller · save and compare. Second, a component inventory of the current screens — every element cataloged with the requirement it has to meet in the new design. This is where scope stops being vague: if an element isn't in the inventory with a requirement, it doesn't get redesigned on a whim.
Zwei Artefakte verbinden Research und Design. Erstens eine schriftliche Szenario-Liste der User Flows, die das Redesign bedienen muss: Fahrzeugliste durchsehen · Ansicht und Sortierung wechseln · filtern · Detailinfos öffnen · Verkäufer kontaktieren · speichern und vergleichen. Zweitens ein Komponenten-Inventar der aktuellen Screens — jedes Element katalogisiert mit der Anforderung, die es im neuen Design erfüllen muss. Hier hört der Scope auf, vage zu sein: Was nicht mit Anforderung im Inventar steht, wird nicht aus Laune umgestaltet.
One decision the scenarios settled early: the listing stays a list, deliberately. Grids look modern, but they cost data per row — and the "browse and compare" scenario is about scanning many specs per listing, not admiring covers. The list layout won on the criteria from stage 03: more visible specs per row, easier vertical comparison, faster triage.
Eine Entscheidung, die die Szenarien früh klärten: Die Übersicht bleibt bewusst eine Liste. Grids wirken modern, kosten aber Daten pro Zeile — und im Szenario „durchsehen und vergleichen" geht es darum, viele Specs pro Inserat zu scannen, nicht Cover zu bewundern. Das Listenlayout gewann nach den Kriterien aus Abschnitt 03: mehr sichtbare Specs pro Zeile, leichterer vertikaler Vergleich, schnellere Triage.
06Wireframes — structure argued in grayscaleWireframes — Struktur in Graustufen begründet
The new structure was tested in grayscale before any styling, so layout decisions couldn't hide behind color. Two rebuilds carry most of the weight, and each one answers a specific audit or scenario finding:
Die neue Struktur wurde in Graustufen getestet, bevor irgendetwas gestylt wurde — Layout-Entscheidungen konnten sich nicht hinter Farbe verstecken. Zwei Neuaufbauten tragen das meiste Gewicht, und jeder beantwortet einen konkreten Audit- oder Szenario-Befund:
The snippet, reworked line by line. Date moved before time — freshness is the first filter a serious buyer applies (audit finding). Key specs became chips instead of prose (audit finding). A geolocation icon anchors distance at a glance. Redundant icons were removed, and unavailable listings are clearly marked instead of silently wasting a tap.
Das Snippet, Zeile für Zeile überarbeitet. Das Datum rückte vor die Uhrzeit — Aktualität ist der erste Filter eines ernsthaften Käufers (Audit-Befund). Kern-Specs wurden Chips statt Fließtext (Audit-Befund). Ein Geolokations-Icon verankert die Entfernung auf einen Blick. Redundante Icons flogen raus, und nicht verfügbare Inserate sind klar markiert, statt stumm einen Tap zu verschwenden.
The detail page, rebuilt around the decision. Model, date and place sit above the photos — the "is this even relevant?" check comes before time spent on images (scenario: open detailed info). The favorites heart became a bookmark: when you're comparing assets, you're tracking, not falling in love (scenario: save and compare). Guidance makes the 360° panorama discoverable (audit finding). Mileage, year and owner count each get their own block instead of a comma-separated string. A financing block and a price-history graph support the actual buying decision, similar listings appear as cards, and on scroll a sticky top bar (name + price) plus a bottom action bar keep the two things that matter always in reach (scenario: contact the seller).
Die Detailseite, neu gebaut um die Entscheidung herum. Modell, Datum und Ort stehen über den Fotos — der „Ist das überhaupt relevant?"-Check kommt vor der Zeit für Bilder (Szenario: Detailinfos öffnen). Aus dem Favoriten-Herz wurde ein Lesezeichen: Wer Objekte vergleicht, beobachtet — er verliebt sich nicht (Szenario: speichern und vergleichen). Eine Anleitung macht das 360°-Panorama auffindbar (Audit-Befund). Laufleistung, Baujahr und Vorbesitzer bekommen eigene Blöcke statt einer kommagetrennten Zeile. Ein Finanzierungsblock und ein Preisverlaufs-Graph stützen die eigentliche Kaufentscheidung, ähnliche Inserate erscheinen als Cards — und beim Scrollen halten eine Sticky-Top-Bar (Name + Preis) und eine untere Aktionsleiste die zwei wichtigsten Dinge stets in Reichweite (Szenario: Verkäufer kontaktieren).
Working grayscale-first also kept the reference board honest: the dark, photo-first direction from stage 04 had to survive as pure hierarchy before it earned its palette.
Grayscale-first hielt auch das Referenzboard ehrlich: Die dunkle, foto-zentrierte Richtung aus Abschnitt 04 musste als reine Hierarchie bestehen, bevor sie ihre Palette bekam.
07Final design + UI kit — systematic, not a set of picturesFinales Design + UI-Kit — systematisch, kein Bilderstapel
The concept ships as ~25 final screens covering the full scenario list — list, view switching and sorting, filters, detail page, gallery with 360°, seller contact, saving and comparing — plus a documented UI kit: text styles, color styles, and effect/shadow styles. The kit is what separates a concept from a moodboard: every screen is assembled from named styles, so the system would survive a second designer.
Das Konzept liefert ~25 finale Screens, die die komplette Szenario-Liste abdecken — Liste, Ansichtswechsel und Sortierung, Filter, Detailseite, Galerie mit 360°, Verkäuferkontakt, Speichern und Vergleichen — plus ein dokumentiertes UI-Kit: Textstile, Farbstile und Effekt-/Schattenstile. Das Kit unterscheidet ein Konzept von einem Moodboard: Jeder Screen besteht aus benannten Stilen — das System würde einen zweiten Designer überleben.
Palette: dark blue, green, light blue — the instrument-like register the reference board argued for. No playful accents, no lifestyle warmth; the colors say "tool", not "shopping". Typography is a highly legible sans-serif carrying screens packed with specs, prices and dates — when every row holds six data points, the typeface is load-bearing infrastructure. And the tone of voice criterion from stage 03 runs through every label: precise, jargon-free, explicit.
Palette: Dunkelblau, Grün, Hellblau — das instrumentenhafte Register, für das das Referenzboard argumentierte. Keine verspielten Akzente, keine Lifestyle-Wärme; die Farben sagen „Werkzeug", nicht „Shopping". Die Typografie: eine sehr gut lesbare Sans-Serif für Screens voller Specs, Preise und Daten — wenn jede Zeile sechs Datenpunkte enthält, ist die Schrift tragende Infrastruktur. Und das Tone-of-Voice-Kriterium aus Abschnitt 03 zieht sich durch jedes Label: präzise, jargonfrei, explizit.
The header screenshot at the top of this page shows the outcome: the redesigned car list and detail page, assembled entirely from the kit.
Der Screenshot am Seitenanfang zeigt das Ergebnis: die neu gestaltete Fahrzeugliste und Detailseite — vollständig aus dem Kit gebaut.
08What I'd validate nextWas ich als Nächstes validieren würde
A concept is a set of hypotheses, and I'd rather name mine than defend them. Before shipping, this design needs evidence on three fronts:
Ein Konzept ist ein Bündel von Hypothesen — und ich benenne meine lieber, als sie zu verteidigen. Vor einem Launch braucht dieses Design Evidenz an drei Fronten:
- Snippet information priority — card sorting plus a quantitative survey to test whether my ordering of specs, date and distance matches how buyers actually rank them.
- List vs. grid — the list layout is an argued choice, not a proven one. A toggle test would settle it with behavior instead of debate.
- Usability testing with the real audience — the teardown caught the rating-label issue; a proper round with actual used-car buyers and sellers would catch what I can't see from inside the design.
- Informationspriorität im Snippet — Card Sorting plus quantitative Umfrage, um zu prüfen, ob meine Reihenfolge von Specs, Datum und Entfernung der tatsächlichen Gewichtung der Käufer entspricht.
- Liste vs. Grid — das Listenlayout ist eine begründete Entscheidung, keine bewiesene. Ein Toggle-Test würde die Frage mit Verhalten klären statt mit Debatte.
- Usability-Tests mit der echten Zielgruppe — der Teardown fand das Rating-Label-Problem; eine richtige Runde mit echten Gebrauchtwagen-Käufern und -Verkäufern fände, was ich von innen heraus nicht sehen kann.
Knowing which decisions still need evidence is, to me, part of the craft — a backlog of open questions is more honest than a page of invented wins.
Zu wissen, welche Entscheidungen noch Evidenz brauchen, gehört für mich zum Handwerk — ein Backlog offener Fragen ist ehrlicher als eine Seite erfundener Erfolge.