Zirkulares Webdesign
Zirkulares Webdesign
Zirkulares Webdesign
Für den SMORT-Pitch 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 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
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><g d="M 0 14 L 14 0 M 0 0 L 14 14" fill="transparent" height="14px" id="FVHbSkSuL" transform="translate(5 6)" width="14px"><path d="M 0 14 L 14 0" fill="transparent" height="14px" id="Mo4m0O_wJ" stroke-dasharray="0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" width="14px"/><path d="M 0 0 L 14 14" fill="transparent" height="14px" id="QtQLCPFNY" stroke-dasharray="0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(0, 0, 0)" width="14px"/></g></svg>)
Der digitale Heilungskreislauf für SMORT: Für den Pitch um den Web-Relaunch des Traditionsunternehmens SMORT 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 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 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.
Farbgebung
Die Webseite ist voranging in Schwarz und Weiß gestaltet und wird von einem bunten Element unterstützt: Die Linie mit Farbverlauf. Der Verlauf symbolisiert den fließenden Übergang der Anwendungsgebiete und stellt die Flexibilität der Produkte dar.
Weiß #FFFFFE
Loftschwarz #2E2D2E
Patientengrün #A7DD22
Händlerpink #ED32A2
Medicalblau #24B0E9
Farbgebung
Die Webseite ist voranging in Schwarz und Weiß gestaltet und wird von einem bunten Element unterstützt: Die Linie mit Farbverlauf. Der Verlauf symbolisiert den fließenden Übergang der Anwendungsgebiete und stellt die Flexibilität der Produkte dar.
Weiß #FFFFFE
Loftschwarz #2E2D2E
Patientengrün #A7DD22
Händlerpink #ED32A2
Medicalblau #24B0E9
Farbgebung
Die Webseite ist voranging in Schwarz und Weiß gestaltet und wird von einem bunten Element unterstützt: Die Linie mit Farbverlauf. Der Verlauf symbolisiert den fließenden Übergang der Anwendungsgebiete und stellt die Flexibilität der Produkte dar.
Weiß #FFFFFE
Loftschwarz #2E2D2E
Patientengrün #A7DD22
Händlerpink #ED32A2
Medicalblau #24B0E9
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.
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.
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.
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.
Klares Design
Die farbige Linie führt den Nutzer durch ein klares Design, das die Produkte und die Leistungen von Smort in den Vordergrund stellt. Sie leitet zu weiterführenden Inhalten und markiert mit ihrer Farbe, für welche Interessensgruppen die Inhalte relevant sein könnten, ohne eine aufdringliche Kategoriesierung vorzunehmen.
Klares Design
Die farbige Linie führt den Nutzer durch ein klares Design, das die Produkte und die Leistungen von Smort in den Vordergrund stellt. Sie leitet zu weiterführenden Inhalten und markiert mit ihrer Farbe, für welche Interessensgruppen die Inhalte relevant sein könnten, ohne eine aufdringliche Kategoriesierung vorzunehmen.
Klares Design
Die farbige Linie führt den Nutzer durch ein klares Design, das die Produkte und die Leistungen von Smort in den Vordergrund stellt. Sie leitet zu weiterführenden Inhalten und markiert mit ihrer Farbe, für welche Interessensgruppen die Inhalte relevant sein könnten, ohne eine aufdringliche Kategoriesierung vorzunehmen.
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.
Produkt-Entwicklung Newsletter
Entwicklung eines neuen, "smarten" Format für den deutschen Lokaljournalismus für das Redaktionsnetzwerk Deutschland (Fortis).
