Studierende lernten, die User Experience durch einen ganzheitlichen Designprozess zu gestalten, beginnend mit der Problemdefinition bis hin zum App-Prototypen.
Projektthema
Im Mittelpunkt stand die Gestaltung optimaler Nutzererlebnisse unter Verwendung von UX-Designmethoden. Der Prozess umfasste User Research, Konzeptentwicklung, Entwürfe und das Prototyping, speziell ausgerichtet auf die Entwicklung einer App für Smartphones. Die Projekte waren jeweils zugeschnitten auf spezifische Anwendungsbereiche wie Gesundheit, Organisation oder Produktivität.
Inhalt des Faches
Die Teilnehmenden des Kurses erwarben methodische und analytische Fähigkeiten, um UX-Designkonzepte effektiv umzusetzen. Sie lernten, Nutzerforschungsmethoden wie User Journeys, Experten- und Konsumentenbefragungen oder Stakeholdermaps anzuwenden, um Anforderungen zu analysieren und unterschiedliche Nutzergruppen zu definieren. Durch die Anwendung von Designmethoden wurde ein iterativer Gestaltungsprozess durchlaufen, in dem Prototypen verschiedener Ausarbeitungsgrade erstellt und hinsichtlich ihrer Benutzbarkeit und Usability getestet wurden. Als Ergebnis setzten die Studierenden eine App für Smartphones oder Tablet prototypisch um, mit dem Ziel, ein tiefes Verständnis für die Bedeutung der Nutzererfahrung in der Gestaltung von Anwendungen zu vermitteln und sie zu befähigen, intuitive und ansprechende Benutzeroberflächen zu gestalten.
Das Thema ist nach wie vor in unserer Gesellschaft stark stigmatisiert. Offen darüber gesprochen wird selten. Das verursacht Scham und Unsicherheiten bei Betroffenen, was wiederum dazu führt, dass sie sich oft nicht trauen Rat zu suchen und sich mit ihren Problemen einsam fühlen.
Das Projekt »CHEXX« wirkt dem kollektiven Schweigen über das als unangenehm geltende Thema mit Aufklärung und Transparenz entgegen. Es senkt Hemmschwellen, sich regelmäßig testen zu lassen und ermutigt sexuell aktive Menschen, sich untereinander darüber auszutauschen. Des Weiteren werden Informationen zu verschiedenen Krankheitsbildern zugänglich gemacht und die Suche nach lokalen Testzentren erleichtert. Ziele sind: Aufklärung, das Übernehmen von Verantwortung im sexualgesundheitlichen Kontext zu erleichtern und so einen transparenten, sicheren Umgang miteinander zu schaffen.
App-Struktur
Nachdem wir erste Ideen gesammelt hatten, planten wir die Struktur und Navigation der App genauer. Wir notierten alle Funktionen auf Karten und sortierten sie. Daraus entstanden drei Hauptbereiche: Im Bereich Checken können Nutzer ihren Status teilen oder alternativ einen QR-Code scannen. In Ergebnisse sieht man Testergebnisse und Informationen darüber, worauf man im Laufe der Zeit getestet wurde. Der Bereich Teststelle zeigt Standorte von Partnern, bei denen man Tests machen kann, und ermöglicht es, direkt in der App einen Termin zu buchen.
Zusätzlich planten wir Einstellungen und Benachrichtigungen. Die Struktur wurde im Laufe der Entwicklung immer wieder angepasst, damit die App übersichtlich und benutzerfreundlich bleibt.
Farbe und Schrift
Wir haben ein Moodboard mit Fotos von Menschen in sozialen Situationen erstellt, zum Beispiel auf Partys oder in Gruppen. Dabei fiel auf, dass oft Rot- und Lilatöne vorkamen. Deshalb entschieden wir uns für Magenta-Farben. Sie vermitteln Wärme und Energie. Als Kontrast wählten wir einen dunklen Hintergrund, damit alles gut lesbar ist und das Design ruhig wirkt.
Beim Logo „Chexx“ nutzten wir zwei Schriften: „Che“ in Silom und „xx“ in Syne Mono. Diese Kombination sah am ausgewogensten aus. Für alle Texte in der App verwenden wir die Schrift SF Pro, die auch Apple nutzt. So passt unsere App gut zum iOS-Design und wirkt einheitlich.
App-Icon
Den Namen der App fanden wir schnell: Aus dem Wort „Check“ entstand in Kombination mit „XX“ der Name „Chexx“, der sowohl Prävention als auch Sexualität verbindet.
Für das App-Icon entschieden wir uns, nur den Buchstaben „X“ zu nutzen. In Kombination mit unserem Magenta-Farbverlauf und einem leicht transparenten Weißton entstand ein klar erkennbares, harmonisches Icon, das zur Gesamtgestaltung der App passt.
Video
Für das Video haben wir neue Wege ausprobiert und verschiedene KI-Tools genutzt. Die einzelnen Video-Frames erstellten wir mit Google Labs Flow und als Figuren unsere Personas Max Liam und Jean-Ellè. Das Voice-over entstand mit ElevenLabs.
Visuelle Elemente wie App-Icons, Erinnerungen oder Overlays wurden in After Effects animiert. Zum Schluss haben wir alles in Premiere Pro zusammengesetzt, geschnitten und Ton sowie Bild abgestimmt.
Wir wünschen viel Spaß beim Video! Danach könnt ihr unseren Prozess im folgenden Bilderkarussell noch einmal im Detail anschauen.
Dieses Video wurde mithilfe KI-basierten Tools erstellt.