User Interface Design Portfolio
Im Jahr 2022 durfte ich eine einmonatige Weiterbildung zu UI-Design mit Sketch (ein Programm für UI-, Web- und Icon-Design) bei der cimdata Bildungsakademie absolvieren.
Etwas mehr als drei Wochen lang konnte ich dabei über Gestaltungspraktiken, Branchen-Standards, die Do's und Don'ts und vieles mehr lernen.
Anschließend hatte ich eine Woche Zeit für meine Abschlussarbeit. Aufgabe war es das UI-Design für eine eigens ausgedachte, fiktive App zu entwerfen. Dazu gehören Lofi und Hifi Wireframes, Konzeption der App, das Erstellen von passenden Personas und die Präsentation anhand eines selbst erstellten klickbaren Prototyps. Pflicht dabei war das Kreieren von Login-Screens, Landing-Page, Welcome-Screens sowie Startseite und mindestens eine Unterseite.
Die Zertifikate für meine abgeschlossenen Weiterbildungen bei cimdata finden sich hier !
GIG RADAR Konzept
Da ich oft zu Konzerten gehe, häufig selbst welche spiele und manchmal auch veranstalte, habe ich mir das Konzept für eine App im Event-Bereich ausgedacht.
Mit der App sollte man Konzerte und Events in der Umgebung suchen, planen und bewerben können. Eine App sowohl für Fans von Live-Musik, als auch für Veranstalter*innen und Artists.
Musikbegeisterte hätten die Möglichkeit, Veranstaltungen zu suchen, ihren Kalender zu füllen, sich mit Freunden zu vernetzen und Events zu teilen.
Artists hätten darüber hinaus die Möglichkeit, ihre Fan-Base auszubauen und mit Veranstalter*innen in Kontakt zu treten.
Letztere könnten ihre Veranstaltungen effektiv bewerben und besser einschätzen, wie viele Gäste erwartet werden können. Meine Personas habe ich auf den drei verschiedenen Rollen aufgebaut, die mir für die App am wichtigsten erschienen, damit jede der unterschiedlichen Perspektiven in der Konzeption zu jeder Zeit beachtet werden kann.
Welcome-Screens
Welcome- oder Onboarding-Screens erscheinen bei der ersten Nutzung einer App. Das Onboarding ist das virtuelle Auspacken des Produktes. Es soll Benutzer*innen willkommen heißen und helfen einen komfortablen Einstieg in die Anwendung zu finden. Oft werden dabei schon einzelne Funktionen erklärt. Am allerwichtigsten ist es, an dieser Stelle Spannung und Vorfreude zu erzeugen.
Wie kann sich das Leben von Nutzer*innen durch das Produkt verändern? Worauf können sich Nutzer*innen freuen?
Ein weiteres Ziel ist es, gerade zu Beginn die Neuankömmlinge zu ermutigen, viele Aktionen in der Anwendung auszuführen. So lässt sich die App nachhaltig in den Alltag integrieren.
Styleguide
Beim farblichen Design der App wollte ich mich etwas ausprobieren und habe versucht eine Farbpalette zu finden, die an die bunten Lichter auf Konzertbühnen erinnert, dabei aber cool und nicht überladen wirkt. Die Hintergründe sind in grau gehalten, mit leichtem Verlauf von Hell zu Dunkel, damit es etwas bewegter wirkt. Da auf der App viele user-generierte Inhalte Platz finden sollten, stand ein farbiger Hintergrund nicht zur Debatte. Nutzer*innen sollten frei gestalten können, ohne dass sich ihr Content mit großen farbigen Flächen innerhalb der App beißt.
Der Name Gig Radar bezieht sich auf die Funktion der App, die Umgebung nach Events (Gigs) in der Nähe abzuscannen. Statt als Logo einen altmodischen Radarschirm zu nehmen, habe ich mich für einen stilisierten Blitz entschieden, in dem die beiden Primärfarben des App-Designs auftauchen.
Das Logo besticht, meiner Meinung nach, durch Einfachheit und einen Wiedererkennungswert und vermittelt darüber hinaus eine Vorstellung von Energie, Schnelligkeit und Spannung. Genau das soll das Design der App auch vermitteln:
Abenteuer, Ausbrechen aus dem Alltag, Lebensfreude und Community.
Login und Sign-Up-Screens
Die Registrierung ist der erste Schritt, bei dem das Vertrauen der Nutzer*innen in die App auf die Probe gestellt wird.
Ist dieser Prozess vertrauenserweckend und gleichzeitig einfach und schnell, sind Nutzer*innen eher bereit ihre persönlichen Daten anzugeben.
Wenn das Design auf diesen Screens hingegen schlecht und unintuitiv ist, gehen sie häufiger kein Risiko ein und machen keine persönlichen Angaben.
Weil sich viele Nutzer*innen unter Umständen jedes Mal, wenn die App oder Seite genutzt wird, neu einloggen müssen, ist es besonders wichtig den Prozess so schlank und einfach wie möglich zu gestalten.
Die folgenden Wireframes sind nur eine kleine Auswahl der Screens, die ich für den Sign-Up und Login-Prozess entworfen habe.
Optimierung für verschiedene Nutzung: Home-Feed
Die Idee von Gig Radar habe ich für Veranstalter*innen, Musikbegeisterte und Interpreten und alle möglichen Überschneidungen der einzelnen Gruppen konzipiert. Im Onboarding oder nach dem Sign-Up wird Nutzer*innen die Möglichkeit gegeben, sich in eine oder mehrere der Kategorien einzuordnen. Veranstalter*innen und Artists haben mehr Möglichkeiten, z. B. das Erstellen von Veranstaltungen.
Ähnlich wie bei Facebook werden Veranstaltungen und Beiträge im Home-Feed angezeigt. Wenn man diese anklickt, gelangt man auf eine Seite, die diesem Beitrag oder der Veranstaltung gewidmet ist. Veranstaltungen werden auf der Home-Seite immer mit Bild bzw. Plakat angezeigt. Außerdem hat man dort oder auf den Unterseiten die Möglichkeit mit einem Klick die Beiträge zu liken, sich die Veranstaltungen zu merken oder Inhalte zu teilen.
Menü Erklärung
Top und Bottom App-Bars gehören zum Einmaleins der App-Entwicklung. Im Top App-Bar finden Inhalte und Aktionen mit Bezug zum gerade angezeigten Screen Platz. Er wird hauptsächlich für Branding, Screen-Titel und Navigation genutzt. In meinem Fall finden sich dort ein Pfeil zur Navigation, eine Lupe für die Suchfunktion und ein Burger-Menü für Einstellungen, Zusatzfunktionen und Zugang zu speziellen Informationen.
Mit den Icons der Bottom App-Bar können Nutzer*innen zu den einzelnen Bereichen der App navigieren. Unter Home findet sich der persönliche Feed, wo neue interessante Inhalte angezeigt werden. Im Bereich Community befinden sich die Chats mit anderen Nutzer*innen. Im Profil können Informationen zur eigenen Präsenz innerhalb der App angepasst werden.
Radar und Kalender
Die Funktionen von Kalender und Radar sind der "unique selling point" meiner App. Also das, was die App von anderen Angeboten wie z. B. Facebook abhebt. Beides soll intuitiv zu bedienen sein und auf unnötige Funktionen verzichten, die vom Kern der Anwendung ablenken könnten.
Dabei soll es weiterhin ansprechend aussehen und so wenig wie möglich neue Symbole eingeführt werden, die bei der ersten oder zweiten Anwendung verwirren könnten. Die Suche nach Veranstaltungen im Radar soll gefiltert werden können (z. B. nach Genre) und das Starten der Suchfunktion könnte durch eine ansprechende Animation unterstützt werden.
Der Kalender soll so einfach wie möglich gestaltet sein, und sich bereits erlerntes Verhalten der Nutzer*innen zu Nutze machen. Ein kleiner Punkt unter dem Datum soll anzeigen, dass sich eine Veranstaltung an diesem Tag markiert bzw. gemerkt wurde. Der Kreis zeigt an, welcher ausgewählt ist und welcher der heutige Tag ist.
