mosaic

KONTEXT & PROBLEM

1. Erinnerungen zusammenführen

2. Zusammenhänge entdecken

Ein anderer faszinierender Aspekt war die assoziative Denkweise unseres Gehirns: Wir sehen ein Bild von unserem letzten Urlaub und erinnern uns an den Geruch des Meeres. Oder wir hören ein Lied, welches uns an bestimmte Personen oder Lebensphasen erinnert. Welche Möglichkeiten es gibt, zu bestimmten Erinnerungen passende „zusammenhängende“ Erinnerungen zu finden, interessierte uns sehr.

RECHERCHE

1. Moodboards

Unsere Recherche startete damit, wie wir unsere „Erinnerungen“ - in der Form von Bilder, Videos und Musik - am besten visualisieren könnten. Besonders interessant erschienen uns letztendlich sogenannte „Grid Views“ und „Kacheln“ wie man die zum Beispiel aus der App Pinterest kennt. Geometrische Grids wie aus iPhoto oder Instagram erschienen uns auch als einegute Wahl, obwohl die tendenziell nicht den „organischen“ Charakter von Erinnerungen betonten. Während unserer visuellen Recherche „stolperten“ wir außerdem über den visuellen Stil der „Soft UI“ - leider stellte sich heraus, dass dieser besser für reduzierte und typographische Interfaces geeignet ist, als für unser bildlastiges „Erinnerungs-Mashup“ - schließlich sollten die Erinnerungen im Vordergrund stehen und nicht das UI.

2. Zeit, Ort, Nähe und Machine Learning

Wir stellten uns außerdem die Frage, mit welchen Informationen und Technologien wir einzelne Momente zu einer „zusammenhängenden“ Erinnerung zusammensetzen können oder wie wir zu bestimmten Erinnerungen „verwandte“ Erinnerungen finden könnten.

Neben zeitlichen und geographischen Überschneidungen sind wir so auch auf Objekterkennung-Algorithmen durch Machine Learning oder dem Funktionsprinzip der Corona-App gestoßen, welches erkennen könnte, wenn wir bestimmten bekannten Menschen - Freunden und Familie zum Beispiel wieder begegnen.

3. Die Frage nach dem Fokus

Uns wurde zunehmend bewusst, wie komplex das Thema Erinnerungen eigentlich ist. Es stellte sich die Frage, worauf wir uns konzentrierten - also zum Beispiel auf die Erinnerungen, die wir entlang des „Lebensweges“ sammeln, also eher auf den geographischen Kontext oder eher auf die „Story“ hinter der Erinnerung - also wie wir aus losen Erinnerungsfetzen „Erinnerungen mit persönlicher Bedeutung“ formen.

UNSER MASHUP

Letztendlich haben wir uns dafür entschieden, uns auf den Aspekt „Lose Momente zu bedeutsamen Erinnerungen zusammenfügen“ zu konzentrieren - unser Mashup für den Kurs stand nun fest, nämlich „Pinterest + iCloud“.

1. Pinterest

Pinterest ist bekannt für seine typische, endlos scrollbare Rasteransicht von sogenannten „Pins“. Diese Pins enthalten Bilder oder Videos sämtlicher Interessensgebiete - über Einrichtung, Frisuren, Tattoos oder auch Interfaces - welche auf sogenannten „Boards“ gesammelt werden können. Der Nutzer kann also eigene Sammlungen erstellen und mit Pins befüllen. Pinterest schlägt je nach Auswahl der Inhalte andere, ähnliche oder verwandte Inhalte vor. Dieses Prinzip empfanden wir als sehr passend für unsere App, da das menschliche Gehirn ähnlich assoziativ arbeitet.

2. iCloud

Die iCloud ist im Prinzip ein Cloudspeicher, welcher mittlerweile neben Bilder und Videos auch Notizen, E-Mails und iMessage Textnachrichten enthält. Im Prinzip hinterlassen wir in der iCloud sehr viele lose „Fragmente“ unseres täglichen Lebens - und es gibt bis jetzt noch keine Möglichkeit, diese Fragmente wieder zusammenzufügen und erlebbar zu machen - aber genau das war unser Ziel für den restlichen Kurs.

PROZESS

1. AppStore Layout

