eHub Mobile App

Die Idee: ein zentraler Hub für eSport-Bootcamps

eHub ist ein App-Design-Konzept aus einem Studienprojekt im Applikationsdesign, angesiedelt in der Welt des semi-professionellen eSports. Anders als die üblichen Plattformen dreht sich eHub nicht um Turniere oder Spielerstatistiken, sondern um einen bislang kaum bedienten Bereich: Reisen und eSport-Bootcamps. Der Gedanke dahinter ist, dass persönliche Treffen an einem gemeinsamen Trainingsort ein Team ganz anders zusammenwachsen lassen als reines Online-Training, weil sie die Teamchemie stärken. Genau dafür fehlt bisher eine gute Lösung: Wer ein Bootcamp sucht, trägt Informationen mühsam von vielen einzelnen Websites zusammen. eHub bündelt all das an einer Stelle, findet und bucht Bootcamps direkt, zeigt Standortdetails, Ausstattung und Schlafmöglichkeiten und lässt die Umgebung mit ihren Points of Interest entdecken. Aus vielen Tabs wird ein Hub.

1. Phase 1

   Konzeption

   Marktanalyse, Interview, Persona, User Journey

2. Phase 2

   Erarbeitung

   Informationsarchitektur, Wireframes, Styletiles

3. Phase 3

   Finalisierung

   Responsive Interface, Designsystem, Clickdummy

Die Marktlücke: belegt, nicht behauptet

Bevor gestaltet wurde, stand eine gründliche Marktanalyse, denn die Behauptung einer Lücke muss man belegen können. In einem Affinitätsdiagramm wurden über dreißig bestehende Apps aus den Feldern Karten und Reise, Gaming und eSport sowie Events und Teambuilding einsortiert und verglichen. Das Ergebnis war eindeutig: Es gibt keine zentrale Plattform für Bootcamps, die vorhandenen Apps decken immer nur einzelne Teilbereiche ab, und Kartendienste sind für diesen Zweck oft überladen. Für drei besonders lehrreiche Apps, „Strafe Esports", „Google Maps" und „Tripadvisor", entstand je ein ausführlicher Steckbrief zu Funktionen, Benutzeroberfläche, Ansprache und Navigation. Aus dieser Analyse fielen konkrete Entscheidungen: das kachelbasierte Anzeigen von Informationen mit anschließender Detailseite, eine klare Tab-Bar-Navigation und, inspiriert von den „Awards" bei Tripadvisor, ein Gamefication-Ansatz, der Nutzer langfristig an die App bindet.

30+

Apps analysiert

1

Nutzer-Interview

3

Geräteformate

4

App-Bereiche

Die Zielgruppe verstehen: Interview, Persona und User Journey

Damit die App an echten Bedürfnissen ansetzt, wurde die Zielgruppe nicht erfunden, sondern befragt. Über einen persönlichen Kontakt in die eSport-Szene kam ein ausführliches Interview mit der Organisationsleiterin eines echten eSport-Teams zustande, das die tatsächlichen Wünsche und Schmerzpunkte sichtbar machte. Aus diesem Interview wurden eine Persona (Mia Keller, 28, IT-Projektleiterin, die ein engagiertes Team leitet), eine Empathy Map und eine User Journey entwickelt, die den Ablauf vor, während und nach der Reise abbildet. Die Wünsche waren sehr konkret: eine Suche mit Filtern nach Personenzahl und Region, das Auffinden von Points of Interest wie Supermärkten und Restaurants, direkte Kontakt- und Chat-Möglichkeiten, eine Ausstattungsübersicht „wie in einer Hotelbuchungsapp", speicherbare Favoriten und eine direkte Buchung. Vor allem aber sollte die App trotz vieler Informationen einfach und übersichtlich bleiben. Diese Punkte wurden zu den Leitplanken der gesamten Gestaltung.

Ein Hub statt vieler Tabs.

Das Konzept: viele Informationen, ruhig sortiert

Das Konzept übersetzt diese Anforderungen in eine klare Struktur. Herzstück ist eine Kartendarstellung, auf der die Bootcamps farbig hervorgehoben erscheinen, ergänzt um eine alternative Rasteransicht. Die Detailseite eines Bootcamps bündelt mit Bildern, Piktogrammen und Icons alles Wichtige, von der vorhandenen Hardware und Peripherie über die maximale Spielerzahl und die Räumlichkeiten bis zur direkten Buchung, und blendet darunter die Points of Interest der Umgebung ein. Ein Belohnungssystem mit sammelbaren Auszeichnungen, kleinen „Badges", motiviert dazu, Bootcamps zu buchen und Erfahrungen als Rezension zu teilen, was zugleich Vertrauen in den Dienst schafft. Die Zielgruppe bringt ein hohes technisches Verständnis mit und erwartet eine strukturierte Informationsarchitektur und einen professionellen Auftritt, weshalb die App trotz der Informationsfülle bewusst reduziert bleibt. Eine direkte Ansprache in der Du-Form und die im Gaming übliche Fachsprache geben dem Ganzen ein vertrautes, persönliches Gefühl.

Look & Feel: Dark Mode als Grundhaltung

Die gestalterische Grundhaltung ergibt sich unmittelbar aus der Zielgruppe: Der Großteil der anvisierten Nutzer verwendet seine Anwendungen fast ausschließlich im Dark Mode, also ist die App von Grund auf dunkel gedacht und nicht nachträglich abgedunkelt. Auf dem dunklen Fundament sorgt eine kontrastreiche Farbpalette mit gezielten, leuchtenden Akzenten für Orientierung und Hervorhebung. So entsteht eine Atmosphäre, die zur Gaming-Welt passt, ohne unruhig oder verspielt zu wirken. Hochwertige Grafiken und ruhige Animationen zwischen den Bereichen laden zum Erkunden ein und geben der App ein wertiges, zeitgemäßes Gefühl.

