User Interface Design UXR | UX | UI

Graffiti – User Interface Design einer prototypischen mobilen Street-Art App

graffiti-hintergrundbild

Graffiti bietet dem Benutzer die Möglichkeit, Street-Art mithilfe von Augmented Reality zu erstellen. Anschließend kann das Kunstwerk in der Community mit Freunden geteilt werden.

Das Hochschul-Projekt begann mit der Fragestellung, wie urbane Kunst und Technologie miteinander vereint werden können. Wir versuchten, Kunst für den Benutzer erlebbar zu machen, indem er sie nicht nur erschafft, sondern auch mit anderen teilt. Hierfür nutzten wir Elemente aus Social Media Plattformen, die wir unserer Applikation hinzufügten. 

Meine Rolle

In diesem Projekt war ich für die UX verantwortlich. Und entwickelte die Persona, Wireframes, Icons, User Flow sowie die Mockups. 

Weiter bestand das Team aus drei App-Entwickler, die insbesondere die Machbarkeit der Applikation im Blick hatten. Die Research Maßnahmen, sowie, Funktion- und Bedürfnisanalyse, User Journey und der abschließende Usability Test mit Eye Tracking führten wir gemeinsam durch.   

 

PROZESS //

Desktop Recherche, SWOT-Analyse; Persona, User Journey; Wireframes, Icon-Studie, Mockups; Usability Testing

ZEITRAUM //

Von März 2018-Juni 2018

SOFTWARE //

Adobe CS 6 – InDesign, Illustrator, Photoshop, Xd; Sketch

Ziele

Fokus auf die Benutzeroberfläche //

Der Fokus in diesem Projekt lag auf der Oberflächengestaltung der Applikation. Insbesondere auf der Navigation im Footer, die durch Icons realisiert werden soll. Weil auf dem mobilen Endgerät wenig Platz ist, um ein Menü bestehend aus Text zu platzieren.

Street-Art und Augmented Reality //

Die Aufgabe war, eine bestehende Idee in ein neues Gewand zu packen. Wir entschieden uns dafür, Street-Art und Augumented Reality zu vereinen, um Kunst für Freunde erlebbar zu machen.

Wie kommt die Idee bei der Zielgruppe an? //

Besonders interessant ist für uns das Feedback der künftigen Nutzer. Aus diesem Grund fand nach der Prototyping Phase ein Usability Test mit Eye Tracking statt.

UX DESIGN PROZESS

EMPATHIZE

Desktop Recherche für Domänenwissen

Ich begann mit einer umfassenden Desktop Recherche zu Street-Art Kunst, den Künstlern, in welchem Kontext diese Kunst entsteht und dargestellt wird. Sowie zu ähnliche Apps, die bereits auf dem Markt sind, um herauszufinden, welche Stärken und Schwächen sie aufweisen.

SWOT Analyse anderer Apps

Daraus erarbeiteten wir unsere Chancen. Umfangreiche Recherchen ermöglichten einerseits ein besseres Verständnis des Themas. Zum anderen wurde die Möglichkeit geschaffen, sich so den Funktionen und der Gestaltung der Anwendung immer mehr anzunähern. 

SWOT Analyse Ergebnis

DEFINE

Persona Lisa G.

Auf Basis der Recherche entwickelte ich die Persona Lisa G., 26 Jahre. Ziel war, ein grundlegendes Verständnis für den künftigen Benutzer aufzubauen und ihn im Detail zu beschreiben. 

Persona Lisa G.

Funktionen der App & Bedürfnisse, die gestillt werden sollen

Welche Funktionen soll die Anwendung besitzen und welche zentralen Bedürfnisse sollen beim Nutzer durch die App gestillt werden?

Diese Fragen stellten wir uns mithilfe der Persona Lisa G. Die Funktionen und Bedürfnisse die wir für die App planten, ergaben sich aus den Ergebnissen der Recherche-Phase.

01 | FUNKTIONEN

Beduerfnisse-1

02 | BEDÜRFNISSE

Beduerfnisse-2

User Journey von Lisa G. 

Wie verwendet der Künstler die App Graffiti?

Um das zu verstehen, war es wichtig, die zentralen Erfahrungen aus der Sicht des Benutzers zu verstehen.

Mithilfe der User Journey visualisierten wir die Interaktion zwischen dem Benutzer und der Anwendung. Diese nutzerorientierte Methode half schließlich, sich einem Design zu nähern, das zu einer positiven Benutzererfahrung führen soll. 

 

User-Journey-Graffiti

IDEATE & PROTOTYPE

Let's scribble wireframes

Ich fing damit an, Ideen für die Anwendung zu skizzieren.

Wichtig war, die Entwicklung einer minimalistischen Oberfläche, auf der alle Interaktionselemente klar und strukturiert angeordnet sind.

Auf diese Weise wird nicht nur eine gute Usability sondern auch eine gute Benutzererfahrung ermöglicht, um das Produkt in seinem vollen Umfang erlebbar zu machen. Die Wireframes dienten dann als Grundlage für die Erstellung der Mockups. 

Scribbles Graffiti

Farbe und Schrift festlegen

Um die Farben und Schriftart der App festzulegen, stellten wir im ersten Schritt ein Moodboard zusammen.

Es bestand aus einem Graffiti mit einem großen Anteil der Hauptfarbe: #0FC1EA. Neben diesem Ton, sammelten wir eine dunklere Schattierung und fügten neutrale Grautöne hinzu.

