App-Analyse
Das ist der IST-Zustand der Original Netflix App, welcher Grundlage für unsere Überlegungen war.
Pro/Contra Auflistung zur ursprünglichen App.
Zu Beginn unserer Arbeit haben wir zunächst eine Analyse des IST-Zustandes der Netflix-App durchgeführt. Das Ziel war eine Übersicht über das aktuelle Design und die Nutzerfreundlichkeit zu erhalten. Durch eine Pro-/Contra-Auflistung sammelten wir alle Argumente und leiteten daraus ab, was wir „besser“ machen wollten.
Wir analysierten verschiedene Gesichtspunkte, wie zum Beispiel die Icons, Lesbarkeit und den Nutzungskontext. Ein großer Vorteil dabei war, dass jeder verschiedene und neue Aspekte
einbringen konnte, wodurch wir ein weit gefächertes Spektrum an Stichpunkten erhielten.
Daraus leiteten wir unsere Überlegungen ab, was wir an unserem App-Design besser und nutzerfreundlicher gestalten wollten.
einbringen konnte, wodurch wir ein weit gefächertes Spektrum an Stichpunkten erhielten.
Daraus leiteten wir unsere Überlegungen ab, was wir an unserem App-Design besser und nutzerfreundlicher gestalten wollten.
Zielgruppe & Persona "Ben"
Durch das Erstellen einer Persona versuchten wir, unsere Zielgruppe an einem konkreten Beispiel für uns und andere erfahrbarer und greifbarer zu machen.
Zunächst erstellten wir einen Steckbrief, der eine fiktive Person der von uns vorher definierten Zielgruppe (Hedonisten) widerspiegelt. Dieser beinhaltet beispielsweise Stichpunkte zu Persönlichkeitsmerkmalen, Hobbys und vor allem die Lieblingsserien. Daraus entwickelten wir unsere Persona namens „Ben“, welcher auch unsere Grundlage für die Problemszenarien und die weiter-
laufende Arbeit an unserer App darstellte. Um uns „Ben“ noch besser vorstellen zu können, haben
wir aus diesen Angaben ein Pinterestboard zusammengestellt, in der wir Bilder gesammelt haben,
die zu ihm passen. Dafür hat jede von uns einfach mal drauf los gepinnt, was sie gut fand und im Anschluss haben wir entschieden welche Bilder besonders passen.
laufende Arbeit an unserer App darstellte. Um uns „Ben“ noch besser vorstellen zu können, haben
wir aus diesen Angaben ein Pinterestboard zusammengestellt, in der wir Bilder gesammelt haben,
die zu ihm passen. Dafür hat jede von uns einfach mal drauf los gepinnt, was sie gut fand und im Anschluss haben wir entschieden welche Bilder besonders passen.
Die Persona erleichterte uns die Arbeit erheblich, da wir uns immer wieder neu in die Zielgruppe einfinden konnten.
Bedürfnisse analysieren
Bedürfnisse, die wir gemeinsam in der Vorlesung zum Thema "Serie schauen" gesammelt haben.
Die Bedürfnisse, die wir der aktuellen Netflix App zugeordnet haben.
In der Vorlesung sammelten wir gemeinsam verschiedene Bedürfnisse z.B. Zugehörigkeit, Kompetenz, Selbstverwirklichung, Sicherheit usw. beim Serien schauen, um von der Usability zur User Experience schließen zu können.
Diese Grundlage nutzten wir, um zu analysieren, welche Bedürfnisse bei der aktuellen App befriedigt werden und welche nicht. Daraus konnten wir wiederrum für unsere App Schlüsse ziehen, welche wichtigen, aktuell fehlenden Bedürfnisse noch berücksichtigt werden mussten.
Problemszenario
Eines unserer Szenarien, für das wir uns in der Gruppe schlussendlich entschieden haben.
In diesem Teil unserer Konzeption ging es darum, die bereits von uns analysierten Probleme
der Netflix-App zu konkretisieren. Zu diesem Zweck sollten wir ein Problemszenario basierend auf unserer zuvor erstellten Persona entwickeln. In dem Szenario werden ausgehend von der
IST-Situation der App eine oder mehrere Problemsituationen in Form einer Geschichte beschrieben. Dafür bekam jede Gruppe ein Thema zugeordnet, das mit Serie schauen in Verbindung steht. In unserem Fall waren das: Serien suchen und entdecken, Empfehlungen, Bewerten und Freunden zeigen, was man schaut.
der Netflix-App zu konkretisieren. Zu diesem Zweck sollten wir ein Problemszenario basierend auf unserer zuvor erstellten Persona entwickeln. In dem Szenario werden ausgehend von der
IST-Situation der App eine oder mehrere Problemsituationen in Form einer Geschichte beschrieben. Dafür bekam jede Gruppe ein Thema zugeordnet, das mit Serie schauen in Verbindung steht. In unserem Fall waren das: Serien suchen und entdecken, Empfehlungen, Bewerten und Freunden zeigen, was man schaut.
Anhand dieser Themen und unserer zuvor überlegten Persona „Ben“ haben wir in der Gruppe verschiede Szenarien geschrieben und uns im Anschluss zusammengesetzt und das „beste“ Szenario ausgewählt. Daraufhin haben wir aus dem Szenario die Schwierigkeiten herausgefiltert, mit denen sich Ben bei der Nutzung der App konfrontiert sieht und daraus die Grundlage für unsere Verbesserungen gezogen.
Sitemap
Nachdem wir im Problemszenario festgelegt haben, welche Dinge in der App verändert werden sollten, haben wir uns daran gemacht eine Sitemap zu erstellen. Anhand der Themen Serien suchen und entdecken, Empfehlungen, Bewerten und Freunden zeigen, was man schaut haben wir überlegt, welche Inhalte verbessert und welche noch hinzugefügt werden sollten.
Die Sitemap haben wir als Strukturgrundlage für unsere App verwendet. Darin haben wir uns gemeinsam Gedanken darüber gemacht, wie die App aufgebaut sein sollte, um für den User –
in unserem Fall „Ben“ – übersichtlich und nutzerfreundlich zu sein. Ausgegangen sind wir von
der Startseite und haben uns dann die weiteren Navigationswege überlegt.
Wireframes
Für die Wireframes haben wir ganz viele Ideen gesammelt und immer wieder Scribbles dazu gemacht.
Im Anschluss an die Sitemap haben wir begonnen Wireframes zu erstellen. Dafür hat sich
jedes unserer Gruppenmitglieder zwei Unterpunkte aus der Sitemap ausgesucht und sich im Einzelnen überlegt, wie die jeweiligen Frames aufgebaut bzw. gestaltet sein könnten, welche Funktionen und damit Navigationspunkte sie haben sollten.
jedes unserer Gruppenmitglieder zwei Unterpunkte aus der Sitemap ausgesucht und sich im Einzelnen überlegt, wie die jeweiligen Frames aufgebaut bzw. gestaltet sein könnten, welche Funktionen und damit Navigationspunkte sie haben sollten.
Daraufhin haben wir uns wieder zusammengesetzt und gebrainstormt, welche der Ideen wir gut finden, was verbessert oder anders umgesetzt werden könnte. Nach weiterem Feilen hatten wir
dann unser erstes Grundkonzept für die Umsetzung der App.
dann unser erstes Grundkonzept für die Umsetzung der App.
Inspiration für unser App Design
Für unser App Design haben wir uns auf Pinterest eine Board erstellt und verschiedene Designs gesammelt.
Nach dem Brainstormen haben wir uns eine weitere Board angelegt, für Desings und Elemente, die uns besonders gut gefallen haben und die wir uns für die App gut vorstellen konnten.
Für die zweite Board mit unseren favorisierten Designs haben wir nochmals eine Analyse erstellt, was genau uns gut daran gefällt und warum. Daraus haben wir dann die Inspiration für unser eigenes Design gezogen.
Unser App-Design
App-Screens
Auf der Startseite hat man die Möglichkeit die Serie oder den Film, den man zuletzt angesehen hat, direkt weiter zu schauen. Zudem kann man zur Profilanzeige wechseln, direkt auf seine Watchlist zugreifen, sich über "Entdecken" zu neuen Serien und Filmen inspirieren lassen und allgemeine Einstellungen zur App vornehmen.
Hier hat man die Möglichkeit sich anzeigen zu lassen, mit welchem Profil man angemeldet ist, seine Serien und Filme mit anderen zu teilen und Genre auszuwählen, die einen besonders interessieren – was die Empfehlungen von Serien und Filmen beeinflusst. Ausserdem kann man hier auch auf die eigene Watchlist mit seinen bisher gesehenen Serien und Filmen zugreifen. Vom Profil kommt man dann auch direkt wieder auf die Startseite.
Über die Startseite gelangt man auch zur Funktion "Entdecken", hier kann "Ben" sich innerhalb verschiedener Kategorien zu neuen Serien oder Filmen inspirieren lassen. So hat er z. B. die Möglichkeit sich bei "Deine Empfehlungen" Serien oder Filme anzeigen zu lassen, die anhand der im Profil ausgewählten Genres und der eigenen Watchlist generiert werden. Die Übersicht für "Serien" und "Filme" ist dabei gleich aufgebaut und man kann beliebig hin und her wechseln.
Vom Screen "Entdecken" kommt man z. B. auch auf die Kategorie "Top-Bewertet", hier sieht man dann welche Serien und Filme von wie vielen Leuten, wie bewertet wurden. Zudem gibt es zu jeden Eintrag auch eine Kommentarfunktion, um sich einen besseren Überblick zu verschaffen, warum Leute gut oder schlecht bewertet haben.
Icons
Icons, die wir für die App verwendet haben.
Bei der Gestaltung unserer App haben wir das Farbschema Dunkelgrau, Hellgrau und Türkis festgelegt, sowie eine Linienstärke definiert (z. B. für Pfeile). Für eine gute Übersichtlichkeit haben
wir ein schlichtes Design gewählt, mit einem zurückhaltenden Grau und nur einer knalligen Farbe,
die perfekt mit Grau harmoniert. Die Unterteilungen bzw. die verschiedenen Kategorien sind durch
die beiden Grauwerte visualisiert. Durch die klare Aufteilung und Hierarchie ist unsere App nutzerfreundlich. Die Verwendung von nur einer schlichten, serifenlosen Schrift mit mehreren Schnitten gewährleistet eine gute Lesbarkeit.
In dieser Umsetzung haben wir damit versucht auf die Accessibility zu achten, also die Objektein angemessener Größe und Abstand zueinander anzuordnen. Bei Buttonfunktionen, die keine offensichtlichen Icons sind, haben wir durch farbliche Unterlegung Buttons gestaltet, um zu zeigen, dass auch hier eine Interaktion stattfinden kann. Geachtet haben wir ebenfalls auf das Grid, also die Anordnung der Objekte im Raster und scharfe Kanten.
wir ein schlichtes Design gewählt, mit einem zurückhaltenden Grau und nur einer knalligen Farbe,
die perfekt mit Grau harmoniert. Die Unterteilungen bzw. die verschiedenen Kategorien sind durch
die beiden Grauwerte visualisiert. Durch die klare Aufteilung und Hierarchie ist unsere App nutzerfreundlich. Die Verwendung von nur einer schlichten, serifenlosen Schrift mit mehreren Schnitten gewährleistet eine gute Lesbarkeit.
In dieser Umsetzung haben wir damit versucht auf die Accessibility zu achten, also die Objektein angemessener Größe und Abstand zueinander anzuordnen. Bei Buttonfunktionen, die keine offensichtlichen Icons sind, haben wir durch farbliche Unterlegung Buttons gestaltet, um zu zeigen, dass auch hier eine Interaktion stattfinden kann. Geachtet haben wir ebenfalls auf das Grid, also die Anordnung der Objekte im Raster und scharfe Kanten.
Für unsere Icons haben wir Inspiration auf Pinterest gefunden. Passend zu unserem
gesamten Design haben wir sie einfach, schlicht und geradlinig gestaltet.
Durch die gewählteknallige Farbe Türkis für die Symbole, erkennt der Nutzer sofort,
wo eine Buttonfunktion möglich ist, um zum nächsten Screen zu gelangen.
gesamten Design haben wir sie einfach, schlicht und geradlinig gestaltet.
Durch die gewählteknallige Farbe Türkis für die Symbole, erkennt der Nutzer sofort,
wo eine Buttonfunktion möglich ist, um zum nächsten Screen zu gelangen.
