top of page
7acc74e8-d790-48b4-9eff-9fc0d07229c5_rw_

Face Forward

Kooperationsprojekt

2018 - 2019

About

Das Projekt FaceForward (Konzeption und Interfacedesign eines KI-basierten Prototyps) ist eine kooperative Master-Thesis, die sich mit der Idee des menschlichen Körpers als Schnittstelle zwischen Selbst- und Fremdwahrnehmung sowie verbaler und nonverbaler Kommunikation beschäftigt. Aus dieser Perspektive kann die visuelle Erscheinung als eine Darstellung der Persönlichkeit betrachtet werden, die bestimmte Eigenschaften oder sogar verborgene Potentiale zu einem signifikanten Punkt anzeigt. Das Konzept dahinter ist ein integrierter und jahrhundertealter und umstrittener Ansatz - ein Gesichtslesesystem, das als Psycho-Physiognomik (PPI) bezeichnet wird. Die Idee besteht darin, sowohl die Möglichkeiten als auch die Risiken innerhalb eines explorativen Prototyps zu erforschen, der PPI mit Künstlicher Intelligenz (KI) kombiniert. Das Ergebnis war (1) eine Literaturrecherche zur Physiognomik in der Vergangenheit und Gegenwart, zu den Problemen und Potenzialen und (2) eine Look & Feel Animation eines interaktiven Prototyps für mögliche Tests der Prinzipien von PPI mit interessierten Benutzern, (3) eine qualitative Befragung einer möglichen Zielgruppe und Zuordnung zu möglichen Gesichtstypen basierend auf den Charakteristika mit anschließendem anatomischem Abgleich und (4) der Mitentwicklung einer Datenbank für die KI.

AUFGABEN

  • Verschriftlichung & Präsentation Grundidee

  • Projektmanagement (Planung, Umsetzung, Aufgabenverteilung, Überprüfung)

  • Planung & Durchführung von Interviews

  • Recherche & Bearbeitung Bildmarterialien Datenbank

  • Entwicklung & Umsetzung visuelles Konzept für User Interface

  • Entwicklung & Umsetzung visuelles Konzept für Thesis

  • Recherche & Entwicklung Personas 

  • Character Design 

 

MEDIEN & METHODEN

Buch, Video, Postkarten, Visitenkarten  ​​

Sekundäre Recherche, Qualitative Interviews, Bildauswahl- & Bearbeitung für Datenbank, Projekt Management, User Flow, Personas  

TOOLS

Analog tools, Adobe Photoshop, Adobe InDesign, Adobe Illustrator, Adobe After Effects ​​​​​​

Weiterlesen & mehr über den Prozess erfahren

Challenge & Research

Ein ethisch wie auch moralisch schwieriges Thema bedarf Fingerspitzengefühl. Daher begleiteten mich für mein anfängliches Brainstorming folgende Fragestellungen:

 

  • Wie kann die Idee so inszeniert werden, sodass es keine anfänglichen negative Assoziationen gibt?

  • Welche Vision, Mission und welchen USP soll die Prototyp-Anwendung besitzen?

  • Welche Personas könnten den Prototypen benutzen?

  • Welche Personengruppen eignen sich als Probanden für ein Interview?

  • Welche Features soll die KI erfüllen können?

  • Wie groß muss der Datensatz minimal für die KI sein?

  • Wie lässt sich ein Bilder-Datensatz für ein Training der KI beschaffen?

  • Wie muss der Bilder-Datensatz be/verarbeitet werden? 

  • Wie kann die Thesis visuell die zwei komplexen Themenblöcke aufgreifen?​​​​​​​

 ​​​​​​​

Erste
visuelle Idee

Die erste Idee befasste sich mit einer Web-Applikation auf welcher zwei Gesichter (Mann & Frau) inszeniert und mit Infografiken kombiniert sind. Inspirationen suchte ich hierzu vor allem aus Webseiten, wie auch Apps, welche besonders stark mit Bild und Grafik arbeiten.

 ​

036e2636-9cfa-4f05-9edd-923678f43157_rw_
33c19cfc-261a-4593-9e09-054e38132823_rw_

Quellen: (links oben und unten) dribble.com, (oben Mitte) dribble.com, (unten Mitte) creativemarket.com und dribble.com,  ​(rechts) Pinterest.com

65140aa8-e4b4-4f12-b0fb-b48c264c9094_rw_

Zweite 
visuelle Idee

Nach dem ersten Wurf und einiger Überlegungen verwarf ich die visuelle Idee. Sie wirkte zu elitär, zu hart und nicht das richtige für dieses speziell kritische Thema. Daher überlegte ich mir wie man das Thema spielerisch angehen könnte und kam auf die Idee einer Expedition im Dschungel. Visuelle Inspirationen suchte ich mir vor allem von anderen Illustratoren. 

Kommunikation: non aggressive but direct optimistic

Tonality: sympathisch, menschlich, verspielt, abenteuerlich, informativ 

Quellen: (v.l.n.r.) pinterest.com

Brainstorming Personas

