André Czupala

Senior Product Designer

Ich gestalte Produkte und die Systeme, auf denen sie stehen.

Frankfurt am Main Seit 2010 im Beruf B.Sc. UX Design

Über mich

Ich begleite ein Produkt gern vom Research über das Konzept bis zur Umsetzung. Dabei sehe ich, wo sich Arbeit wiederholt, und baue das System dazu, aus Komponenten, Tokens, Regeln und Prüfstufen. Am Anfang ist das Mehraufwand. Sobald mehrere an einem Produkt arbeiten, zahlt er sich aus. Alle bauen auf derselben Grundlage, das Ergebnis bleibt einheitlich, und eine Änderung an einer Stelle gilt überall. Angefangen hat das vor über zehn Jahren, lange vor KI-Werkzeugen wie Claude Code, mit einem Bericht, der aus einer Eingabemaske auf Knopfdruck entstand. Heute baue ich solche Systeme mit KI-Modellen, die ich briefe wie Mitarbeiter, und mein Wissen aus der Softwareentwicklung hilft mir dabei.

Inhalt

End-to-End-Produktdesign

Research, Konzept, Prototyp, Übergabe an die Entwicklung, Betreuung bis zum Livegang.

04/2022 bis 05/2023 GoTiger, Berlin

GoTiger App

Schnelllieferdienst für asiatische Lebensmittel

GoTiger lieferte asiatische Lebensmittel in Berlin aus, und ich gestaltete die App des Lieferdienstes. Ein Problem lag außerhalb der App. Asiatische Supermärkte sind oft chaotisch, und ohne Vorkenntnisse weiß man nicht, was man dort überhaupt kaufen kann. Also erklärte jede Produktdetailseite das Produkt, und Rezepte legten die Zutaten passend zur Portionsgröße mit einem Klick in den Warenkorb. Was man schon zu Hause hatte, wählte man ab. Außerdem gab es ein Swipe-Spiel, über das sich das passende Rezept finden ließ. Das ist alles live gegangen.

Vorgehen: Ich begann mit einer Umfrage in der Zielgruppe, später kamen Nutzertests im Interview hinzu. Hochwissenschaftlich war das nicht. Es reichte aber, um zu sehen, was zu verbessern war. Als eine Kollegin ausschied, übernahm ich ihre Aufgaben mit und briefte von da an das externe Entwicklungsteam.

Prototyp ansehen Figma Projekt als PDF 2,0 MB
10/2024 bis 03/2025 Bachelorthesis

filo

Nachrichten und Dateien an einer Stelle

filo, meine Bachelorthesis, kam aus dem Berufsalltag. Man sucht eine Nachricht zu einem Projekt und weiß nicht mehr, wo sie war. Kam sie per E-Mail oder über Slack? Und die Datei dazu, lag die auf dem Drive oder doch in irgendeinem Chat? Wer so sucht, verliert Zeit, und wenn es hektisch wird, wird daraus Stress. Ich wollte eine Oberfläche, die alles an einer Stelle bündelt, ohne dass alle dasselbe Werkzeug nutzen müssen. Überrascht hat mich, wie vielen es genauso geht.

Ergebnis: Gebaut habe ich die Oberfläche als klickbaren Figma-Prototyp, der seine Zustände über 271 Variablen ohne Backend simuliert. Den Prototyp habe ich mit 23 Teilnehmenden in moderierten Online-Sitzungen evaluiert. Auch Teilnehmende mit wenig Technikerfahrung kamen damit zurecht. Das hat mich gefreut. Eine Bedienoberfläche, die ich mir in meiner heutigen Rolle gebaut habe, folgt einem ähnlichen Gedanken.

Thesis lesen PDF, 74 Seiten
Sommersemester 2022 Studienprojekt

colibre

Marke und App-Prototyp

colibre war ein Studienprojekt im Sommersemester 2022, im Fach Brand Design Development. Zuerst kam die Marke, ein Markenkompass mit den drei Achsen Lifestyle, Innovation und Connection und mit Werten, an denen sich jede weitere Entscheidung messen ließ. Dann kam das Produkt. Wir im Team wanderten alle gern, also fragten wir uns, was uns dabei fehlte. So entstand das Konzept einer Outdoor-App mit Karte, Routen, einem Shop für Ausrüstung und einem Chat mit Leuten, die dieselbe Route gegangen sind. Der Colispot, der Knopf in der Mitte der Navigation, war der Kern. Damit konnte man einen schönen Ort auf der Karte markieren und teilen. Die drei Achsen fanden sich in der App wieder, der Shop als Lifestyle, der Colispot als Innovation, der Chat als Connection. Und die schräge Kante des Logos lief durch Buttons, Schalter und Preisschilder, so blieb die Marke bis in die Bedienung sichtbar.

Vorgehen: Als Erfahrenster im dreiköpfigen Team verteilte ich die Aufgaben nach Können und baute den Prototyp selbst, interaktiv in Figma. Weiter ging es nicht, es war ein Studienprojekt.

Prototyp ansehen Figma

Designsysteme

Ich baue Designsysteme auf, von Design Tokens über mehrere Ebenen bis zu verschachtelten Komponenten und Flows, mit allem, was Figma dafür hergibt.

Seit 12/2025 In der Agentur

Eine Baustein­bibliothek für automatisierte Seiten

Layoutvorlagen, die zu Bausteinen wurden

Zurzeit arbeite ich in einer Performance-Marketing-Agentur und verantworte dort als einziger Designer den Bau der Funnels für die Kunden: Landingpages mit ihren Texten, Lead-Magnet-PDFs und Anzeigenmotive. Zuerst habe ich dort Layoutvorlagen von Hand angelegt. Jeder Kunde bekam ein kleines Designsystem in Figma, nur so weit, wie er es brauchte.

