/ Overview:
„Design, das Shop und Nutzer verbindet“
Damit dein Online-Shop sowohl interne Anforderungen als auch Kundenbedürfnisse optimal abdeckt, setzen wir auf einen strukturierten UX/UI-Prozess. Du bist von Anfang an involviert, kannst Feedback geben und den Fortschritt transparent verfolgen. So entsteht ein Design, das nicht nur gut aussieht, sondern conversionstark, modular und skalierbar ist.
Wenn aus dem Interface ein echtes Markenerlebnis werden soll, denken wir das in unserer Solution Digital Flagship Stores.
UX/UI-Design in 5 Schritten zum neuen Onlineshop
Ein Designprozess, der interne Anforderungen und die Bedürfnisse deiner Zielgruppe zusammenbringt.
Damit dein neuer Onlineshop sowohl die internen Anforderungen erfüllt als auch die Bedürfnisse deiner Zielgruppe bestmöglich abdeckt, bauen wir das visuelle Design in fünf Schritten auf. Von der Informationssammlung über die Konzeption bis zur modularen Umsetzung halten wir dich mit gezielten Präsentationsterminen immer auf dem aktuellen Stand.
So verfolgst du den Designverlauf von Anfang an transparent, kannst neue Anforderungen effizient kommunizieren und bei Bedarf einhaken. Der Designprozess bleibt dadurch agil und ressourcenschonend.
Jeder Onlineshop, den wir konzipieren und visualisieren, durchläuft diese fünf Schritte – von der Konzeption und Stilfindung bis zum primären und sekundären Screendesign. Du bist dabei direkt involviert und kannst jeden Schritt nachvollziehen.
Wir gestalten Shops, die intuitiv bedienbar, visuell stark und funktional sind.
Unsere Leistungen
Wir gestalten nicht einfach Screens – wir schaffen ein konsistentes, modulares und intuitives Shop-Erlebnis. Vom ersten Wireframe über Prototyping bis zum finalen Screendesign bist du direkt involviert. So entstehen Shops, die visuell überzeugen, die Customer Journey unterstützen und technische Umsetzbarkeit gewährleisten.
Mit Styleguides und modularen Design-Systemen sorgen wir dafür, dass dein Shop über hunderte Seiten hinweg konsistent bleibt. Interaktive Elemente, Animationen und Mikrointeraktionen erhöhen die Nutzerfreundlichkeit und steigern Conversion. Workshops und Whiteboard-Sessions stellen sicher, dass Strategie, UX und Umsetzung eng verzahnt sind.
UX/UI Cases
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g d="M 0 6 C 0 2.686 2.686 0 6 0 C 9.314 0 12 2.686 12 6 C 12 9.314 9.314 12 6 12 C 2.686 12 0 9.314 0 6 Z M 7.556 5.988 L 4.444 5.988 M 4.444 5.988 L 5.654 4.778 M 4.444 5.988 L 5.654 7.198" fill="transparent" height="12px" id="dA2VOCCPw" width="12px"><path d="M 0 6 C 0 2.686 2.686 0 6 0 C 9.314 0 12 2.686 12 6 C 12 9.314 9.314 12 6 12 C 2.686 12 0 9.314 0 6 Z" fill="rgb(228, 227, 227)" height="12px" id="cCUyf7I6O" width="12px"/><path d="M 3.111 1.21 L 0 1.21 M 0 1.21 L 1.21 0 M 0 1.21 L 1.21 2.42" fill="transparent" height="2.4197787857055673px" id="ox8VP7Wvz" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.26" stroke="rgb(0, 0, 0)" transform="translate(4.444 4.778)" width="3.1111111111111107px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g d="M 12 6 C 12 9.314 9.314 12 6 12 C 2.686 12 0 9.314 0 6 C 0 2.686 2.686 0 6 0 C 9.314 0 12 2.686 12 6 Z M 4.444 5.988 L 7.556 5.988 M 7.556 5.988 L 6.346 7.198 M 7.556 5.988 L 6.346 4.778" fill="transparent" height="12px" id="ms6Bwewdr" width="12px"><path d="M 12 6 C 12 9.314 9.314 12 6 12 C 2.686 12 0 9.314 0 6 C 0 2.686 2.686 0 6 0 C 9.314 0 12 2.686 12 6 Z" fill="rgb(228, 227, 227)" height="12px" id="DUAqEzNsK" width="12px"/><path d="M 0 1.21 L 3.111 1.21 M 3.111 1.21 L 1.901 2.42 M 3.111 1.21 L 1.901 0" fill="transparent" height="2.4197787695990662px" id="hOxrBaDVF" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.26" stroke="rgb(0, 0, 0)" transform="translate(4.444 4.778)" width="3.1111115866766994px"/></g></svg>)
Unsere Kernaktivitäten im Designprozess.
Wireframing
Ein Wireframe ist das Grundgerüst einer Website oder eines Onlineshops. Layout und Elemente werden schemenhaft angeordnet, ohne dass konkrete Inhalte nötig sind. So siehst du früh, wie sich die Seite anfühlt, während Anpassungen noch wenig Aufwand verursachen.
Styleguides
Der Styleguide legt die Design-Grundlagen fest: Icons, Schriftarten und -stile, Farben sowie Rasterwerte und Abstände. Er sorgt für ein konsistentes Design über alle Bereiche und Kanäle hinweg.
Design-System
Ein Shop-Design muss über mehrere hundert Seiten konsistent bleiben. Deshalb arbeiten wir neben dem Styleguide mit modular zusammengesetzten Komponenten. Durch die Vererbung funktionaler und optischer Attribute lassen sich Änderungen global anpassen, ohne Inkonsistenzen zu erzeugen.
Whiteboard-Sessions
Whiteboard-Tools sind meist cloudbasierte Programme, mit denen sich Ideen und Gedanken schnell grafisch festhalten lassen. Gerade im Konzeptions-Workshop entstehen so schneller gute Ideen, und komplexe Sachverhalte werden besser verstanden.
Prototyping
Whiteboard-Tools sind meist cloudbasierte Programme, mit denen sich Ideen und Gedanken schnell grafisch festhalten lassen. Gerade im Konzeptions-Workshop entstehen so schneller gute Ideen, und komplexe Sachverhalte werden besser verstanden.
Interaction-Design
Animationen zeigen Nutzern, dass das Interface auf ihre Aktionen reagiert. Erst durch das Design der Interaktionen wird die Bedienung eines Shops für alle Zielgruppen lebendig und inklusiv – und animierte Schaltflächen wirken deutlich ästhetischer als statische Zustände.
/ Vorgehen:
Die 5 Schritte unseres Design-Prozesses
01
Der Konzeptions-Workshop, vor Ort oder remote, bildet die Grundlage jedes Projekts. Anhand eines umfangreichen Themenkatalogs stecken wir technische und gestalterische Rahmenbedingungen ab, lernen Zielgruppe und E-Commerce-Ziele kennen und sammeln deine Wünsche zu Funktionen und Gestaltung. Danach brainstormen wir gemeinsam im vorbereiteten Wireframe.
02
Nach dem Workshop verschaffen wir uns einen Gesamtüberblick über dein Unternehmen, deine Zielgruppe und die wichtigsten design-relevanten KPIs. Dabei betrachten wir nicht nur den Onlineshop, sondern deinen gesamten Auftritt. Visuelle, funktionale und transaktionsorientierte Optimierungspotenziale besprechen wir direkt mit den Projektleitern und nehmen sie als Ideen in die Visualisierung auf.
03
Jetzt wird es kreativ: Wir erkunden Gestaltungswege in allen verfügbaren Inspirationsquellen – beim direkten Wettbewerb und in der E-Commerce-Landschaft anderer Branchen. Daraus entstehen meist zwei bis drei optisch völlig verschiedene Varianten der Startseite und der wichtigsten Navigationselemente wie Header und Off-Canvas-Menü. Backend- und Frontend-Entwicklung prüfen parallel die technische Umsetzbarkeit und den Aufwand.
04
Wir präsentieren die Varianten als interaktive Prototypen und bewerten die Designrichtungen gemeinsam. Für die gewählte Richtung erstellen wir einen Styleguide und gestalten auf Basis unseres Design-Systems die wichtigsten Bereiche des Shops – inklusive Animationskonzept für zentrale Interaktionselemente.
05
Nach deiner Freigabe übergeben wir das primäre Screendesign zum Umsetzungsstart an die Entwicklung. Im sekundären Screendesign gestalten wir die restlichen Shop-Bereiche und arbeiten individuelle, funktionale Detaillösungen ein, die auf eine höhere Conversion Rate zielen.
Konzeptions-Workshop und Wireframe
Im Konzeptions-Workshop lösen wir uns von der textlichen Fragestellung und wechseln mit dem Whiteboard-Tool FigJam in den kreativen, visuellen Modus, um noch mehr Ideen und Denkansätze zu sammeln. Der technische Standard ist im Wireframe bereits aufgebaut und dient als Fundament für alle technischen und gestalterischen Wünsche.
Mit einer Kartensortierung bewerten und priorisieren wir zum Schluss alle Ideen, damit die wirklich wichtigen Dinge zuerst erledigt werden. Idealerweise ist die Wireframe-Visualisierung bereits vollständig auf ihre technische Umsetzbarkeit geprüft – andernfalls starten wir diesen Prüfprozess spätestens jetzt.
Primäres Screendesign: Styleguide und Kernseiten
Für eine durchgängig konsistente Gestaltung legen wir im Styleguide zentral Layouts, Farben, Schriftstile und Icons fest. Unser Design-System enthält bereits alle Komponenten für den modularen Aufbau des Shops. Auf dieser Basis gestalten wir die Startseite, Navigationselemente wie Header, Off-Canvas-Menü und Filter, die Suchfunktion, eine kategorie- oder themenbasierte Landingpage, die Produktübersichtsseite sowie die Produktdetailseite.
Während dieser fokussierten Phase zoomen wir zu festgelegten Zeitpunkten gemeinsam mit Projektleitung und Entwicklung heraus, betrachten das große Ganze, nehmen neue Ideen auf und lösen technische Details noch eleganter.
Sekundäres Screendesign: Details für mehr Conversion
Das sekundäre Screendesign umfasst die restlichen elementaren Shop-Bereiche: den Checkout-Prozess, die Merk- oder Wunschliste, den Benutzerkonto-Bereich, die Suchergebnisseite sowie Systemseiten wie 404, Offline- und Maintenance-Modus. Hier entstehen keine komplett neuen Gestaltungsansätze mehr, sondern funktionale Detaillösungen.
Auch dieses Designpaket stimmen wir mit Projektleitung und Entwicklung ab und präsentieren es als Prototyp. Sobald du alle Bereiche freigegeben hast, erhält die Entwicklung die finalen Screendesigns und der Shop wird auf der Testumgebung eingerichtet.
UX/UI-Design-Services für Onlineshops
Von Wireframes bis Interaction-Design: Unsere Design-Services decken den gesamten Gestaltungsprozess deines Shops ab.
Unser Design-Team begleitet dich mit einem breiten Leistungsspektrum: UI/UX-Design, Wireframing, Design-Systeme, Prototyping, Interaction-Design und Conversion-Rate-Optimierung. Ergänzend bieten wir VCMS- und Medien-Guidelines sowie Producing-Workshops an.
Für Teams, die ihr Design-Know-how ausbauen wollen, gibt es zusätzlich Workshops und Coachings. Und wer viele Seiten konsistent halten muss, setzt auf ein tokenbasiertes Design-System, mit dem sich Änderungen global steuern lassen.
Wir haben Onlineshops in vielen Branchen gestaltet, unter anderem in den Bereichen Sport, Elektronik, Bildung, Fashion, Reisen, Beauty, Medizin und Schmuck. Diese Erfahrung fließt in jede Stilfindung ein: Wir analysieren nicht nur deinen direkten Wettbewerb, sondern holen uns Ideen aus der E-Commerce-Landschaft anderer Branchen.
Weil Design und Entwicklung von Beginn an im Austausch stehen, prüfen wir Ideen früh auf technische Umsetzbarkeit und Aufwand. So entstehen Designs, die nicht nur gut aussehen, sondern sich auch effizient umsetzen lassen.
/ Nächster Service
Tokenbased Designsystem Shopware 6
