Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Psoriasis Portal

1. Arbeitstitel & Titelbild

Schichtweise – Geschichten unter der Haut

Titelbild_final.jpgTitelbild_final.jpg

2. Grundideen

Impulsvortrag – Digitale Helfer für ein einfacheres Leben mit chronischer Krankheit

Impulsvortrag_compressed (1).pdf PDF Impulsvortrag_compressed (1).pdf

Drei Ideen zu diesem Thema

1. Idee: Psoriasis (Ernährungs-App)

2. Idee: Bipolare Störung (Webstory)

3. Idee: Erste Hilfe bei chronisch Erkrankten (multimedial)

Am Ende entschied ich mich für die erste Idee, erweiterte den Fokus jedoch von Ernährung auf Psoriasis als Ganzes.

Nicis UX-Brainstorming - Kopie von Thema & 3 Ideen_1.jpgNicis UX-Brainstorming - Kopie von Thema & 3 Ideen_1.jpg
Nicis UX-Brainstorming - Kopie von Thema & 3 Ideen_2.jpgNicis UX-Brainstorming - Kopie von Thema & 3 Ideen_2.jpg

3. Kurzbeschreibung Projekt

Das Psoriasis Portal bietet fundierte Informationen rund um die chronische Hautkrankheit Psoriasis. Nutzerinnen und Nutzer können sich über Ursachen, Symptome und Behandlungsmöglichkeiten informieren. Erfahrungsberichte sowie visuell aufbereitete Inhalte erleichtern das Verständnis und schaffen Nähe. Eine Bildergalerie zeigt Psoriasis in unverfälschter Form, um einen realistischen Eindruck der Erkrankung zu vermitteln. Das Portal legt Wert auf emotionale Ansprache, klare Navigation und authentische Inhalte. Zusätzlich fördern Community-Elemente wie persönliche Beiträge das Gefühl von Zugehörigkeit. Ziel ist es, Betroffene zu unterstützen, aufzuklären und das Stigma rund um Psoriasis abzubauen.

4. Zielformulierung WHY HOW WHAT

KD6 Nicis UX-Brainstorming - Why How What final.jpgKD6 Nicis UX-Brainstorming - Why How What final.jpg

5. Wettbewerbsanalyse & Eingrenzung der Zielgruppe

KD6 Nicis UX-Brainstorming - Zielgruppenanalyse final (2).jpgKD6 Nicis UX-Brainstorming - Zielgruppenanalyse final (2).jpg

6. Recherche, Inhalte, Daten & Quellen

Storytelling oder Webportal?

Storytelling-Ansatz:

Ein Storytelling-Ansatz könnte einen emotionalen Zugang zum Thema Psoriasis schaffen. Durch eine klare Struktur aus Intro, Kapiteln und einem abschließenden Fazit ließen sich Wissen und persönliche Erfahrungen miteinander verknüpfen. Einzelne Kapitel könnten erklären, was Psoriasis ist, wie sich die Krankheit im Alltag zeigt oder welche psychischen Belastungen sie mit sich bringt. Interviews oder Einblicke in betroffene Lebenswelten könnten zusätzlich Nähe und Verständnis erzeugen.

Webportal-Ansatz:

Ein Webportal hingegen könnte Informationen strukturiert aufbereiten und unterschiedliche Bedürfnisse abdecken. Medizinische Inhalte, alltagstaugliche Tipps, Rezepte oder Hilfsangebote wären direkt auffindbar. Visuelle Inhalte wie Bilder oder Illustrationen würden komplexe Themen leichter verständlich machen.

Ich habe mich für das Webportal entschieden, um fundierte Informationen, Unterstützung und Austausch auf einen Blick zugänglich zu machen.

KD6 Nicis UX-Brainstorming - Webstory _ Portal1.jpgKD6 Nicis UX-Brainstorming - Webstory _ Portal1.jpg
KD6 Nicis UX-Brainstorming - Webstory _ Portal2.jpgKD6 Nicis UX-Brainstorming - Webstory _ Portal2.jpg

