Einstieg - Erstes Treffen in Köthen

Das Projekt sollte am 23. April in Köthen starten, wo ein erstes Zusammenkommen geplant war, das dazu diente, sich kennenzulernen und das Projekt zu erläutern.

Zudem ergab sich hier für uns die wichtige Möglichkeit, sich über den Bewerbungsprozess des Landesstudienkollegs Köthen direkt bei den Angestellten zu informieren.

Dies half uns, einen ersten Überblick über die komplexe Beschaffenheit des Prozesses zu gewinnen und erste Vorstellungen für mögliche Lösungsansätze zu generieren.

Miro wurde den Studierenden des FB2 vorgestellt, was über das Projekt hinweg unsere kooperative Sammelplattform darstellte, sowie der Double Diamond, an dem wir unseren Prozess strukturiert haben.

Interviews

Noch in der zweiten Sitzung definierten wir aus den bisher gewonnenen Erkenntnissen einen Interviewleitfaden mit Fragen, deren Antworten uns weiterhelfen könnten.

Wir bekamen jeweils einen LSK-Kollegiatin zugeteilt und sollten diese*n daraufhin interviewen.

Personas

Dies fiel leider spärlich aus, da es ein kommunikatives Missverständnis gab. Trotzdem schafften es einige Teams basierend auf den Ergebnissen eine customer Journey, sowie eine Persona zu entwickeln.

Einige mussten daher ohne Grundlage des Interviews die Persona entwickeln. Bei uns war dies auch der Fall. 

Wir behandelten die Eltern eines Bewerberin, und entwickelten zwei Personas für 2 verschiedene Elternteile. 

Weiterhin wurden aus den Daten der Interviews Customer Journeys erstellt.

Vorerst könnte man die Eltern für unsere Anwendung eher als unwichtig ansehen, jedoch sind die Eltern fast immer am Bewerbungsprozess beteiligt.

Oft bieten die Eltern die finanzielle Rücklage sowie emotionale Unterstützung und sind Mit-Entscheidungsträger*innen bei der Wahl des Standorts. Sie unterstützen bei der Beglaubigung der Dokumente und anderen Abgaben.

Daher sollte ein möglicher Digital Twin der Hochschule Anhalt schnell und einfach Informationen wiedergeben können, um den Bewerber*innen Rechtfertigungen zu bieten. Aber auch die Eltern sollten sich leicht innerhalb der Anwendung informieren können.

Website Walkthrough

Um ein Bild davon zu bekommen, wie die Websites aussehen, auf die Bewerber*innen aktuell angewiesen sind, führten wir eine Analyse in Form von Walkthroughs durch. Wir versetzten uns in die Lage von Bewerber*innen und versuchten, uns durch die hochschuleigene sowie andere Webseiten der Landesstudienkollegs zu navigieren.

Die Ergebnisse resultierten in weiteren Painpoints, zeigten uns jedoch auch, dass unsere Hochschule nicht schlecht dasteht, wenn es um die Übersichtlichkeit der Informationen geht.

Sitemaps

Mit Hilfe einer Sitemap dröselten wir die Informationsarchitektur unserer potenziellen Bewerbungsplattform auf.

Wir entschieden uns für eine Flat-Sitemap, da diese sich für kleinere Anwendungen eignet. Wir definierten in diesem Zuge den Content-Typ, der für die Bewerber*innen wichtig ist, und markierten Teile, die besonders essenziell für unsere definierten Personas sind.

Zudem definierten wir ein Secondary und ein Main Navigation Tool, wobei diese eine Art Menüleiste und einen Chatbot enthalten sollten.

Storyboard

Erste Wireframes

Erste Low-Fidelity-Wireframes halfen dabei, zu testen, was im Smartphone-Format möglich ist und wie man Elemente gut proportioniert anordnet.

Jedoch waren die Ideen, die wir darstellten, noch nicht kreativ und experimentell genug. Im Grunde orientierten wir uns größtenteils an der bestehenden Webseite der Hochschule.

Vorerst wollten wir die Screens einfach, intuitiv, informativ und ansprechend gestalteten und unsere zwei Navigations Tools unterbringen.

An diesem Punkt definierten wir gemeinsam mit dem gesamten Kurs konkrete „How might we“ Fragen für jede Expertengruppe, die jeweils eine spezifische Persona bzw. Persona-Gruppe behandelt.