Basierend auf der Idee einer Expedition überlegte ich mir welche Personas es geben könnte. Inspiriert wurde ich hierbei primär von den Grundtypen der Psycho-Physiognomik und ihrer Charaktereigenschaften. Gleichermaßen auch durch den Typenindikator von Katherine Cook Briggs und Isabell Briggs Myers. Für den weiteren Verlauf wählte ich drei unterschiedliche Typen aus. Den Logiker/Kritiker, den Entdecker und den Aktivisten. Diese entwickelte ich weiter.

Define & Ideate

Bis zu diesem Schritt konnten durch mehrerer Brainstormings- & Recherchephasen einige Fragestellung von zu Beginn beantwortet werden:​​​​​​​

 

Wie lassen sich ein Minimum an Bilder-Datensatz für ein Training der KI beschaffen?

1. Bilderrecherche, Bearbeitung & Normierung. 

2. Entwicklung Algorithmus zur Übernahme dieses Schrittes. 

 

Welche Features soll die KI erfüllen können?

Erkennung der Gesichtsgrundform.

 

Wie kann die Idee so inszeniert werden, sodass es keine anfänglichen negative Assoziationen gibt?

Spielerischer und abenteuerlicher Look. Gefühl einer Expedition durch den Dschungel. Viele Grüntöne inkl. Farbakzente. Ein bis zwei Help-Characters. 

 

Welche Personas könnten den Prototypen benutzen?

Der Logiker/Kritiker, der Entdecker und der Aktivist wurden zum Analysten (The Analyst), Diplomaten (The Diplomat) und Entdecker (The Explorer). Aufbauend auf den Typen der Psycho-Physiognomik und weiter inspiriert durch den Typenindikator von Katherine Cook Briggs und Isabell Briggs Myers - 16 Personalities.

Wie kann die Thesis visuell die zwei komplexen Themenblöcke aufgreifen?

Programmcode der KI (Python) und klassische Design-Strukturen beim Print als Grundlage verwenden. 

Qualitative
Datenbank

Das mit unter aufwändigste war die Recherche von geeigneten Portraits für eine Gesichtsform-Analyse. Geplant war ein Datensatz von 100 Bildern zu erstellen, diese zu normieren und den jeweiligen Grundformen der Psycho-Physiognomik zuzuordnen. Um sich dieser Aufgabe anzunähern erstellte ich neben der "analogen Datenbank" zusätzlich geometrische Masken die in einem möglichen Plausibilität-Check von der KI über das Portrait gelegt werden kann. Gleichermaßen konzipierte ich sogenannte if-Clauses die es dem Algorithmus erleichtern sollten die jeweiligen Formen zu erkennen.

Drei Personas

Im Folgenden sind die drei Personas mit jeweiliger allgemeinen wie auch etwas detaillierteren Beschreibung zu sehen. Für mehr Details klicken Sie bitte auf das jeweilige Bild.

Userflow & Interface

Für den ersten visuelle Look wurde aufgrund von zeitlichen Beschränkungen darauf verzichtet für jeden der einzelnen Personas einen eigenen Userflow zu entwickeln bzw. anzudenken. Im Folgenden ist daher ein gemeinsamer grober Userflow wie auch dessen Main-Screens als kleine Doodle-Skizzen zu sehen. Sie sehen ebenfalls das Look & Feel für die Applikation.

5f82a2a4-5398-4e55-8d9d-636e70137a47_rw_
506565f4-ac52-40e3-90e5-4a3ad987a699_rw_
e4ae2ace-7eae-47d6-8a87-d6f04da33a8d_rw_

Character Design

Damit sich User schnell zurecht finden gibt es zwei Character die mit Rat & Tat zur Seite stehen. Die beiden symbolisieren selbst zwei Personas - die Entdeckerin (Explorer) und den Analysten (Analyst). 

Für einen spielerischen und modernen Look sind die Charaktere in ihrer Umsetzung rough & skizzenhaft. Die Kolorierung erfolgte mit Filzstiften, Contouring mit Fineliner. 

5ac6336c-be12-4685-a98e-6c051ad13c86_rw_

Book Concept

Das Layout der Thesis kombiniert die zwei Disziplinen - Informatik und Kommunikationsdesign anhand ihres grundlegenden Gerüsts; die Programmiersprache Python und den Layout-Strukturen von InDesign. So sind beispielsweise Kommentare in der Marginalspalte mit einem # gekennzeichnet. Hauptüberschriften werden durch else:print "Beispiel" dargestellt. Textboxen werden mit einer Linie wie im Bearbeitungsmodus von InDesign dargestellt. Sonderzeichen und Absatzzeichen werden ebenfalls "eingeblendet".

Prototype & Iterate

Aus zeitlichen Gründen konnte kein Click-Dummy für eine Präsentation vorbereitet werden. Daher gibt es ein Look & Feel Video um einen ersten Eindruck des User Interface Designs zu vermitteln. Im Folgenden sehen Sie jedoch bereits das angelegte Prototype-Dokument in Adobe XD.

e3c1d2e9-1497-4ccf-ae20-802c9d669830_rw_

Design

Die Umsetzung können Sie im Folgenden sehen.

Design
0d491ef1-149d-4925-93aa-4d846874e7c4_rw_
28005f7e-3b45-45b7-809b-3803645ead27_rw_
97d6246f-c24c-4c8c-a46f-e0382c95e308_rw_
236e1412-dd59-4837-aaed-047eb236c5aa_rw_

Weitere Projekte:

bottom of page