Finale Inhalte

Informationen über Psoriasis (Buchquelle)

KD6 Nicis UX-Brainstorming - Buchquelle.jpgKD6 Nicis UX-Brainstorming - Buchquelle.jpg

Informationen über Psoriasis (Internetquellen)

KD6 Nicis UX-Brainstorming - Psoriasis Deep-Search Brainstorm1.jpgKD6 Nicis UX-Brainstorming - Psoriasis Deep-Search Brainstorm1.jpg
KD6 Nicis UX-Brainstorming - Psoriasis Deep-Search Brainstorm2.jpgKD6 Nicis UX-Brainstorming - Psoriasis Deep-Search Brainstorm2.jpg

Erfahrungsbericht

KD6 Nicis UX-Brainstorming - Artikel (1).jpgKD6 Nicis UX-Brainstorming - Artikel (1).jpg

Quellen

Die Projektinhalte basieren auf Fachliteratur aus der Allgemeinmedizin: „Kursbuch Gesundheit“ von Verena Corazza et al. aus dem Jahr 2006.
Ergänzend nutzte ich wissenschaftliche Studien sowie gezielte Internetrecherchen.

Folgende Quellen wurden näher betrachtet:

– www.hirslanden.ch

– www.zdfheute.de (Biologika)

– www.zdfheute.de (Ernährung)

– www.barmer.de

– www.sciencedirect.com (Artikel 1)

– www.sciencedirect.com (Artikel 2)

– edoc.rki.de

Der Erfahrungsbericht basiert auf meinen persönlichen Erlebnissen. Beim Schreibstil orientierte ich mich an folgenden Erfahrungsbeiträgen:

– www.thesun.ie

– www.papaa.org

– www.newsweek.com

– www.womenshealthmag.com

– www.dailymail.co.uk

– www.gloucestershirelive.co.uk

– www.independent.co.uk

7. Personas

Persona 1: Yasmin Derici

KD6 Nicis UX-Brainstorming - Persona Board 2 (korrigiert und getestet) (1).jpgKD6 Nicis UX-Brainstorming - Persona Board 2 (korrigiert und getestet) (1).jpg
Screenshot 2025-04-19 210931.pngScreenshot 2025-04-19 210931.png

Persona 2: Nina Wolf

KD6 Nicis UX-Brainstorming - Persona Board 1 (korrigiert & getestet) (2).jpgKD6 Nicis UX-Brainstorming - Persona Board 1 (korrigiert & getestet) (2).jpg
Screenshot 2025-04-19 210813.pngScreenshot 2025-04-19 210813.png

8. User-Epics, User-Stories & User-Journey

KD6 Nicis UX-Brainstorming - Epics.jpgKD6 Nicis UX-Brainstorming - Epics.jpg
KD6 Nicis UX-Brainstorming - UserStories (2).jpgKD6 Nicis UX-Brainstorming - UserStories (2).jpg
KD6 Nicis UX-Brainstorming - User-Journey (2).jpgKD6 Nicis UX-Brainstorming - User-Journey (2).jpg

9. Funktionsbeschreibung

KD6 Nicis UX-Brainstorming - Funktionsbeschreibung (1).jpgKD6 Nicis UX-Brainstorming - Funktionsbeschreibung (1).jpg

10. Funktionsbewertung

KD6 Nicis UX-Brainstorming - Funktionsbewertung.jpgKD6 Nicis UX-Brainstorming - Funktionsbewertung.jpg

11. Wireframes

Screenshot 2025-07-18 193900.pngScreenshot 2025-07-18 193900.png

Ich nutzte das Website Wireframes UI Kit von der BRIX Agency.

Startseite

Frame 1a.pngFrame 1a.png
Frame 1b.pngFrame 1b.png
Frame 1c.pngFrame 1c.png
Frame 1d.pngFrame 1d.png
Screenshot 2025-05-07 143007.pngScreenshot 2025-05-07 143007.png

