Visual
Kit

Visual
Kit

Visual
Kit

Marke

Affenzahn,
ergobag,
satch

Rolle

Design · Konzept · Stakeholder Management · Anforderungsmanagement · Austausch Development · Qualitätskontrolle

Ergebnis
  • Modulares Layout-System mit skalierbaren Komponenten

  • ~60 % schnellere Produktion von Kampagnen- & Kollektionsseiten

  • Effizientere Zusammenarbeit mit Brand- & Marketing-Teams

  • Reduktion technischer Komplexität & Wartungsaufwand – 23 Content-Module reduziert

Modulares Layout-System für Marken- & Kampagnenseiten

Für unsere Marken-Stores war die Erstellung von Kampagnen- und Kollektionsseiten zeitintensiv und uneinheitlich. Unterschiedliche Komponentenlogiken, visuelle Inkonsistenzen und fehlender Systemgedanke führten zu langen Abstimmungen und hohem Dev-Aufwand. Ziel war es, ein flexibles, markenfähiges Layout-System zu entwickeln, das Gestaltungsspielraum mit Effizienz vereint.

Ausgangssituation

Unterschiedliche Komponenten je Marke in Funktion und Stil. Das erschwerte Planung, Design und Umsetzung deutlich und verlangsamte den gesamten Go-Live-Prozess.

Features

Affenzahn

Ergobag

satch

Hero

Headline

Subline

Text

Image

2nd Image

Video

CTA

Card

Headline

Subline

Text

Image

OPT.

AFZ

ERG

SAT

Hero

Headl.

Subl.

Text

Image

2nd Img.

Video

CTA

Card

Headl.

Subl.

Text

Image

Flexibel für
längere Texte

»Hero« braucht
eine Subline

Mehr Varianten
bei der Bildgröße

Modular, aber
mit Marken-CI

Videos im
»Hero«

»Hero» mit
kompakten
Varianten

Click-Tracking für
das gesamte
»Tile» Element

»Card« Element
wahlweise mit

Call-To-Action

Farben = Herkunft der Anforderung

Performance &
Analytics

Brand

Content

Flexibel für
längere Texte

»Hero« braucht
eine Subline

Mehr Varianten
bei der Bildgröße

Modular, aber
mit Marken-CI

Videos im
»Hero«

»Hero» mit
kompakten
Varianten

Click-Tracking für
das gesamte
»Tile» Element

»Card« Element
wahlweise mit

Call-To-Action

Farben = Herkunft der Anforderung

Performance &
Analytics

Brand

Content

Flexibel für
längere Texte

»Hero« braucht
eine Subline

Mehr Varianten
bei der Bildgröße

Modular, aber
mit Marken-CI

Videos im
»Hero«

»Hero» mit
kompakten
Varianten

Click-Tracking für
das gesamte
»Tile» Element

»Card« Element
wahlweise mit

Call-To-Action

Farben = Herkunft der Anforderung

Performance &
Analytics

Brand

Content

Requirements festlegen

In Gesprächen mit den Brands, Content- und Performance-Marketing wurden Anforderungen an die neuen Komponenten gesammelt. Diese wurden als Basis für die Entwicklung von fünf Content Modulen (»Hero«, »Card«, »Tile«, »Product«, »Text«) mit jeweils zwischen 3 und 8 Layout Varianten verwendet.

Legacy‑Module

23

23

-

-

Konzept & Struktur

Basierend auf wiederkehrenden Inhaltsmustern entstand ein modularer Layout-Baukasten – mit klarer Trennung von Struktur und Inhalt, ausgerichtet auf Reuse und Konsistenz.

Legacy‑Module

23

-

Konzept & Struktur

Basierend auf wiederkehrenden Inhaltsmustern entstand ein modularer Layout-Baukasten – mit klarer Trennung von Struktur und Inhalt, ausgerichtet auf Reuse und Konsistenz.

Time-to-market

Time-to-market

Time-to-market

60%

60%

60%

-

-

-

Schneller von der Idee zur Live-Seite.

Das modulare System verkürzt Abstimmungen, reduziert Produktionsaufwand und ermöglicht selbstständige Content-Erstellung.

Brand & Marketing

Frühe Vorschauen ermöglichen schnelle Iterationen und gezielte Content-Produktion – abgestimmt auf konkrete Module.

Design

Komponenten-basiertes Arbeiten ermöglicht schnelles Prototyping. Der Fokus verschiebt sich von Layout-Entwicklung hin zur Content-Ausarbeitung.

Content Management

Durch klar definierte Module wissen Teams genau, welche Formate und Textlängen möglich sind. Einfache Landingpages und Artikel können eigenständig umgesetzt werden.

Gestalterischer Mittelweg

Die Module sind funktional standardisiert, erlauben aber markenspezifische Typo-, Farb- und Layoutanpassungen – für maximale Wiederverwendbarkeit ohne Einheitslook.

Prozessintegration

Der Baukasten wurde als zentrales Element in unsere Seitenplanung integriert und dient als visuelles Vokabular in Briefings und Design-Abstimmungen.

Prozessintegration

Der Baukasten wurde als zentrales Element in unsere Seitenplanung integriert und dient als visuelles Vokabular in Briefings und Design-Abstimmungen.

Hey!

Let’s talk

Hey!

Let’s talk

Hey!

Let’s talk

Hey!

Let’s talk