Wir hatten uns kaum auf unser Mashup geeignet, da stand schon die Aufgabe im Raum, unsere App-Idee in Form eines fiktiven App Store Layouts aufzubereiten. Diese Aufgabe stellte uns sehr unter Druck, da wir so viele Ideen und Möglichkeiten gesehen haben und wir uns auf einen "Kern" konzentrieren mussten, bevor wir uns überhaupt ausgiebig Gedanken zur Struktur und den Funktionen machen konnten. Im AppStore Layout konnte man zumindest die Rasterdarstellung erkennen, welche wir mit "eigenen Erinnerungen" anstatt Pins befüllt haben. Neben der Übersicht der eigenen Erinnerungen (analog zu den Boards von Pinterest), kamen wir durch diese Aufgabe auch auf die Idee, dass unsere App Kontext abhängig Erinnerungen vorschlagen kann - zum Beispiel, was ich "heute" vor z.B. zwei Jahren erlebt habe. Wir fanden es spannend Wege zu finden, wie man an vermeintlich "vergessene" Erinnerungen erneut erinnert werden könnte.

2. Struktur & Userflows

Als wir uns als nächstes tatsächlich mit der Struktur und potentiellen Nutzerflows auseinandersetzen durften, wurde es nicht einfacher:

Wir wählten zunächst einen Einstieg über die „einzelnen“ Erinnerungen, welche man - analog zu Pinterest - zu einer Erinnerung zusammenfügen kann. In den Feedbackgesprächen mit Ivo und Paul ergab sich aber ein viel intuitiverer Weg: Das System schlägt „vorgefertigte“ Erinnerungs-Sammlungen vor und der Nutzer löscht lediglich die Momente heraus, die seiner Meinung nach nicht zur Erinnerung passen. Dieser Input vereinfachte letztendlich unseren kompletten User-Flow.

3. Von Grob nach Fein

Wir hatten den Fehler gemacht, viel zu schnell visuell zu werden und Layouts auszugestalten - wir haben uns in Details verloren. Nach unserer Einzelkonsultation haben wir bewusst nochmal bei „Null“ angefangen: Wir haben mit groben Wireframes die Struktur neu konzipiert und sämtliche Flows und Funktionen geplant, ohne uns dabei von visuellem Design, Icons und Bildern ablenken zu lassen.

3. Zusammenarbeit

Miro und Figma bildeten die Grundlage für unsere Zusammenarbeit. Während wir anfangs Miro für die ersten Recherchen, Moodboards und Konzepte benutzt haben, arbeiteten wir hauptsächlich in Figma. Wir verfolgten dabei eine Mischung aus Einzelarbeit und gemeinsamen Zoom-Sessions: Gerade in der Anfangsphase arbeitete jeder für sich ein Grobkonzept aus, welches wir dann in längeren Zoom-Sessions besprachen und die interessantesten Ideen zu einem Stand synthetisieren. Gegen Ende haben wir pro „View“ die Arbeit aufgeteilt und ebenfalls in vielen gemeinsamen Sessions besprochen und weiterentwickelt. Obwohl diese Arbeitsweise neu für uns beide war und machmal die Nerven ziemlich blank lagen, kamen wir am Ende zu wirklich guten und hochwertigen Ergebnissen.

4. Aus Kaleidoo wurde Mosaic

Im Laufe unseres Prozesses veränderte sich auch der Name unserer App: Während wir uns am Anfang auf die Entdeckung von einzelnen Momenten konzentrierten und die App „Kaleidoo“ tauften, wurde uns später bewusst, das der Name „Mosaic“ viel treffender war: Unsere App präsentiert dem Nutzer eine „zusammengesetzte“ Erinnerung, welche aus vielen kleinen Momenten besteht - ähnlich den Bruchstücken eines Mosaiks, welches sich zu einem Gesamtbild zusammenfügt.

DESIGN IM DETAIL

1. Discovery View

Wenn der Nutzer Mosaic zum ersten Mal öffnet, sieht er den „Discovery“-Modus, einen Bereich in der App, der dafür zuständig ist, die Beziehungen zwischen den verschiedenen Erinnerungsdateien, die der Benutzer hat, herzustellen.
Die Interface will eine Ähnlichkeit zwischen den Zusammenhängen von Erinnerungen in unserem Kopf und in den Schnittstellen schaffen, die wie Mosaike größere Bilder ergeben, wenn sie zusammengebracht werden.

