UX/UI Design für Shopify legt fest, wie Kunden durch den Shop geführt werden und wie jede Seite aussieht. Wir gestalten die Seitentypen von der Startseite bis zum Kundenkonto, definieren das Designsystem aus Farben, Schrift, Abständen und Komponenten und bauen Prototypen für die Abläufe, die sich auf einem Standbild nicht beurteilen lassen.
Ein Entwurf für Shopify trifft auf ein festes Datenmodell aus Produkten, Varianten, Kollektionen und Metafeldern. Der Checkout ist weitgehend vorgegeben und lässt sich nur in definierten Grenzen anpassen. Wir gestalten innerhalb dieser Grenzen, damit im Theme keine Sonderlogik entsteht. Die Umsetzung übernimmt die Shopify Entwicklung, bei uns im selben Team.
NICCOS ist seit April 2022 Shopify Plus Partner. Im Shopify-Partnerverzeichnis stehen 19 Bewertungen mit der Note 5,0. Welche Shops wir gestaltet haben, zeigen 13 veröffentlichte Case Studies. Mehrere davon enthalten ein Redesign oder ein neues Designsystem.
Ein Designsystem entsteht in drei Schritten: Die Marke wird für den Shop konkretisiert, die Seitentypen werden als Rahmen mit wiederverwendbaren Modulen entworfen, und das System wird als Theme-Einstellungen und CSS-Variablen in den Code übernommen. Farben erhalten Rollen wie Fläche, Text und Hervorhebung, damit eine Änderung der Marke an einer Stelle erfolgt. Ein System, das nur in Figma liegt, stimmt nach wenigen Änderungen nicht mehr mit dem Shop überein.
SMILODOX wollte B2C und B2B auf eine gemeinsame, wartbare Grundlage bringen. In einem Design Workshop haben wir Brand Guidelines und Brand Layers für den Store erarbeitet, mit definierten Ebenen für Kampagne, Kategorie, Produkt und B2B-Kommunikation. Darauf aufbauend haben wir in Figma die zentralen Seitentypen angelegt, mit klarer Hierarchie und wiederverwendbaren Modulen. Der B2B-Bereich erhielt einen eigenen Rahmen für Geschäftskunden, ohne dass ein zweites Designsystem entstand.
Laut Case Study zu SMILODOX ging der neue Store nach zwei Monaten live. Das interne Team führt ihn weiter. Wie B2B und B2C technisch zusammenlaufen, beschreibt die Seite Shopify B2B.
Ein Redesign ist richtig, wenn die Struktur des Shops nicht mehr trägt: Die mobile Ansicht wurde nie eigens entworfen, das Team kann Kampagnen nicht selbst bauen, oder die Marke hat sich verändert. Funktioniert der Shop grundsätzlich und soll mehr verkaufen, ist die Conversion-Optimierung mit Hypothese, Test und Auswertung der günstigere Weg.
Hairshop Pro, ein Onlineshop für professionelle Friseur- und Pflegeprodukte, arbeitete auf Plentymarkets. Die mobile Bedienung war schwach, und das Marketing hatte kaum Möglichkeiten, die Conversion gezielt zu verbessern. Wir haben das Design in Figma neu konzipiert, mit Fokus auf die mobile Nutzung. Mengenrabatte, Produkt-Bundles und Sticky CTAs waren von Beginn an Teil des Entwurfs. Die Case Study zu Hairshop Pro nennt 35 % mehr Conversion Rate nach dem Launch und 20 % mehr Warenkorbwert durch Bundle-Konzept und Cart-Upsells.
Konfiguratoren, Bundles und der Warenkorb sind Abläufe aus mehreren Schritten. Wir gestalten sie als klickbaren Prototyp und legen für jeden Schritt fest, was der Kunde sieht, was er wählen muss und was bei einer fehlenden Eingabe geschieht. Die Reihenfolge der Schritte entscheidet darüber, ob ein Kunde den Ablauf abschließt. Deshalb gehen wir den Prototyp mit Nutzern oder Deinem Team durch, bevor die Entwicklung beginnt.
BlumeIdeal versendet Blumen zum Wunschtermin. Im früheren Shop auf Shopware 5 ließen sich Geschenke und Lieferdaten nur begrenzt abbilden. Der neue Konfigurator führt vom Blumenstrauß über Zusatzartikel wie Vase oder Pralinen zur Grußkarte mit persönlicher Nachricht. Empfehlungen erscheinen abhängig von Anlass und Kategorie, ohne dass die Seite neu lädt. Die Case Study zu BlumeIdeal weist 33 % mehr Conversion Rate gegenüber Shopware und 29 % mehr Warenkorbwert durch die Upsells im Konfigurator aus.
Für Svenja Walberg haben wir den Warenkorb als Drawer umgesetzt, der Empfehlungen, Bundles und den Einstieg in den Checkout zusammenführt. Die Case Study zu Svenja Walberg beschreibt, wie Abo, Bundles und Upsells als ein System arbeiten.
Entwürfe scheitern im Theme an drei Stellen. Zustände wurden nicht gestaltet und werden im Code improvisiert. Der Entwurf rechnet mit Inhalten, die die Redaktion nicht liefern kann. Oder er ignoriert das Datenmodell, und jede Produktseite braucht Sonderlogik. Wir prüfen deshalb jeden Seitentyp mit langen Produktnamen, fehlenden Bildern und ausverkauften Varianten.
Barrierefreiheit gehört in den Entwurf. Kontraste, Fokusstile, Zielgrößen für Touch und sichtbare Beschriftungen legen wir im Designsystem fest. Nachträglich eingebaut führt dasselbe Ziel oft zu optischen Kompromissen. Die Prüfung beschreibt die Seite zum barrierefreien Shopify Shop.
Wir passen nicht, wenn Du einzelne Banner oder Kampagnenmotive suchst. Wir gestalten das System, in dem solche Inhalte entstehen. Ist offen, ob Relaunch, Migration oder Teilumbau ansteht, klärt das zuerst die Shopify Beratung.
Startseite, Kategorie, Produktseite, Warenkorb und Kundenkonto als zusammenhängendes System mit allen Zuständen.
Farben, Schriftskala, Abstände und Komponenten liegen als Theme-Einstellungen und CSS-Variablen im Code.
Varianten-Auswahl, Konfigurator, Filter und Cart-Drawer werden klickbar, bevor jemand sie entwickelt.
Positionierung, Sortiment oder Zielgruppe passen nicht mehr zu dem, was der Shop zeigt.
Konfigurator, Abo-Auswahl, B2B-Registrierung oder Bundles brauchen einen gestalteten Ablauf, bevor sie entwickelt werden.
Über Jahre sind mehrere Varianten von Buttons, Grautönen und Abständen entstanden. Ein System ordnet das.
Jede Kampagne braucht einen Entwickler, weil gestaltete Bausteine fehlen.
Dann geht es direkt in die Umsetzung mit Theme-Architektur, Sections und Metafeldern.
Dann bringen Hypothese, Test und Auswertung mehr als ein neuer Entwurf.
Dann kommen Ladeverhalten und Core Web Vitals vor jedem Entwurf.
Dann wird zuerst entschieden, ob Relaunch, Migration oder Teilumbau ansteht.
Wir sehen uns Theme, Zahlen und Anfragen an den Support an und halten fest, wo Kunden heute hängenbleiben.
Seitentypen, Navigation und Bausteine werden festgelegt. Ergebnis ist eine Liste von Sections und Blocks.
Schriftskala, Farbrollen, Abstände, Zustände und Komponenten erhalten Namen, die auch im Code gelten.
Alle Seitentypen werden im System gestaltet, auch mit langen Produktnamen und fehlenden Bildern.
Die Abläufe der Kaufstrecke werden klickbar und mit Nutzern oder dem Team durchgegangen.
Wir gehen das System mit der Entwicklung durch und prüfen die Umsetzung im Theme.
Leerer Warenkorb, ausverkaufte Variante, Formularfehler und Ladezustand sind Teil des Entwurfs.
Kontraste, Fokusstile, Touch-Flächen und Bedienung mit der Tastatur sind im Designsystem festgelegt.
Jede Section hat Grenzen für Textmenge und Bildformate und eine Regel für fehlenden Inhalt.
Varianten, Kollektionen und Metafelder sind im Entwurf berücksichtigt.
Mobil ist der Hauptkanal
Der Shop wurde am großen Bildschirm entworfen und verkauft überwiegend am Telefon.
Das Sortiment braucht Erklärung
Kunden müssen vergleichen, konfigurieren oder Maße prüfen. Bild und Preis reichen dafür nicht.
Mehrere Shops, ein Auftritt
Zweitmarke, Ländershop oder B2B-Bereich sollen zusammengehören und ein System teilen.
Der Relaunch ist beschlossen
Der Entwurf gehört vor die Entwicklung. Änderungen im fertigen Theme sind deutlich aufwendiger.
Der Auslöser ist eine Prüfung
Geht es um WCAG 2.2 AA und das BFSG, brauchst Du zuerst einen Befund und kein Redesign.
Zum barrierefreien Shopify ShopDie Produktdaten tragen nicht
Fehlen Attribute, Bilder oder Bestände aus ERP und PIM, zeigt jeder Entwurf Lücken. Das löst die Datenquelle.
Zur SystemintegrationDer Plan ist ein neuer Markt
Sprachen, Währungen, Steuern und Versandregeln entscheiden über die Struktur, bevor der Entwurf beginnt.
Zur Shopify InternationalisierungManche Shops brauchen eine Prüfung, andere einen neuen Entwurf, und laufende Shops brauchen Gestaltung im Betrieb. Daraus ergeben sich drei Zuschnitte.
Für Shops, die vermuten, wo Kunden abbrechen, und eine Grundlage für die nächste Entscheidung brauchen.
Endet mit einer priorisierten Liste, die Dein Team auch ohne uns abarbeiten kann.
Für Shops, bei denen Struktur, Seitentypen und Komponenten als System neu entstehen.
Endet mit einem Designsystem, aus dem die Entwicklung ohne Rückfragen baut.
Für Shops mit laufenden Kampagnen, wachsendem Sortiment und regelmäßig neuen Inhalten.
Läuft, solange neue Seiten entstehen, und hält sie im selben System.
Jede Zahl steht so in der Case Study und lässt sich dort nachlesen.
Groundies, MYCR7 und Gusti Leder sind drei von dreizehn Projekten, die wir mit Ausgangslage, Umsetzung und Ergebnis veröffentlicht haben.
Wir sehen uns Theme, Seitentypen und Zahlen an. Danach weißt Du, ob ein Redesign, eine Optimierung oder vorerst nichts ansteht.
NICCOS
Die Seite konnte nicht geladen werden.
Bitte lade die Seite neu. Falls gerade ein Update live gegangen ist, wird damit die aktuelle Version geladen.
