Modulare Landingpages bei Seibert
UX/UI Case Study:
Beschleunigte Bereitstellung und einheitliche Brand-Experience mittels modularer Design-Templates.
Beschleunigte Bereitstellung und einheitliche Brand-Experience mittels modularer Design-Templates.
Meine Rolle: UX/UI Design, Research, Konzeption & Interaktives Prototyping
Primary Users: Interne Marketing-, Event- und Produktteams, die für die Einführung von Kampagnen und Initiativen verantwortlich sind.
Die Herausforderung:
Mehrere Teams erstellten unabhängig voneinander Landingpages für Marketingkampagnen, Veranstaltungen und Produkteinführungen. Dies führte zu uneinheitlichen Benutzererfahrungen, Doppelarbeit und langsamen Entwicklungszyklen.
Ohne standardisierte Vorlagen oder klar definierte wiederverwendbare Komponenten erforderte jede neue Seite einen erheblichen Aufwand für die Abstimmung von Design und Entwicklung. Die Herausforderung bestand darin, ein skalierbares System zu schaffen, das Konsistenz gewährleistet und gleichzeitig die Bereitstellung beschleunigt.
Mehrere Teams erstellten unabhängig voneinander Landingpages für Marketingkampagnen, Veranstaltungen und Produkteinführungen. Dies führte zu uneinheitlichen Benutzererfahrungen, Doppelarbeit und langsamen Entwicklungszyklen.
Ohne standardisierte Vorlagen oder klar definierte wiederverwendbare Komponenten erforderte jede neue Seite einen erheblichen Aufwand für die Abstimmung von Design und Entwicklung. Die Herausforderung bestand darin, ein skalierbares System zu schaffen, das Konsistenz gewährleistet und gleichzeitig die Bereitstellung beschleunigt.
Der Prozess:
Ich habe das Projekt als Systemdesign statt als Einzelseitengestaltung definiert. Basierend auf Stakeholder-Interviews identifizierte ich wiederkehrende Layout-Muster, die ich in modulare Vorlagen auf Basis des bestehenden Astro UI Kits überführte.
Mittels Low-Fidelity-Wireframes validierte ich die Inhaltsstrukturen und schloss funktionale Lücken im UI Kit. Die finale Umsetzung erfolgte mithilfe von Vibe Coding direkt in Visual Studio Code, nachdem die Logik in Figma-Prototypen bestätigt wurde. Durch diesen Ansatz stellte ich die nahtlose Übereinstimmung von UX-Struktur, Designkonsistenz und technischer Machbarkeit sicher.
Ich habe das Projekt als Systemdesign statt als Einzelseitengestaltung definiert. Basierend auf Stakeholder-Interviews identifizierte ich wiederkehrende Layout-Muster, die ich in modulare Vorlagen auf Basis des bestehenden Astro UI Kits überführte.
Mittels Low-Fidelity-Wireframes validierte ich die Inhaltsstrukturen und schloss funktionale Lücken im UI Kit. Die finale Umsetzung erfolgte mithilfe von Vibe Coding direkt in Visual Studio Code, nachdem die Logik in Figma-Prototypen bestätigt wurde. Durch diesen Ansatz stellte ich die nahtlose Übereinstimmung von UX-Struktur, Designkonsistenz und technischer Machbarkeit sicher.
Die Lösung: Die Vorlagen wurden so gestaltet, dass sie ein Gleichgewicht zwischen Flexibilität und Struktur herstellen. Die Teams konnten die Inhalte an ihre Bedürfnisse anpassen, ohne die visuelle Konsistenz oder die UX-Standards zu beeinträchtigen. Durch die Übersetzung validierter UX-Muster in wiederverwendbare Bausteine reduzierte das System Unklarheiten und ermöglichte schnellere, kollaborativere Arbeitsabläufe.
Das Ergebnis & Impact:
Das modulare System reduziert die Zeit für die Erstellung von Landingpages, erhöhte die visuelle und strukturelle Konsistenz und minimierte die Iterationszyklen zwischen Design und Entwicklung.
Die Teams können Kampagnen und Initiativen somit effizienter starten und gleichzeitig die Übereinstimmung mit den Marken- und UX-Standards gewährleisten. Das Ergebnis ist eine skalierbare Grundlage, welche die Zusammenarbeit verbessert und Ad-hoc-Entscheidungen im Design reduziert.