Erfahrungsberichte

Screenshot 2025-05-14 164139.pngScreenshot 2025-05-14 164139.png
Wireframesa.pngWireframesa.png
Wireframesd.pngWireframesd.png
Wireframesc.pngWireframesc.png
Wireframesb.pngWireframesb.png

12. Moodboards

1. Moodboard: pinke Akzentfarbe, grainy Strukturen
(Struktur und Farbigkeit der Psoriasis aufgreifen)

2. Moodboard: Collage & Überlagerung  (Flecken auf der Haut & und das Immunsystem aufzeigen)

3. Moodboard: Fotografie mit illustrativen Overlays (zur Akzentuierung betroffener Hautstellen)

KD6 Nicis UX-Brainstorming - Moodboard1_ Grainy Structure (Fotos_Illus).jpgKD6 Nicis UX-Brainstorming - Moodboard1_ Grainy Structure (Fotos_Illus).jpg
KD6 Nicis UX-Brainstorming - Moodboard 2_ Overlay&Flächen.jpgKD6 Nicis UX-Brainstorming - Moodboard 2_ Overlay&Flächen.jpg
KD6 Nicis UX-Brainstorming - Moodboard 3_ Illus auf Fotos.jpgKD6 Nicis UX-Brainstorming - Moodboard 3_ Illus auf Fotos.jpg

13. Designvarianten

Screenshot 2025-05-21 171654.pngScreenshot 2025-05-21 171654.png
Frame 10.pngFrame 10.png
Frame 11.pngFrame 11.png
Frame 12.pngFrame 12.png

Ausarbeitung der 1. Variante

1. Runde – Einbringung neuer Ebenen

Screenshot 2025-05-28 144500.pngScreenshot 2025-05-28 144500.png
Pinker Designansatz1.pngPinker Designansatz1.png
Pinker Designansatz2.pngPinker Designansatz2.png
Pinker Designansatz3.pngPinker Designansatz3.png
Pinker Designansatz4.pngPinker Designansatz4.png
Pinker Designansatz5.pngPinker Designansatz5.png

2. Runde – neue Gestaltungselemente & interaktive Elemente

Screenshot 2025-06-10 203546.pngScreenshot 2025-06-10 203546.png
Schichtweise1.pngSchichtweise1.png
Schichtweise2.pngSchichtweise2.png
Schichtweise3.pngSchichtweise3.png
Schichtweise4.pngSchichtweise4.png
Schichtweise5.pngSchichtweise5.png
Schichtweise6.pngSchichtweise6.png

Screenshot 2025-06-10 204750.pngScreenshot 2025-06-10 204750.png
Screenshot 2025-06-10 204444.pngScreenshot 2025-06-10 204444.png

3. Runde – Varianten von Gestaltungselementen

Screenshot 2025-06-05 105145.pngScreenshot 2025-06-05 105145.png
Screenshot 2025-06-04 183404.pngScreenshot 2025-06-04 183404.png
Screenshot 2025-06-04 183430.pngScreenshot 2025-06-04 183430.png
Screenshot 2025-06-05 105241.pngScreenshot 2025-06-05 105241.png

4. Runde  – Ausarbeitung der schwarzen Drahtmodell-Variante

Screenshot 2025-06-24 101833.pngScreenshot 2025-06-24 101833.png
Screenshot 2025-06-24 101643.pngScreenshot 2025-06-24 101643.png
Screenshot 2025-06-24 101656.pngScreenshot 2025-06-24 101656.png
Screenshot 2025-06-24 101708.pngScreenshot 2025-06-24 101708.png
Screenshot 2025-06-24 101809.pngScreenshot 2025-06-24 101809.png
Screenshot 2025-06-24 101726.pngScreenshot 2025-06-24 101726.png
Screenshot 2025-06-24 101750.pngScreenshot 2025-06-24 101750.png

