Zirkulares Webdesign
Zirkulares Webdesign
Zirkulares Webdesign
Für den SMORT-Pitch 2025 habe ich ein alternatives Leitsystem für die Website des Herstellers von Verbänden und Orthesen entworfen. Die Basislinie in drei Farben führt den Benutzer durch die Benutzeroberfläche. Sie stellt den Heilungszyklus dar, in dem SMORT-Produkte immer wieder erscheinen und die Heilung der Patienten unterstützen.
Für den SMORT-Pitch 2025 habe ich ein alternatives Leitsystem für die Website des Herstellers von Verbänden und Orthesen entworfen. Die Basislinie in drei Farben führt den Benutzer durch die Benutzeroberfläche. Sie stellt den Heilungszyklus dar, in dem SMORT-Produkte immer wieder erscheinen und die Heilung der Patienten unterstützen.
Projektbeschreibung
Der digitale Heilungskreislauf für SMORT:
Für den Pitch um den Web-Relaunch des Traditionsunternehmens SMORT (Name geändert) habe ich ein Konzept entwickelt, das die klassische Website-Struktur aufbricht. SMORT ist Hersteller von Orthesen und Verbänden – Produkte, die Menschen in verschiedenen Phasen der Genesung begleiten.
Die Kernidee des Entwurfs ist der „Heilungskreislauf“. Eine dreifarbige Verlaufslinie fungiert als visueller roter Faden durch die gesamte Benutzeroberfläche. Sie symbolisiert die Flexibilität der Produkte sowie den fließenden Übergang zwischen den Anwendungsgebieten.
Das visuelle Konzept setzt auf einen starken Kontrast: Ein seriöses Schwarz und Weiß bilden die solide Basis und spiegeln das Vertrauen in die Traditionsmarke wider. Der bunte Verlauf bricht diese Strenge auf, setzt frische Akzente und verknüpft die drei Hauptzielgruppen (Händler, Mediziner und Patienten) in einem intuitiven Erlebnis.
Herausforderungen
Komplexe Inhalte, drei Zielgruppen, ein Zugang:
Die zentrale Hürde bestand darin, die enorme Produktvielfalt und die tiefgehenden Informationen (z.B. Anlegevideos, Krankheitsbilder) übersichtlich darzustellen. Dabei mussten drei sehr unterschiedliche Personas angesprochen werden, wobei der Fokus primär auf den Fachhändlern lag, die ihren Kunden das passende Produkt empfehlen müssen.
Die Aufgabenstellung verlangte eine Balance zwischen Moderne und Tradition: Wie leitet man Nutzer schnell zum Ziel, reduziert die Klickrate und schafft gleichzeitig eine emotionale Markenbindung, ohne die Seriosität eines Medizinprodukteherstellers zu verlieren?
Lösungsansatz
Mein Ansatz bricht mit gängigen Mustern und nutzt eine duale Mechanik, um die Auffindbarkeit von Inhalten zu optimieren: Zirkuläre User-Führung & 2-Achsen-Navigation.
Horizontale Ebene (Entdeckung): Auf dem Homescreen scrollt bzw. klickt der User horizontal. Hier werden Persona-spezifische Inhalte, Shortcuts zu oft gesuchten Themen und dynamische Vorschläge ausgespielt, wenn möglich basierend auf früheren Besuchen.
Vertikale Ebene (Deep Dive): Sobald der User mehr wissen möchte, scrollt er vertikal. Hier öffnen sich Detailinformationen, Firmen-News und tiefergehende Produktbeschreibungen.
Visuelles Leitsystem: Die dreifarbige Linie codiert die Zielgruppen. Wo sich Interessen überschneiden, entsteht ein Farbverlauf. Ein interaktiver 3D-Produktfinder ermöglicht es Nutzern zudem, über ein Körpermodell mit klickbaren Markierungen (gelbe Highlights) direkt nach der betroffenen Region zu filtern.
Mobile Strategie: Da die Datenanalyse der Bestandsseite eine klare Dominanz der Desktop-Nutzung zeigte, lag der Fokus auf großen Screens. Dennoch ist das Konzept responsive – auf Mobile wird die horizontale Ebene in einen intuitiven Swipe-Slider übersetzt und die Informationsdichte vereinfacht, um die User Experience auch auf kleinen Geräten flüssig zu halten.
Meine Rolle im Projekt
In Zusammenarbeit mit dem Kreativteam von BrainersHub war ich für die Übersetzung der Strategie in ein digitales Produkt verantwortlich. Mein Verantwortungsbereich erstreckte sich von der strategischen Konzeption bis zur technischen Ausarbeitung. Ich entwickelte die zentrale Idee des „Gesundheitskreislaufs“ und definierte die entsprechende UX-Architektur, einschließlich der spezifischen Mechanik aus horizontalem und vertikalem Scrollen. Darauf aufbauend gestaltete ich das Visual Design, legte die Farbwelten fest und entwarf die Interface-Elemente sowie das 3D-Modell für die Produktsuche. Um diese zirkuläre User-Führung und die Design-Vision greifbar zu machen, überführte ich alle Komponenten final in einen klickbaren High-Fidelity-Prototypen in Figma.
Ergebnis: Erfolgreiche Präsentation eines disruptiven Design-Ansatzes, der die Diskussion über moderne Nutzerführung im Unternehmen angestoßen hat.
Projektbeschreibung
Der digitale Heilungskreislauf für SMORT:
Für den Pitch um den Web-Relaunch des Traditionsunternehmens SMORT (Name geändert) habe ich ein Konzept entwickelt, das die klassische Website-Struktur aufbricht. SMORT ist Hersteller von Orthesen und Verbänden – Produkte, die Menschen in verschiedenen Phasen der Genesung begleiten.
Die Kernidee des Entwurfs ist der „Heilungskreislauf“. Eine dreifarbige Verlaufslinie fungiert als visueller roter Faden durch die gesamte Benutzeroberfläche. Sie symbolisiert die Flexibilität der Produkte sowie den fließenden Übergang zwischen den Anwendungsgebieten.
Das visuelle Konzept setzt auf einen starken Kontrast: Ein seriöses Schwarz und Weiß bilden die solide Basis und spiegeln das Vertrauen in die Traditionsmarke wider. Der bunte Verlauf bricht diese Strenge auf, setzt frische Akzente und verknüpft die drei Hauptzielgruppen (Händler, Mediziner und Patienten) in einem intuitiven Erlebnis.
Herausforderungen
Komplexe Inhalte, drei Zielgruppen, ein Zugang:
Die zentrale Hürde bestand darin, die enorme Produktvielfalt und die tiefgehenden Informationen (z.B. Anlegevideos, Krankheitsbilder) übersichtlich darzustellen. Dabei mussten drei sehr unterschiedliche Personas angesprochen werden, wobei der Fokus primär auf den Fachhändlern lag, die ihren Kunden das passende Produkt empfehlen müssen.
Die Aufgabenstellung verlangte eine Balance zwischen Moderne und Tradition: Wie leitet man Nutzer schnell zum Ziel, reduziert die Klickrate und schafft gleichzeitig eine emotionale Markenbindung, ohne die Seriosität eines Medizinprodukteherstellers zu verlieren?
Lösungsansatz
Mein Ansatz bricht mit gängigen Mustern und nutzt eine duale Mechanik, um die Auffindbarkeit von Inhalten zu optimieren: Zirkuläre User-Führung & 2-Achsen-Navigation.
Horizontale Ebene (Entdeckung): Auf dem Homescreen scrollt bzw. klickt der User horizontal. Hier werden Persona-spezifische Inhalte, Shortcuts zu oft gesuchten Themen und dynamische Vorschläge ausgespielt, wenn möglich basierend auf früheren Besuchen.
Vertikale Ebene (Deep Dive): Sobald der User mehr wissen möchte, scrollt er vertikal. Hier öffnen sich Detailinformationen, Firmen-News und tiefergehende Produktbeschreibungen.
Visuelles Leitsystem: Die dreifarbige Linie codiert die Zielgruppen. Wo sich Interessen überschneiden, entsteht ein Farbverlauf. Ein interaktiver 3D-Produktfinder ermöglicht es Nutzern zudem, über ein Körpermodell mit klickbaren Markierungen (gelbe Highlights) direkt nach der betroffenen Region zu filtern.
Mobile Strategie: Da die Datenanalyse der Bestandsseite eine klare Dominanz der Desktop-Nutzung zeigte, lag der Fokus auf großen Screens. Dennoch ist das Konzept responsive – auf Mobile wird die horizontale Ebene in einen intuitiven Swipe-Slider übersetzt und die Informationsdichte vereinfacht, um die User Experience auch auf kleinen Geräten flüssig zu halten.
Meine Rolle
In Zusammenarbeit mit dem Kreativteam von BrainersHub war ich für die Übersetzung der Strategie in ein digitales Produkt verantwortlich. Mein Verantwortungsbereich erstreckte sich von der strategischen Konzeption bis zur technischen Ausarbeitung. Ich entwickelte die zentrale Idee des „Gesundheitskreislaufs“ und definierte die entsprechende UX-Architektur, einschließlich der spezifischen Mechanik aus horizontalem und vertikalem Scrollen. Darauf aufbauend gestaltete ich das Visual Design, legte die Farbwelten fest und entwarf die Interface-Elemente sowie das 3D-Modell für die Produktsuche. Um diese zirkuläre User-Führung und die Design-Vision greifbar zu machen, überführte ich alle Komponenten final in einen klickbaren High-Fidelity-Prototypen in Figma.
Ergebnis: Erfolgreiche Präsentation eines disruptiven Design-Ansatzes, der die Diskussion über moderne Nutzerführung im Unternehmen angestoßen hat.
Projektbeschreibung
Der digitale Heilungskreislauf für SMORT:
Für den Pitch um den Web-Relaunch des Traditionsunternehmens SMORT (Name geändert) habe ich ein Konzept entwickelt, das die klassische Website-Struktur aufbricht. SMORT ist Hersteller von Orthesen und Verbänden – Produkte, die Menschen in verschiedenen Phasen der Genesung begleiten.
Die Kernidee des Entwurfs ist der „Heilungskreislauf“. Eine dreifarbige Verlaufslinie fungiert als visueller roter Faden durch die gesamte Benutzeroberfläche. Sie symbolisiert die Flexibilität der Produkte sowie den fließenden Übergang zwischen den Anwendungsgebieten.
Das visuelle Konzept setzt auf einen starken Kontrast: Ein seriöses Schwarz und Weiß bilden die solide Basis und spiegeln das Vertrauen in die Traditionsmarke wider. Der bunte Verlauf bricht diese Strenge auf, setzt frische Akzente und verknüpft die drei Hauptzielgruppen (Händler, Mediziner und Patienten) in einem intuitiven Erlebnis.
Herausforderungen
Komplexe Inhalte, drei Zielgruppen, ein Zugang:
Die zentrale Hürde bestand darin, die enorme Produktvielfalt und die tiefgehenden Informationen (z.B. Anlegevideos, Krankheitsbilder) übersichtlich darzustellen. Dabei mussten drei sehr unterschiedliche Personas angesprochen werden, wobei der Fokus primär auf den Fachhändlern lag, die ihren Kunden das passende Produkt empfehlen müssen.
Die Aufgabenstellung verlangte eine Balance zwischen Moderne und Tradition: Wie leitet man Nutzer schnell zum Ziel, reduziert die Klickrate und schafft gleichzeitig eine emotionale Markenbindung, ohne die Seriosität eines Medizinprodukteherstellers zu verlieren?
Lösungsansatz
Mein Ansatz bricht mit gängigen Mustern und nutzt eine duale Mechanik, um die Auffindbarkeit von Inhalten zu optimieren: Zirkuläre User-Führung & 2-Achsen-Navigation.
Horizontale Ebene (Entdeckung): Auf dem Homescreen scrollt bzw. klickt der User horizontal. Hier werden Persona-spezifische Inhalte, Shortcuts zu oft gesuchten Themen und dynamische Vorschläge ausgespielt, wenn möglich basierend auf früheren Besuchen.
Vertikale Ebene (Deep Dive): Sobald der User mehr wissen möchte, scrollt er vertikal. Hier öffnen sich Detailinformationen, Firmen-News und tiefergehende Produktbeschreibungen.
Visuelles Leitsystem: Die dreifarbige Linie codiert die Zielgruppen. Wo sich Interessen überschneiden, entsteht ein Farbverlauf. Ein interaktiver 3D-Produktfinder ermöglicht es Nutzern zudem, über ein Körpermodell mit klickbaren Markierungen (gelbe Highlights) direkt nach der betroffenen Region zu filtern.
Mobile Strategie: Da die Datenanalyse der Bestandsseite eine klare Dominanz der Desktop-Nutzung zeigte, lag der Fokus auf großen Screens. Dennoch ist das Konzept responsive – auf Mobile wird die horizontale Ebene in einen intuitiven Swipe-Slider übersetzt und die Informationsdichte vereinfacht, um die User Experience auch auf kleinen Geräten flüssig zu halten.
Meine Rolle im Projekt
In Zusammenarbeit mit dem Kreativteam von BrainersHub war ich für die Übersetzung der Strategie in ein digitales Produkt verantwortlich. Mein Verantwortungsbereich erstreckte sich von der strategischen Konzeption bis zur technischen Ausarbeitung. Ich entwickelte die zentrale Idee des „Gesundheitskreislaufs“ und definierte die entsprechende UX-Architektur, einschließlich der spezifischen Mechanik aus horizontalem und vertikalem Scrollen. Darauf aufbauend gestaltete ich das Visual Design, legte die Farbwelten fest und entwarf die Interface-Elemente sowie das 3D-Modell für die Produktsuche. Um diese zirkuläre User-Führung und die Design-Vision greifbar zu machen, überführte ich alle Komponenten final in einen klickbaren High-Fidelity-Prototypen in Figma.
Ergebnis: Erfolgreiche Präsentation eines disruptiven Design-Ansatzes, der die Diskussion über moderne Nutzerführung im Unternehmen angestoßen hat.
Ziele und Herausforderung
Traditionsmarke erhalten
Der Kunde wollte die Marke modernisieren, doch die Werte des Traditionsunternehmens beibehalten.
Userflow vereinfachen
Auf der Webseite waren viele Informationen, von Pordukten über Anleitungen und Informationen zu Krankheitsbildern. Mit der Zeit wurde die Seite sehr unübersichtlich.
Ziele und Herausforderung
Traditionsmarke erhalten
Der Kunde wollte die Marke modernisieren, doch die Werte des Traditionsunternehmens beibehalten.
Userflow vereinfachen
Auf der Webseite waren viele Informationen, von Pordukten über Anleitungen und Informationen zu Krankheitsbildern. Mit der Zeit wurde die Seite sehr unübersichtlich.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zirkulare Userführung
Die kreisförmige Nutzerführung unerstreicht die Grundidee, dass sich SMORT Produkte in den Kreislauf der Genesung einreihen und an verschiedenen Stellen unterstützen.
Zirkulare Userführung
Die kreisförmige Nutzerführung unerstreicht die Grundidee, dass sich SMORT Produkte in den Kreislauf der Genesung einreihen und an verschiedenen Stellen unterstützen.
Zirkulare Userführung
Die kreisförmige Nutzerführung unerstreicht die Grundidee, dass sich SMORT Produkte in den Kreislauf der Genesung einreihen und an verschiedenen Stellen unterstützen.
Produktfinder
Mit dem Produktfinder, klickt man auf die Figuren und wählt das Produkt, was man sucht. So gelangt der Nutzer schnell an eine Produktauswahl, die ihn interessieren könnte.
Produktfinder
Mit dem Produktfinder, klickt man auf die Figuren und wählt das Produkt, was man sucht. So gelangt der Nutzer schnell an eine Produktauswahl, die ihn interessieren könnte.
Produktfinder
Mit dem Produktfinder, klickt man auf die Figuren und wählt das Produkt, was man sucht. So gelangt der Nutzer schnell an eine Produktauswahl, die ihn interessieren könnte.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Mobile Umsetzung
Das zirkulare Design lässt sich auch gut in der mobilen Anwendung umsetzen. Mit Gestensteuerung wird eine intuitive Nutzung gewährleistet.
Mobile Umsetzung
Das zirkulare Design lässt sich auch gut in der mobilen Anwendung umsetzen. Mit Gestensteuerung wird eine intuitive Nutzung gewährleistet.
Mobile Umsetzung
Das zirkulare Design lässt sich auch gut in der mobilen Anwendung umsetzen. Mit Gestensteuerung wird eine intuitive Nutzung gewährleistet.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Prototyp
Sieh dir hier den klickbaren Dummy an. Der zirkluare Flow zieht sich durch die gesamte Webseite.
Prototyp
Sieh dir hier den klickbaren Dummy an. Der zirkluare Flow zieht sich durch die gesamte Webseite.
Prototyp
Sieh dir hier den klickbaren Dummy an. Der zirkluare Flow zieht sich durch die gesamte Webseite.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Zielgruppenorientierter Aufbau
Nutzergruppen kommen über die Quicklinks in den Startseiten der Zielgruppen direkt zu den Inhalten, die für sie interessant sind. Was genau verlinkt wird, wurde zuvor nach einer eingehenden Useranalyse der bestehenden Webseite definiert. Der Fokus lag auf den Händlern und deren Zugang zum Fachhändlershop in jeder Instanz.
Produktentwicklung Newsletter
Entwicklung eines neuen, "smarten" Format für den deutschen Lokaljournalismus für das Redaktionsnetzwerk Deutschland (Fortis).
Social Media Konzeption
Entwicklung eines professionellen und kohärenten Social-Media-Templates für die tägliche Nutzung auf Instagram, Facebook und LinkedIn für das Helmholtz Institute Munich.