Für uns definierten wir die Frage, wie eine übersichtliche Menüstruktur bequem und intuitiv in einem Conversational Interface dargestellt werden kann.

Ziel ist es, dass Bewerber*innen an Informationen gelangen, um gegenüber ihren Eltern Rechtfertigungen bieten zu können, im Studium besser zurechtkommen, Frust vermeiden um insgesamt den Bewerbungsprozess erfolgreich absolvieren.

Arbeit in Figma

Damit war auch der Grundstein für unsere weitere Arbeit in Figma gesetzt. Nun kannten wir die genauen Anforderungen an unseren Prototypen und konnten mit dem gestalten anfangen.

An dieser Stelle ein Dankeschön an @Martin Wiesner, der den Advanced-Figma-Kurs abgehalten hat und uns essenzielle Techniken in Figma beigebracht hat.

Mit diesen Fähigkeiten gingen wir ans Programm und erstellten mehrere Ableitungen eines HSA-Interfaces für UniNow, quasi „UniNow X.0“.

Inspiration

Es galt für uns nun, gut gelungene Beispiele für Interfaces zu finden, in denen die Prinzipien bereits angewandt werden, die wir auch bei uns umsetzen wollten.

Wir analysierten sie und versuchten zu verstehen, was ein verständliches Conversational Interface ausmacht, und wie man dieses schlank und aufgeräumt darstellen kann.

Dafür betrachteten wir Chat GPT (Bild 1). Ein gutes Beispiel für ein informatives, KI-chatbasiertes Interface.
GPT verfügt auf seiner Startseite über vier Boxen, die erste Anstöße geben, welche Fragen man potenziell stellen könnte. Diese Idee stellte auch eine Möglichkeit dar, Bewerber*innen zu helfen, sich in unserem digitalen Zwilling zu orientieren.

Als zweite Inspiration diente uns die Apple Home App (Bild 2). Ein intuitives Kachelsystem, mit dem man durch das Anklicken von Boxen interagieren kann.
Daraus entnahmen wir, wie man viele Informationen übersichtlich auf einem Screen organisieren kann.

Zuletzt sahen wir uns die „Dynamic Island“ an (Bild 3). Die Dynamic Island ist ein zentraler Attraktionspunkt. Sie bildet ein subtiles Navigationsmittel, das sich je nach Anwendung verändert. Dies wollten wir in ähnlicher Weise in unsere Idee einflechten, um von den leitenden Eigenschaften, zu profitieren.

Generell inspierierte uns die UI/UX-Gestaltung von Apple, über die man viel auf der Apple-eigenen Webseite „Apple Human Interface Guidelines“ herausfinden kann.

https://developer.apple.com/design/human-interface-guidelines

Erste Generation Wireframes in Figma

Unsere ersten digitalen Wireframes in Figma erstellten wir unabhängig voneinander, um verschiedene erste Ideen zu generieren. Farblich hielten wir uns an die Farbgebung der Hochschul-Website.

Untergebracht waren die beiden Hauptnavigationsmittel. In der Mitte des Frames befanden sich vier Auswahlkacheln mit Kategorien, die sich je nach Studien-/Bewerbungsfortschritt verändern und somit Unterstützung bieten. Zudem gibt es eine Leiste, die auf einen Chat hinweist, sowie ein kleines Icon links daneben, das einen „Dokumentenscanner“ enthält.

Diese erste Ableitung diente uns vor allem dazu zu entdecken, wie und wo wir unsere Navigationskanäle visuell ansprechend unterbringen können.

Zweite Generation Wireframes in Figma

Im Zuge der zweiten Generation entschieden wir uns für eine der beiden Gestaltungsgrundlagen der ersten Generation. Dabei entstand auch eine weitere „Branding-Variante“ für das Landesstudienkolleg. Sie zeichnet sich durch ein fiktives Logo und ihre grüne Farbe aus, wobei vor allem der Inhalt auf LSK-Bewerber*innen abgestimmt ist.

Auch prägte sich hier in beiden Varianten die „Insel“ weiter aus, indem wir verschiedene Varianten für bestimmte Standpunkte im Studium beziehungsweise Bewerbungsprozess erstellten.

Jedoch fehlte in manchen Ansätzen noch die Logik im Sinne eines verständlichen Umgangs.

Dritte Generation Wireframes in Figma