Von Wireframes zum Interface: Figma, Raster und Responsive

Der Weg vom Konzept zum fertigen Interface verlief iterativ und in Figma, mit dem in diesem Projekt zum ersten Mal intensiv gearbeitet wurde. Zunächst wurden die Funktionen der User Journey auf digitalen Haftnotizen gesammelt und daraus eine Informationsarchitektur abgeleitet, die Ansichten, Menüstruktur und erste Verknüpfungen zwischen den Bereichen festhält. Darauf folgten Scribbles und Wireframes mit ausführlichen Annotationen, jeweils auf einem sauber angelegten Rasterlayout. Die finalen Ansichten decken alle Kernbereiche ab: Login und Registrierung, das Entdecken als Raster und als Karte, die Bootcamp-Detailseite sowie Buchungen, Nachrichten und Profil. Besonders aufwendig war die konsequente Responsivität: Das Design wurde für Android Small, das iPhone 13 Pro und das iPad Pro 12,9 Zoll jeweils in Hoch- und Querformat ausgearbeitet. Für das iPad entstanden dabei eigene Komponenten, und die iPhone-Ansichten mussten wegen der Notch, des schwarzen Sensorbereichs am oberen Rand, gezielt angepasst werden, damit keine Inhalte verdeckt werden.

Das Designsystem: Lime auf Dark Gray

Zusammengehalten wird die App von einem umfangreichen, konsequent mit Stilen und Komponenten aufgebauten Designsystem. Das Farbsystem kombiniert ein leuchtendes Lime (#ecf23d) als Signalfarbe mit einem tiefen Dark Gray (#1b2626) und einer fein abgestuften Grauskala, ergänzt um einen Verlauf von Dark Gray zu Transparent. Typografisch trifft die markante, an Science-Fiction erinnernde Headline-Schrift „MBF Inno" auf die ruhige „Futura PT" für Fließtexte, eine Kombination, die erst nach dem Feedback entstand, bei den Schriften mutiger zu werden. Das System regelt bis ins Detail: Outline-Icons, Buttons mit ihren Zuständen von ungeklickt über Hover bis geklickt, Formulare mit und ohne Hilfestellung, Chat-Blasen mit definierter Zuordnung von eigenen und fremden Nachrichten, eine Tab-Bar mit einem Lime-Notification-Indikator sowie die Awards-Kacheln. Selbst die Fotos folgen einer festen Regel, ihre Sättigung wird gesenkt und die Lichter werden angehoben, damit die Bildwelt über die ganze App hinweg wie aus einem Guss wirkt.

Abrundung: App-Icon, App Store und Plakat

Über die reinen App-Ansichten hinaus wurde die Marke bis zur Präsentation zu Ende gedacht. Es entstanden ein eigenes App-Icon, App-Store-Screenshots und, freiwillig ergänzt, ein passender App-Store-Beschreibungstext, der die Vorteile der App auf den Punkt bringt. Ein Präsentationsplakat fasst Kurzkonzept, Design, Designsystem und Screenshots zusammen und ist so angelegt, dass sich damit Stakeholder, Bootcamp-Inhaber, Sponsoren oder Nutzer für das Projekt gewinnen lassen. Zusätzlich, und ebenfalls über die Aufgabenstellung hinaus, wurde ein kurzer Clickdummy im Format Android Small umgesetzt, der die Bereiche und die Zustände interaktiver Elemente erlebbar macht und dem statischen Entwurf ein erstes Look & Feel im Betrieb gibt.

Super Arbeit. In wenigen Einreichungen merkt man so eine echte Begeisterung für das Thema und Liebe zum Handwerk und zur Umsetzung.

So fasste es der betreuende Tutor im (anonymisierten) Feedback zur Abgabe zusammen. Er merkte außerdem an, dass sich in den ersten Überlegungen bereits die Inspirationen für die späteren Entwürfe wiederfinden.

Ehrlich eingeordnet: ein Konzept mit Substanz

eHub ist bewusst als Konzept gerahmt und kein veröffentlichtes Produkt, aber es ist ein Konzept mit Substanz. Es durchläuft die vollständige Kette von der belegten Marktlücke über ein echtes Nutzerinterview, Persona und User Journey bis zu einem responsiven High-Fidelity-Interface und einem dokumentierten Designsystem. Der Weg dorthin war auch ein Lernweg, gerade im erstmaligen, tiefen Umgang mit Figma, mit Stilen und Komponenten und mit den Eigenheiten unterschiedlicher Geräte, und die Arbeit wurde über alle Phasen hinweg iterativ überarbeitet und mit Feedback geschärft. Am Ende steht ein durchdachter Grundstein für eine Anwendung, die dem aufstrebenden eSport in dieser Form tatsächlich noch fehlt.

Was gehört zu einem App-Design-Konzept?

Ein tragfähiges App-Design-Konzept beginnt nicht beim schönen Screen, sondern bei der Frage, ob es das Problem überhaupt gibt. Es umfasst eine belegte Marktanalyse, echtes Zielgruppenverständnis über Interview, Persona, Empathy Map und User Journey, ein Konzept mit klarer Informationsarchitektur, die Ausarbeitung von Wireframes zu einem responsiven High-Fidelity-Interface und schließlich ein Designsystem mit Farben, Typografie, Komponenten, Icons und Regeln, das alles konsistent hält. eHub zeigt genau diese Kette: von der Erkenntnis, was semi-professionelle eSport-Teams wirklich brauchen, bis zu einem stimmigen, geräteübergreifenden App-Design mit eigenem Charakter.