5. Runde – Feinschliff

Schichtweise herausgebrochen1.pngSchichtweise herausgebrochen1.png
Schichtweise herausgebrochen2.pngSchichtweise herausgebrochen2.png
Schichtweise herausgebrochen4.pngSchichtweise herausgebrochen4.png
Schichtweise herausgebrochen5.pngSchichtweise herausgebrochen5.png
Schichtweise herausgebrochen3.pngSchichtweise herausgebrochen3.png
Schichtweise herausgebrochen6.pngSchichtweise herausgebrochen6.png
Schichtweise herausgebrochen7.pngSchichtweise herausgebrochen7.png

6. Runde – Bildbearbeitungsvarianten & Auflösung des Wireframe-Rasters

Screenshot 2025-07-02 000921.pngScreenshot 2025-07-02 000921.png
Screenshot 2025-07-02 000956.pngScreenshot 2025-07-02 000956.png
Screenshot 2025-07-02 001027.pngScreenshot 2025-07-02 001027.png
Screenshot 2025-07-02 001100.pngScreenshot 2025-07-02 001100.png
Screenshot 2025-07-02 001116.pngScreenshot 2025-07-02 001116.png
Screenshot 2025-07-02 000956.pngScreenshot 2025-07-02 000956.png
Screenshot 2025-07-02 001027.pngScreenshot 2025-07-02 001027.png
Screenshot 2025-07-02 001144.pngScreenshot 2025-07-02 001144.png

Logovarianten

Logovarianten.pngLogovarianten.png

14. Finales Design

Startseite

Start.pngStart.png
Schichtweise herausgebrochen animiert 1.pngSchichtweise herausgebrochen animiert 1.png
Schichtweise herausgebrochen animiert 2.pngSchichtweise herausgebrochen animiert 2.png
Schichtweise herausgebrochen animiert 3.pngSchichtweise herausgebrochen animiert 3.png
Schichtweise herausgebrochen animiert 4.pngSchichtweise herausgebrochen animiert 4.png
Schichtweise herausgebrochen animiert 5.pngSchichtweise herausgebrochen animiert 5.png

Erfahrungsberichte (ungefiltert)

Start 1.pngStart 1.png
Erfahrungsberichte 1.pngErfahrungsberichte 1.png
Erfahrungsberichte 2.pngErfahrungsberichte 2.png
Erfahrungsberichte 3.pngErfahrungsberichte 3.png

Erfahrungsberichte (gefiltert)

Start 1.pngStart 1.png
Erfahrungsberichte 1.pngErfahrungsberichte 1.png
Erfahrungsberichte 1.pngErfahrungsberichte 1.png
Erfahrungsberichte 2.pngErfahrungsberichte 2.png

Blogartikel von N.

Start.pngStart.png
Artikel N. 1.pngArtikel N. 1.png
Artikel N. 2.pngArtikel N. 2.png
Artikel N 3.pngArtikel N 3.png

Galerie

Start Bildergalerie.pngStart Bildergalerie.png
Bildergalerie-min.pngBildergalerie-min.png

15. Prototyping & Link

Screenshot 2025-07-18 215756.pngScreenshot 2025-07-18 215756.png
Screenshot 2025-07-18 215515.pngScreenshot 2025-07-18 215515.png

16. Styleguide

Styleguide.jpgStyleguide.jpg

17. Screencast

18. Endpräsentation

Psoriasis Portal - Endpräsi UX.pdf PDF Psoriasis Portal - Endpräsi UX.pdf

19. Präsentationsvideo

20. Ausstellungssituation & Plakat

Plakat 1.pngPlakat 1.png
Plakat 2.pngPlakat 2.png
IMG_3525.JPGIMG_3525.JPG

Ein Projekt von

Fachgruppe

Sonstiges

Art des Projekts

Keine Angabe

Zugehöriger Workspace

UX- und Storytelling (KD6)

Entstehungszeitraum

Sommersemester 2025