Der Discovery View ist besonders wichtig, da dieser die Funktion hat, dem Benutzer Zusammenhänge von Inhalten zu zeigen, die er vielleicht noch nicht gesehen hat. Im Video sehen wir zum Beispiel, dass Philipp eine Sammlung von Pokemons gefunden hat, die er vielleicht nicht selbst entdeckt oder erstellt hätte. Der Algorithmus entdeckt diese Zusammenhänge. Ein anderes Beispiel dafür wäre z.B. im Bild oben die „Herz“-Sammlung, hier hat der Algorithmus die gleiche Form in verschiedenen Bildern entdeckt und eine Sammlung erstellt. Diese Sammlungen können auf zwei verschiedene Arten dargestellt werden, als „Special Collection“ oder als „normale Collection“:

Special Collections

Die “Special Collection” funktioniert in mehrfacher Hinsicht: Die visuelle Darstellung der Benutzeroberfläche soll einem Mosaik ähneln, aber auch an die Zusammengehörigkeit der Erinnerungen erinnern. Diese Special Collections kommen zum Beispiel dann vor, wenn ein besonderer Anlass am selben Tag stattgefunden hat, zum Beispiel: ein Geburtstag, eine Reise, eine Party; aber es kann auch ähnlich wie bei der Corona App funktionieren, was bedeutet, dass, wenn Sie einer Person nahe stehen, der Algorithmus versuchen wird, Bilder zu zeigen, die Sie mit der Person erstellt haben, der Sie nahe stehen.

„Normale“ Collections

Diese Art von Sammlung hat nicht das unverwechselbare Aussehen der „speziellen Sammlung“, aber ihre Funktion ist es, den Nutzer mit verwandten Inhalten zu überraschen, an die man vielleicht nicht gedacht hat. Normalerweise wird diese Sammlung auf Zeit, Ort und Person basieren.

Was passiert nun, wenn man in die erstellten Sammlungen klickt, egal ob sie „normal“ oder „speziell“ sind?

2. Memories Detailview Part I

Nach dem Anklicken der vom Algorithmus vorgeschlagenen Sammlung kann der Benutzer über eine  „Segmented Controller“, zwischen der Anzeige der Momente, die laut Algorithmus zu dieser Collection gehören, und anderen verwandten Momenten wechseln. Dies wird dem Benutzer überlassen, um ihn zum Suchen und zur tieferen Interaktion mit den Inhalten anzuregen.

Löschen/Speichern

Über die obere „Auswahl“-Schaltfläche kann der Benutzer Inhalte löschen, die nicht in diese Sammlung gehören oder die er nicht haben möchte, sobald die Erinnerung zur Verknüpfung des Benutzers erstellt wurde. Er kann auf die mittlere Schaltfläche „Zu meinen Erinnerungen hinzufügen“ klicken, um sie als permanente Sammlung zu speichern und zu teilen.

Freigeben

Nutzer können die Erinnerung teilen oder eine Diashow erstellen, falls man andere mit einem kleinen Geschenk überraschen möchte, und über den Plus-Button neben dem Profilbild können Nutzer andere Nutzer einladen, um eine ausführlichere Sammlung der Erinnerung zu erstellen und weitere Inhalte hinzuzufügen.

3. Memories Overview

Sobald der Benutzer eine Erinnerung gespeichert hat, erscheint diese in der Unteransicht „Memories“. Hier kann der Benutzer einen Überblick über alle Sammlungen von Erinnerungen haben, die erstellt oder gespeichert wurden. Jede Sammlung hat eine Reihe von Tags, die dem Algorithmus der App helfen, sie zu kategorisieren und immer wieder nach neuen, unterschiedlichen Inhalten zu suchen, die untereinander in Beziehung stehen könnten.

4. Memories Detailview Part II

Sobald ein Benutzer in die Sammlung geklickt hat, die er wieder besuchen möchte, werden alle Inhalte angezeigt, von Bildern, Texten, Videos und Musik. Der Benutzer kann zwischen der „Mosaik“-Ansicht und der „Full Width“-Ansicht wechseln. Der Unterschied zwischen diesen beiden Ansichten ist die Menge der angezeigten Informationen und die Interaktivität, die man mit dem Inhalt haben kann.

View Modi

In der „Mosaikansicht“ hat der Benutzer einen schnelleren Überblick über den Inhalt, während er in der „Vollbildansicht“ Musik abspielen, Nachrichten lesen und anderen Personen die Bilder und Videos in einem größeren Format zeigen kann.

