Website-Rebranding für World Health summit

Als Teil eines interdisziplinären Teams (UI/UX-Design, Frontend-Entwicklung) realisierte ich das Rebranding der Website einer internationalen Konferenz für globale Gesundheit. Die Plattform dient als zentrale Hub für Teilnehmerregistrierung, Programmkommunikation und Speaker-Informationen, mit Fokus auf WCAG 2.2-Konformität, modularer Skalierbarkeit und device-spezifischer UX-Optimierung.

Corporate-Design-Erweiterung & Accessibility-Strategie

Farbpaletten-Optimierung
Erweiterung des bestehenden CD um sekundäre Akzentfarben mit AAA-WCAG-Kontrastverhältnissen (gemessen via WebAIM).

Accessibility-UI-Design
Eigenentwicklung eines barrierefreien Icon-Sets (SVG-basiert, Screenreader-kompatible Semantik).
Konzeption eines dynamischen Accessibility-Popups mit Schriftgrößen-Slider, High-Contrast-Mode-Toggle und Fokus-Indikatoren für Tastaturnavigation.

UI-Komponenten-Design in Figma

Atomic-Design-Prinzip
Aufbau eines modularen Komponenten-Systems
mit Auto-Layout

Formulare
Design von Input-Feldern mit Validation States (Error, Success, Disabled) und Dropdown-Menüs mit klarem Feedback-Loop.

Interaktive Elemente
Button-Komponenten in Primary/Secondary/Tertiary-Varianten (States: Default, Hover, Active, Focus).
Chevron-Animationen für visuelle Hierarchie in Akkordeons.

Card-Systeme
Speaker-Cards mit adaptivem Bild/Text-Layout (Ratio 4:3/16:9).
Programm-Teaser mit Chip-Komponenten für Tagging (z.B. "Keynote", "Workshop").

Responsive Wireframing & Device-spezifische UX

Breakpoint-spezifische Layouts
Entwicklung von Desktop-, Tablet- und Mobile-Varianten für kritische User Flows (Registrierung, Programmübersicht).

Device-spezifische Konzeption
Mobile-optimierte Komponenten: Neuentwicklung von UI-Elementen für Touch-Interaktionen (z.B. größere Tap-Targets, gestapelte Formularfelder).

UX-Anpassungen
Vereinfachte Navigation mit Priority+-Pattern für Mobile (Reduktion auf Kernfunktionen).
Touch-freundliche Teaser mit vertikalem Scrolling statt horizontaler Desktop-Layouts.

Kontrastversionen
Separate High-Contrast-Mode-Designs mit reduzierter Farbtiefe und taktilen visuellen Hinweisen.
Design-Token-Dokumentation: Definition von CSS-äquivalenten Variablen (Farben, Spacing, Typografie) für nahtlose Entwicklerhandoffs.

Ergebnis

Das revisionierte Design-System stärkt die visuelle Identität und adressiert durch WCAG-2.2-konforme UI-Patterns eine breitere Zielgruppe. Die modulare Architektur reduziert Entwicklungszeit für zukünftige Iterationen signifikant und unterstützt die Mission des Unternehmens, eine inklusive, zugängliche Plattform für globale Gesundheitsthemen zu bieten. Die device-spezifischen UX-Optimierungen erhöhen die Usability auf mobilen Endgeräten durch gezielte Anpassungen jenseits reiner Responsive-Skalierung.

Skills & Tools