Als Schriftart wählten wir die klare Schrift Helvetica, die auf digitalen Endgeräten gut lesbar ist.

Farbe-Font

Icon-Studie für die Navigation

Weil ein Ziel im Projekt die Entwicklung der Icons für die Anwendung war, arbeitete ich die Icon-Scribbles mithilfe eines Software-Programms aus.

Für eine einheitliche Erscheinungsform und für die problemlose Implementation nutzte ich ein Raster, in dem ich alle Icons ausrichtete. Wichtig ist, dass sie für den Nutzer gut erkenn- und bedienbar und ohne textuelle Unterstützung eindeutig sind.

Graffiti Icons
Newsfeed Graffiti

Wie Lisa G. ein Graffiti zeichnet

  1. Newsfeed: Um die Hauptfunktion das Zeichnen durchführen zu können, klickt sie auf das Graffiti-Icon.
  2. Canvas: Die Rückkamera des Smartphones wird aktiviert. Durch ein Long-Press auf das Icon öffnet sich die Zeichenpalette und das Zeichengerät kann per Klick darauf ausgewählt werden. 
  3. Color-Palette: Die passende Farbe wählt Lisa per Long-Press. Mit der Zeichnung kann angefangen werden, sobald das Smartphone auf eine Fassade gerichtet wird. Durch Klick auf den Haken ist die Zeichnung fertig. 
  4. Upload: Eine Beschreibung kann hinzugefügt werden und mit Klick auf den Upload Button der Community bereitstellen.
  5. Newsfeed: Die Zeichnung erscheint und kann durch befreundete Nutzer kommentiert und geliked werden.
Graffiti-User_Flow-JPG
Graffiti Zeichenpalette
Graffiti-Kommentieren-Screen

Newsfeed: Liken und Kommentieren

Im Newsfeed werden die hochgeladenen Street-Arts angezeigt. Mit der Möglichkeit diese zu kommentieren und zu liken, indem auf die Sprechblase bzw. Herz geklickt wird.

Beim Verfassen eines Kommentars erscheint die Tastatur und der Kommentar kann verfasst und per Klick auf das Flieger-Icon bestätigt werden. Das Herz wird nach dem Klick darauf, als Filled Icon dargestellt.

Graffiti-Kommentieren

Album für hochgeladene Street-Art

Erstellte und hochgelade Street-Art wird automatisch im Album gespeichert. Durch Klick auf die drei Punkte öffnet sich ein Auswahlmenü, in dem ein Beitrag geöffnet und gelöscht werden kann.

Graffiti-Beitrag löschen-Screen
Graffiti-Beitrag löschen-nicht-aktiv
Graffiti-Beitrag löschen-aktiv

Wo finde ich meine Freunde?

Leute, die diese Applikation nutzen kann gefolgt werden. Dafür wird auf den Follow-Button geklickt. Um einer Person nicht mehr zu folgen, wird der selbe Button – jetzt Unfollow betätigt.


Graffiti-Freunde-Screen
Graffit-Mockup-Canvas

Canvas: Eine Zeichnung erstellen 

Klickt der Nutzer auf das Graffiti-Icon gelangt er zur Ansicht Canvas, in der die Zeichnungen erstellt werden.

Die Hauptkamera am Gerät wird durch die aktive Ansicht aktiviert. Richtet der Nutzer das Smartphone gegen eine Fassade und wählt per Long-Press ein Zeichengerät sowie eine Farbe aus, kann mit der Zeichnung auf dem Smartphone-Display gestartet werden.

Die Zeichnung uploaden

Klickt der Nutzer in der Ansicht Canvas auf das Check-Icon, hat er die Möglichkeit seine Zeichnung der Community bereitstellen.

Dazu sieht er zunächst seine Zeichung als verkleinertes Foto, darunter befindet sich ein Textfeld indem ein Cursor blinkt. Über das offene Textfeld kann er jetzt eine passende Beschreibung hinzufügen und bestätigen. Für den finalen Upload klickt er auf den Button mit dem weißen Flieger-Icon.


Mockup-Upload

USABILITY-TEST

Feedback durch die Nutzer

Mit vier Personen aus der Zielgruppe führten wie einen Usability Test mit Eye Tracking Verfahren durch. Dazu stellten wir ihnen die folgenden Fragen und Aufgaben. So konnten wir feststellen, wie nutzerfreundlich die App ist.

Graffiti Testergebnis

Rückblick &
Resümee

Augmented Reality nicht testbar //

Die Technologie Augmented Reality konnte nicht prototypisch für den Usability Test umgesetzt werden. Deshalb mussten wir eine Alternative finden, mit der wir das Szenario, Street-Art Kunst an eine interaktive Fassade zeichnen realiseren konnten. Diese Möglichkeit fanden wir darin, das Smartphone mit einem PC zu verbinden, um so den Test, samt Eye Tracking durchführen zu können.

Iterationen der Wireframes & der Icon-Studie //

Iterationen hinsichtlich der Wireframes und Icons waren notwendig. Das lag vor allem daran, dass ich in der Ansicht Canvas so wenig Interaktionselemente wie möglich und nur so viel wie nötig unterbringen wollte, damit dem Nutzer eine möglichst große Fläche für seine Zeichnungen bleibt. Darüber hinaus sollten die Icons zwar eine Zusammengehörigkeit vermitteln, sich von der Funktion aber klar voneinander unterscheiden. 

© Yvonne 2021

Back to top Arrow