Incom ist die Kommunikations-Plattform der Hochschule Anhalt Fachbereich Design

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 Anhalt Fachbereich Design mehr erfahren

Biber-City App

Im Rahmen der Kooperation haben wir ein User Interface für die Biber-City- App entworfen, die für die Biber-Akademie konzipiert wurde. Mit Events, News und verschiedenen Vorteilen soll sie Sponsoren und Vereinsmitglieder über den Sport in der Stadt verbinden.

1. Vorarbeit

1.1. Die Biber-Akademie

Die Biber-Akademie, ein Verein, der 2022 unter anderem von Vanja Radić gegründet wurde, geht dem Ziel nach, die zukünftige Entwicklung der Sportlandschaft in den Städten Kühnau und Dessau-Roßlau positiv zu beeinflussen. Ganz nach ihrem Motto „Aus der Region, für die Region.“ Mit ihren sechs Grundbausteinen greifen sie die Hauptthemen Bewegung, Sport, Integration und Inklusion auf.

1.2. Aufgabenstellung

Unsere Aufgabe bestand darin, eine App zu konzipieren und das User Interface zu gestalten. Ziel der App ist es, Sponsoren mit Vereinsmitgliedern und Sportbegeisterten über den Sport zu verbinden. Der Fokus lag dabei auf der Stadt. Dadurch soll der Verein in der Region bekannter werden, seine Philosophie transportieren und somit besser gefördert werden.

1.3. Recherche

Um uns besser in die potentiellen User:innen hineinversetzen zu können, fertigten wir Empathy und User Journey Maps an. Dabei versuchten wir, möglichst viele demografische Gruppen abzudecken, um das Thema der Inklusionv besser angehen zu können. Als Zielgruppe für die App setzten wir uns vor allem junge Menschen, da wir bei ihnen das größte Potenzial in Bezug auf die Reichweite sahen.

Wir identifizierten einige Painpoints, die es in der App zu adressieren galt. So war ein großes Problem, dass viele Leute keinen Überblick über die Veranstaltungen in der Stadt haben und auch nur wenige Veranstaltungen besuchen. Diese und weitere Punkte wurden durch eine Umfrage ergänzt oder bestätigt.

Biber Brainstorm_3.pngBiber Brainstorm_3.png
Biber Brainstorm_Info_5.pngBiber Brainstorm_Info_5.png
Biber Brainstorm_Info_6.pngBiber Brainstorm_Info_6.png
Screenshot 2024-07-02 at 18.25.48.pngScreenshot 2024-07-02 at 18.25.48.png
Screenshot 2024-07-02 at 18.27.13.pngScreenshot 2024-07-02 at 18.27.13.png
Screenshot 2024-07-02 at 18.27.54.pngScreenshot 2024-07-02 at 18.27.54.png
Screenshot 2024-07-02 at 18.40.47.pngScreenshot 2024-07-02 at 18.40.47.png

2. Design Konzept

Zu Beginn unseres Designkonzepts haben wir beschlossen, wesentliche Inhalte der Corporate Identity der Biber-Akademie beizubehalten. Einige Eigenschaften wollten wir jedoch bewusst auf die junge Zielgruppe ausrichten und entsprechend verändern.

2.1. Typografie

Die Biber-Akademie arbeitet bisher mit zwei Schriftarten: Falcon und Open Sans. In unserem Projekt ist uns oft aufgefallen, dass die Falcon-Schrift sehr markant ist und viel Platz auf den Bildschirmen einnimmt. Wir haben mehrfach versucht, sie zu integrieren, jedoch ohne Erfolg. Stattdessen haben wir mit der Schriftfamilie der Open Sans gearbeitet.

typo.pngtypo.png

2.2. Icons

Die Primärfarben der Biber-Akademie sind Blau und Grün. Um sie jedoch an die jüngere Zielgruppe anzupassen und der App mehr Lebendigkeit zu verleihen, haben wir uns entschieden, diese Farben gesättigter und heller zu gestalten. Da diese Farben jedoch auf dem Plakat nicht gut erkennbar sind, könnt ihr sie euch gerne auf den Screens anschauen. Zusätzlich verwenden wir an einigen Stellen, wie bei neuen Nachrichten, eine weitere Farbe: Orange.

In unseren Umfragen haben wir herausgefunden, dass der Dark Mode für die App auch gewünscht ist, weshalb wir zwei Farbpaletten für die jeweiligen Varianten erstellt haben. Im Light Mode verwenden wir primär die blaue Farbe und im Dark Mode die grüne.

Um unsere App freundlicher und einladender zu gestalten, arbeiteten wir mit abgerundeten Formen und Icons. In der unteren Abbildung könnt ihr die von uns verwendeten Icons sehen.

icons.pngicons.png

2.3. Logo

Da wir vorwiegend mit Open Sans arbeiten, entschieden wir uns, das Logo dementsprechend anzupassen. Für den Schriftzug „Biber-City“ blieben wir bei Falcon und für den Untertitel „made by Biber-Akademie“ wählten wir Open Sans. Ergänzend dazu sind wir der Meinung, dass es noch Verbesserungspotenzial bei der Ausgestaltung des Logos gibt. Unser Augenmerk lag jedoch zunächst auf der Benutzererfahrung (UX) und dem Benutzerinterface (UI) der App.

Biber-Akademie_Logo.pngBiber-Akademie_Logo.png
Biber-City_Logo.jpgBiber-City_Logo.jpg

Screens

Events.pngEvents.png
Vorteile.pngVorteile.png
Profil.pngProfil.png
News.pngNews.png

Fachgruppe

Integriertes Design

Art des Projekts

Keine Angabe

Betreuung

foto: Prof. Mathias Jüsche

Zugehöriger Workspace

GP Die Biber sind da – DRHV 06 e.V. . 2024-S

Entstehungszeitraum

Sommersemester 2024