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

Schwerpunkte

Über mich

Angefangen habe ich 2010 in der Druckvorstufe. Seit 2011 gestalte ich, seit 2019 arbeite ich im UX Design. 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, weil alle dieselbe Grundlage nutzen und eine Änderung an einer Stelle überall gilt. Heute baue ich solche Systeme mit KI-Modellen, die ich briefe wie Mitarbeiter.

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. Ohne Vorkenntnisse weiß man in einem asiatischen Supermarkt nicht, was man ü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. Das reichte, 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
2024 Digitalagentur, München

Die App „one conference“

Neu gestaltet für Mobilgeräte und Desktop

In einer Münchner Digitalagentur habe ich 2024 die interne Konferenz-App „one conference“ für Mobilgeräte und Desktop neu gestaltet und um Funktionen erweitert. In Figma baute ich dazu einen Prototyp mit Tokens und Variablen, der die Abläufe mitführte, und übergab ihn an die internen Entwickler.

Ergebnis: Bei der jährlichen Konferenz lief meine Fassung.

Designsysteme

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

2024 Digitalagentur, München

Eine Library für Volkswagen

Figma-Komponenten für die Volkswagen-Seiten

2024 habe ich in einer Münchner Digitalagentur 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, meinten, darauf hätten sie auch selbst kommen können, und waren dankbar.

2024 Digitalagentur, München

Ein Designsystem aus Tokens

Mit wenigen Klicks auf andere Marken

Auf eigene Initiative habe ich 2024 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 System lässt sich mit wenigen Klicks auf andere Marken umstellen und führt Hell- und Dunkelmodus mit. Ob es heute im Einsatz ist, weiß ich nicht.

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; sie blieb bei der Agentur. Danach sprachen die Verantwortlichen einzeln mit mir, um es im Detail zu verstehen.

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.

Systeme, die wiederkehrende Arbeit übernehmen, baue ich schon lange. Ein frühes Beispiel liegt über zehn Jahre zurück, vor KI-Werkzeugen wie Claude Code. Für einen wiederkehrenden Bericht baute ich eine Eingabemaske, dahinter lagen Berechnung und Diagramme, und der fertige Bericht entstand auf Knopfdruck.

Seit 12/2025 In der Agentur

Eine Baustein­bibliothek für automatisierte Seiten

Vorlagen, die zu Bausteinen wurden

Zurzeit verantworte ich in einer anderen Agentur Landingpages mit Konzept, Gestaltung und Text. Zuerst habe ich dort Layoutvorlagen von Hand angelegt und eigene Text- und Designregeln festgelegt, nach denen bewertet wird. Zu jedem Kunden legte ich damals ein kleines Designsystem in Figma an, damit ich selbst einheitlich gestalten konnte.

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

Seit 12/2025 In der Agentur

Ein Wizard für Landingpages

Vom hinterlegten Briefing zur fertigen Seite

Aus den Bausteinen und den Regeln, die ich geschrieben habe, ist mit Claude Code ein System entstanden, das Landingpages samt Texten 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.

Aus dem Studium

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.

Thesis lesen PDF, 74 Seiten
Sommersemester 2022 Studienprojekt

colibre

Konzept und App-Prototyp

colibre war ein Studienprojekt im Sommersemester 2022, zu dritt. Wir 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.

Vorgehen: Als Erfahrenster im Team verteilte ich die Aufgaben nach Können und baute den Prototyp selbst, interaktiv in Figma.

Prototyp ansehen Figma

Wie ich arbeite

Mein Schwerpunkt ist UX, und die Oberfläche ist der Teil davon, den man sieht. Mir sind langlebige Produkte wichtig, weil sich Sorgfalt dort lohnt. Ich liebe es, Komplexität zu verringern und Dinge für die Menschen, die sie nutzen, einfacher zu machen.

Kontakt

Über Produktdesign, Designsysteme und KI tausche ich mich gern aus.