Ergebnis: Aus diesen Vorlagen sind 26 Bausteine geworden, aus denen heute Seiten automatisiert entstehen. Hat ein Kunde noch kein Designsystem, entsteht es heute beim Projektstart nach Regeln und wird auf die Bausteine angewandt. Was ich von Hand gebaut hatte, ist damit zur Grundlage der maschinellen Produktion geworden.

2024 Digitalagentur, München

Eine Library für Volkswagen

Figma-Komponenten für ID. Buzz und California

2024 habe ich in einer Digitalagentur in München die Websites für zwei Modelle von Volkswagen Nutzfahrzeuge gebaut, den ID. Buzz und den California. Der Hersteller hatte seine Komponenten dokumentiert, in unserem Team fehlten sie aber als Figma-Komponenten. Damit wir sie nicht immer wieder neu anlegen mussten, habe ich nach und nach eine interne Library in Figma aufgebaut.

Ergebnis: Meine Kollegen, die die anderen Volkswagen-Seiten bauten, waren dankbar. Darauf hätten sie auch selbst kommen können, meinten sie, so naheliegend war es.

2024 Digitalagentur, München

Ein Designsystem aus Tokens

Mit wenigen Klicks auf eine andere Marke

Im selben Jahr habe ich auf eigene Initiative ein Designsystem aus Design Tokens gebaut, weil das White-Label-System der Agentur, mit dem wir die Kundenprojekte bauten, auf mehrere Dateien verteilt war. Das neue System lässt sich mit wenigen Klicks auf eine andere Marke umstellen und führt Hell- und Dunkelmodus mit.

Ergebnis: Als ich es vorstellte, waren erst einmal alle verblüfft, und wie es technisch funktionierte, war nicht sofort klar. Also zeigte ich mit einer Demo-Library, was das System bewirkte. Danach sprachen die Leiter der Agentur einzeln mit mir, um es im Detail zu verstehen. Die Demo-Library blieb bei der Agentur. Ob das System heute im Einsatz ist, weiß ich nicht. Im Einsatz war dagegen meine Fassung der App „one conference“ bei der jährlichen internen Konferenz der Agentur. Die App gestaltete ich für Mobilgeräte und Desktop neu und erweiterte sie um Funktionen. In Figma baute ich dazu einen Prototyp mit Tokens und Variablen, der selbst die Abläufe mitführte, und übergab ihn an die internen Entwickler.

KI-gestützte Systeme

Beim Code sagen Compiler und Tests, ob es stimmt. Für Gestaltung und Text gibt es keinen Compiler, da muss jemand die Regeln und Prüfstufen schreiben, der das Fach kennt.

Die Regeln haben einen alten Anlass. Ich habe erlebt, wie Projekte nach Geschmack abgenommen wurden, erst intern und dann beim Kunden, jedes Mal mit vielen Runden. Am Ende verstieß vieles gegen handwerkliche Regeln der Gestaltung, Texte etwa waren länger, als ein Leser durchhält. Also habe ich Kriterien festgelegt, nach denen bewertet wird: eigene Text- und Designregeln und eine Prüfliste. Die einfachste Regel legt eine Bildschirmbreite fest und rendert einen Screenshot, damit alle über dieselbe Ansicht reden.

Seit 12/2025 In der Agentur

Ein System für ganze Funnels

Ein Wizard vom Briefing zur Landingpage

Auf diesen Regeln steht heute ein mit Claude Code gebautes System, das ganze Funnels produziert. Für einen Kunden wird ein Briefing hinterlegt, und daraus baut das System eine Seite mit passenden Sektionen und Text. Sichtbar wird sie in einem Wizard, den ich entworfen und gebaut habe. Damit soll jeder im Team mit wenigen Klicks eine Landingpage erzeugen können. Links stehen die Texte als Formular, rechts steht die Vorschau der Seite, umschaltbar auf die mobile Ansicht. Wer mehr Mühe hineinstecken will, kann Sektionen hinzufügen, entfernen oder verschieben. Das allgemeine Layout ist durch ein Template festgelegt. Accessibility ist Bedingung für die Freigabe, nicht Nacharbeit.

Ergebnis: Von Hand brauchte nach meiner Erinnerung allein der erste Aufbau einer Seite einen halben bis einen ganzen Tag, ohne Text und ohne mobile Fassung. Mit dem Wizard steht die erste Fassung mit Text nach rund fünf Minuten, Korrekturen kommen obendrauf. Der Wizard ist fertig gebaut und läuft noch lokal bei mir, die Übernahme ins gemeinsame System steht aus.

Nicht gezeigt: Die Rechte liegen beim Arbeitgeber, zeigen kann ich davon also nichts.

Was ich suche

Was ich suche, ist ein Umfeld mit fachkundigen Leuten, in dem gründlich gearbeitet wird und nicht nur schnell und oberflächlich. Ich suche etwas Langlebiges, an dem sich Sorgfalt lohnt, und ein Feld, in dem es auf meine Arbeit ankommt. Ich mag es, den ganzen Prozess im Blick zu haben, und das mit einem Team, am liebsten vor Ort, Remote-Arbeit bin ich aber auch gewohnt. Reine Umsetzung suche ich nicht. Wenn ich Freiraum und die nötigen Ressourcen habe und selbst entscheiden kann, wird die Arbeit meist gut. Rat und Kritik nehme ich gern an, wenn sie konstruktiv sind. In Studienprojekten habe ich Teams geführt, und ich kann Leute einschätzen und richtig einsetzen. Senior in meinem Bereich oder ein erster Schritt in die Leitung, beides passt mir. Führung will ich fachlich lernen. Und mehr über KI.

Kontakt