App-Design für BIRD
In einem Studienprojekt haben wir in einem Team von drei Personen ein Interaktionskonzept für die BIRD-App (Bildungsraum Digital) des Bundesministeriums für Bildung und Forschung (BMBF) erstellt. Ziel der App ist es, bestehende Bildungsangebote und Plattformen zu vernetzen und für die Zielgruppen zugänglich zu machen.
Weitere Infos: https://www.daad.de/de/der-daad/querschnittsdimensionen-themen/digitalisierung/bird/
Der Fokus des Prototyps lag auf der Suche nach einem passenden Studienprogramm und einer Hochschule. Basierend auf der gegebenen Persona (Max) und einer User Story Map entwickelten wir die Funktion „University Tinder“. Ziel war es, das perfekte Match zwischen Universität und Studiengang für den Nutzer zu finden.
Zusätzlich bietet die App einen Studienberatungs-Service mit Terminbuchung und Online-Beratung.
Wir entwickelten ein Interaktionskonzept, ein Design und erstellten einen Prototypen mit Figma. Hier geht’s direkt zum Prototyp
TOOLS: Miro, Balsamiq, Notion, Adobe Illustrator, Figma
Prozess
Interaction Concept
Auf Basis der Persona erarbeiteten wir ein Interaktionskonzept. Dabei wurden die Anforderungen an die App systematisch erfasst und in konkrete Funktionen übersetzt, z. B. die Suche nach Studienangeboten.
Vorgehensweise / Entwurfsphase
Erste Sketches und Low-Fidelity-Designs dienten zur Ideenfindung.
Identifizierung von Schlüsselszenen: zentrale Nutzungsmomente wie die Studienwahl oder Terminbuchung.
Auswahl geeigneter Interaktionsmuster (z. B. Swipe-Gesten für die Studienauswahl → „University Tinder“).
Visualisierung der Interaktionsabläufe mit einfachen Skizzen.
Entwurf eines grundlegenden Layouts der Benutzeroberfläche.
Wireframes
Die Wireframes definieren Interaktionsabläufe und Muster. Wir haben sie auf Papier skizziert und verschiedene Optionen ausprobiert. Schließlich präsentierten wir die ersten Wireframes auf einem Whiteboard. Wir haben sie in Schritte wie Zugang, Suche, Durchstöbern usw. gegliedert.
Die Persona Max, ein Schulabsolvent, sucht über die App nach einem Studiengang im technischen Bereich. Max kann Universitäten und Studiengänge filtern, mit Tags und Schiebereglern. Vorausgefüllte Daten befüllen die Filter automatisch.
Dann erhält er das gefilterte Ergebnis. Er wischt „Universitätskarten“ nach oben, um sie zu speichern, oder nach unten, um sie zu verwerfen. Ein Match entsteht, wenn eine Universität und ein Studiengang mit seinem Profil und den Filtern übereinstimmen. Nach einem Match zeigt die App die Gründe, warum es ein Treffer war. Die App bietet außerdem eine Studienberatungen per Video-Call oder Chat. Max kann auch Notizen machen.
STYLEGUIDE
Auf Basis des zuvor erstellten Moodboards wurden Inspirationsquellen und Referenzen definiert, die die gewünschte Stimmung und Ästhetik transportieren. Ziel war es, eine freundliche, vertrauensvolle und zugleich moderne Atmosphäre zu schaffen, die den Bedürfnissen und Erwartungen von Max gerecht wird. Die visuelle Sprache unterstützt eine intuitive Benutzererfahrung und sorgt für Konsistenz im Design.
Farbkonzept
Metallic-Blau (Primärfarbe): steht für Ruhe, Vertrauen, Stabilität und Technik. Diese Farbe schafft Seriosität und Orientierung in der Anwendung.
Zitronen-Gelb (Sekundärfarbe): vermittelt Frische, Optimismus und Leichtigkeit. Sie bildet einen warmen Kontrast zum kühlen Blau und setzt freundliche Akzente.
Mandarinen-Orange (Akzentfarbe): dient als Highlightfarbe, bringt Energie ins Design und lenkt die Aufmerksamkeit gezielt auf interaktive Elemente.
Optionaler Farbverlauf: sorgt für Tiefe und unterstützt Hintergrundelemente.
Schwarz & Weiß (Textfarben): gewährleisten klare Lesbarkeit und Kontraste.
Durch die Kombination aus kühlem Blau für Stabilität, Gelb für Optimismus und Orange als lebendigem Akzent entsteht eine harmonische Farbwelt, die sowohl technisch modern wirkt als auch die emotionale Komponente der Benutzererfahrung berücksichtigt
typografie
Die Typografie wurde bewusst so gewählt, dass sie ein freundliches und persönliches Erscheinungsbild vermittelt. Sanfte Rundungen und weiche Konturen sorgen für eine moderne, einladende Ästhetik und unterstützen die Nutzerfreundlichkeit. Durch diese Formensprache wirkt die Anwendung klar strukturiert, nahbar und konsistent.
screen design
Das Semiflat-Design wurde gewählt, um eine visuell ansprechende und zugleich benutzerfreundliche Oberfläche zu schaffen. Besonders bei Buttons und Cards unterstützt dieser Stil eine klare Struktur und erleichtert Max die Orientierung auf der Benutzeroberfläche. So entsteht ein modernes, leicht verständliches und konsistentes Erscheinungsbild.
Animation
Animationen unterstützen die Benutzerführung, schaffen Lebendigkeit und vermitteln eine klare Botschaft.
Skalierung (klein zu groß): Erzeugt Offenheit, Weite und das Gefühl von individueller, gemeinsamer Erfahrung – eingesetzt z. B. beim Laden der App oder bei Slideshows.
Bewegende Linien: Visualisieren Fortschritt und Aufbau, ideal für Ladeprozesse oder Übergänge.
Einfliegen von unten nach oben: Wirkt positiv und steht als Metapher für Erfolg und Aufstieg – eingesetzt bei Pop-up-Fenstern oder der Tastatur.
Wischbewegungen: Stehen für Dynamik und Energie.
Nach oben wischen: Symbolisiert Fliegen und Erfolg (z. B. Hochschul-Tinder).
Nach unten wischen: Signalisiert Aussortieren oder Ablehnen.
Diese Prinzipien schaffen eine intuitive, emotionale Benutzererfahrung und stärken die visuelle Sprache der App.