Related Memories

Benutzer können auf „related“ klicken und Inhalte finden, die mit der Erinnerung in Beziehung stehen könnten. Diese Beziehung geschieht durch verschiedene Parameter des Algorithmus, diese sind: Farbe, Zeit, Ort, Person, Stimmung, etc.

Für unsere nächsten Prototypen der App wollen wir diese Filter für den Benutzer verfügbar machen, um ihm mehr Freiheit und eine reizvolle Erfahrung zu ermöglichen, bei der er tiefer in das eintauchen kann, was seine Erinnerungen besonders macht. Vielleicht erkennen sie durch den Prozess des Wiedererlebens ihrer Erinnerungen und der damit verbundenen Inhalte, dass sie gerne gelbe Dinge fotografieren, dass sie in viele ihrer Nachrichten „Liebe“ schreiben oder dass es eine Periode in ihrem Leben gibt, in der Hip-Hop wirklich ihr Musikstil war. Mosaic will nicht nur ein weiterer Ort sein, an dem Sie Ihre Daten sehen können, sondern es will Ihnen zeigen, was Ihre Erinnerungen so besonders macht.

5. Detailview Moment

Die Benutzer haben auch die Möglichkeit, wie bei Pinterest tiefer in die verwandte Inhalte mit dem ausgewählten Inhalt zu gehen. Wenn der Benutzer ein Bild, einen Text, ein Video oder einen Song auswählt, gelangt er unter weitere verwandte Inhalte, dort kann er auswählen, unter welcher Art von Filter er verwandte Inhalte sehen möchte, dies könnte sein: Ort, Zeit, Person, Farbe, etc. 

Die Detailansicht hat neben dem Filter noch zwei weitere Funktionen, die für Mosaic wichtig sind, nämlich die interaktive Suche und die sogenannten „Reflections“.

Interactive Image Search

Die interaktive Suche ist das Suchsymbol, das, wenn es angeklickt wird, nach erkannten Punkten durch den Algorithmus sucht. Auf dem Bild sehen wir zum Beispiel eine lächelnde Person, eine blaue Jacke und ein Stück Eis.

Der Benutzer wählt dann in den Inhalten, die er interessant findet und Mosaik liefert ihm verwandte Inhalte.
Der gleiche Prozess wird in Videos, Text und Musik stattfinden. Unten finden Sie die interaktive Textsuche erklärt:

Interactive Text Search

Bei der Suche in Texten nach verwandten Inhalten sucht der Algorithmus nicht nach visuellen Punkten, sondern nach Schlüsselwörtern, die von Text zu Text variieren können und dem Benutzer dann verschiedene Arten von Texten liefern, die möglicherweise verwandt sind.

Reflections

Ein weiteres Hilfsmittel, das in Mosaik integriert ist, sind die „Reflections“. Reflections sind Serendipity-Momente, die in jedem Moment während der App auftauchen können. Das Ziel dieser „Reflections“ ist es, dem Benutzer die Möglichkeit zu geben, darüber nachzudenken, wie sich diese Erinnerung anfühlt, wie er denkt oder wie er weitere Informationen hinzufügen kann, die nur durch weitere Texteingaben hinzugefügt werden könnten.

FAZIT

Der Kurs „Mashup“ war nun der zweite Kurs der Veranstalter Ivo Herrman und Paul Thiele, den ich besuchte - und ich muss sagen, dass Ivo und Paul auch hier wieder voll abgeliefert haben: Im Fokus des Kurses stand eine unkonventionelle Methode, wie man sich der Konzeption einer App nähern kann - dieses Vorgehen gab den Projekten einen „Rahmen“, ohne sie einzuschränken. Gerade in der Ideengenerierung stellten die beiden einige interessante Tools und Methoden vor, welche wir in kleineren Gruppen und Breakout-Session bearbeiteten.

Der Kurs war sehr intensiv und lehrreich - nicht nur fachlich sondern auch im Umgang und der Zusammenarbeit mit Menschen. Obwohl durch die Umstände der Corona-Pandemie die Gemüter oftmals etwas gereizt waren, haben wir am Ende nicht nur ein tolles Projekt zusammen erarbeitet, sondern eine ganz besondere Freundschaft gefunden.

Valeria & Philipp