3D-Konfigurator für Rashguards

Trace

Trace bietet den ersten 3D-Konfigurator zur Personalisierung von Lycra-Shirts für Surfen, Padel und BJJ. Nutzer gestalten ihre Shirts direkt online und sehen in Echtzeit, wie Farben, Muster, Grafiken und Designelemente auf dem 3D-Modell wirken. Die Anwendung verbindet technische Präzision mit kreativer Freiheit und macht den Bestellprozess für massgeschneiderte Performance-Wear intuitiv und visuell erlebbar.

Mobile and desktop mockup of the trace website. mobile mockup shows the configurator and the desktop mockups shows the landingpage.
a 3D model of a shirt around the shirt there are floating ui elements from the configurator connected to the shirt. the ui elements show neck colors, body patterns, base colors and logo upload

UX-Design hinter dem Konfigurator

Im Zentrum des Projekts stand die Entwicklung eines klar strukturierten UX-Flows: von der Auswahl des Grundmusters über die Platzierung von Farben und Logos bis hin zur finalen Konfiguration des Shirts. Das Ziel bestand darin, den kreativen Prozess so intuitiv wie möglich zu gestalten – mit einer Benutzerführung, die auch bei komplexen Gestaltungsoptionen jederzeit verständlich bleibt.

Sportart auswählen, Design starten

Ob Surfen, Paddeln oder BJJ – jede Disziplin stellt andere Anforderungen an Schnitt, Material und Look. In dieser Auswahl starten Nutzer den Konfigurationsprozess, indem sie das passende Shirt-Modell auswählen. Die UX leitet sie klar durch die Entscheidung und legt damit die Grundlage für alle weiteren Designoptionen.

product-cards showing three different t-shirt options. one for surfing, one for paddling and one for fighting/boxing.
two desktop mockups showing the base configuration of a shirt. in this example the shirt is red and white and has a checkered pattern on the body. the two mockups show the pattern settings and the base color settings.

Basis-Konfiguration

Im ersten Schritt wird die visuelle Grundlage des Shirts definiert: Nutzer wählen Hauptfarbe und ein Basis-Muster oder eine einfarbige Fläche. Diese Auswahl bildet das Fundament für das spätere Design.

Ärmel & Kragen

Farbe und Muster von Ärmeln und Kragen lassen sich unabhängig vom Grunddesign anpassen. So entsteht ein individueller Look, der funktionale Anforderungen und persönliche Stilvorlieben berücksichtigt.

one desktop mockup screen, showing the second step in the configurator. around the mockup are floating elements which show more configurator settings such as neck color and sleeve pattern. in this example the shirt has black and blue stripes all over.
mobile and desktop view of the configurator, showing the logo upload and text input. on mobile view there is a shirt with the text "instructor" on the back and on the front there is a logo.

Logo & Text

Zum Abschluss können Logos, Sponsoren oder individuelle Beschriftungen auf dem Shirt platziert werden. Die Positionierung erfolgt direkt im 3D-Modell.

3D-Ansicht in Echtzeit

Das Shirt lässt sich frei rotieren, zoomen und aus jedem Winkel betrachten. Alle Gestaltungsdetails sind direkt am 3D-Modell sichtbar – maximale Kontrolle und Präzision im Designprozess.

Flexibel auf allen Endgeräten

Der vollständig responsive Konfigurator funktioniert reibungslos auf Desktop, Tablet und Mobilgeräten. Die User Experience bleibt unabhängig vom Gerät intuitiv und der volle Funktionsumfang ist immer verfügbar.

three mockups screens one for desktop, one for tablet and one for mobile. they all show the same site from the configurator. visualise how responsive the configurator is.

Nächstes Projekt ansehen

B2B-Onlineshop für Büro & Versand

Zum Projekt
white arrow pointing to the right
wireframe mockup of product list page. on the left there are filters and on the right are the product cards. around the wireframe mockup there are floating cards with illus such as a delivery truck, location pin and a cardboard box