EVERNOTE REDESIGN
SEMESTER: IG4
KURS: APPLICATION DESIGN 2
PARTNER: A. JANS
Notizen sind allgegenwärtig. Mittlerweile gibt es unzählige Möglichkeiten Notizen zu erstellen. Ob ganz analog von Hand oder gleich digital, damit man die Notizen direkt weiterverwenden kann. Durch die Betrachtung verschiedenster Scratchpads lässt sich feststellen, dass immer wieder versucht wird, Elemente aus dem analogen Alltag in die digitalen Anwendungen zu übertragen. Diese Entwicklung möchten wir mit unserem Redesign der Desktopanwendung von Evernote aufgreifen und die Vorteile eines analogen und klassischen Notizbuchs aufgreifen und im Digitalen durch freiere Möglichkeiten fortschreiten.
DAS ZIEL
Bereits auf den ersten Blick lässt sich beim Screenflow von Evernote eine beachtliche Tiefe feststellen. Die einzelnen Funktionen erfordern eine große Anzahl an Screens um die User*innen an ihre Ziel zu bringen. Dabei versucht Evernote alle Funktionen auf einen Blick darzustellen. Der verfügbare Platz auf dem doch recht großen Desktopscreen wird von Evernote großzügig genutzt, was die Orientierung der User*innen zu ihren Ungunsten erschwert. Optimal für das Redesign von Evernote wäre also ein reduziertes User Interface, mit den wichtigsten Informationen an der richtigen Stelle, basierend auf reduzierten Userflows um somit die Usability zu erhöhen.
DIE KONZEPTION
Das bestehende Konzept von Evernote wurde auf den Kern analysiert. Dabei stellten wir fest, dass die aktuelle Desktopapplikation nur wenig intuitiv und zu sehr verschachtelt ist. Die Orientierung fällt den User*innen schwer. Diese Hauptprobleme lösten wir mit einem neuen Ansatz.
Die neue App orientiert sich nun an der analogen Vorgehensweise beim Schreiben von Notizen. Dabei werden Notizen in ein Notizbuch geschrieben und anschließend in einem Bücherregal aufbewahrt. Dieses analoge Prinzip ergänzten wir mit digitalen Features, wie verschiedenen Markierfunktionen in einer Notiz, einem Vollbildmodus zum Lesen der Notizen, sowie einem Kalender für anstehende Events und einer To Do - Liste.
Dabei war es das Ziel in der App, mit der man Abläufe plant und Notizen macht, gleichzeitig einen Überblick über anstehende Ereignisse zu behalten.
FLOWCHARTS
Für jeden Use Case der Desktopanwendung wurde ein Flowchart erstellt. Dabei ließ sich schnell feststellen, dass die Flowcharts der einzelnen bestehenden Use Cases der Evernote Desktopanwendung vielschichtig sind und für eine bestimmte Aufgabe gleich mehrere Lösungen bieten.
So verlieren User*innen den Überblick, welche Aufgabe man auf welchem Screen erledigen kann. Dies möchten wir ausräumen, indem wir direkt bei der Ursache ansetzen: Dem Screenflow. Dieser soll erheblich reduziert und ausgedünnt werden. Dabei soll der Fokus auf den Basisfunktionen liegen. Im nächsten Schritt wurden für jeden bestehenden Use Case neue Flowcharts erstellt, um den kommenden Umfang des Redesigns besser abschätzen zu können.
links: bestehendes Evernote, rechts: Evernote Redesign
WIREFRAMING
Zunächst wurden aus den groben Skizzen Varianten gebildet, welche in einem iterativen Prozess verfeinert wurden. Nach und nach wurden die Skizzen Stück für Stück in Wireframes umgesetzt und weitere Varianten gebildet. Dabei entstand am Ende der Konzeptphase ein “Minimal Viable Product”, welches unser Grundkonzept bildet.
Dieses konnte als Clickdummy durch User Tests mit Ausnahme kleinerer Verbesserungen validiert werden. Anschließend wurde ein Teil des verbesserten MVP in vier Use Cases und fünf Keyscreens mit Figma (Visual Design) und Protopie (Prototyp) umgesetzt.
VISUAL DESIGN
Evernote soll eine Wohlfühlatmosphäre bieten, welche die User*innen bei der Zielerreichung unterstützt und Informationen unaufdringlich, aber dennoch klar übermittelt. Warme Farben sollen dabei eine angenehme Umgebung bieten, während frischere Farben an wichtigen Stellen Akzente setzen. Reduzierte Formen stellen die Informationen in den Vordergrund und bieten je nach Information einen definierten Informationsbereich, welcher nicht zusammengehörige Informationen voneinander abgrenzt, aber Zusammengehörige gegenseitig ergänzen lässt und Bezüge herstellt.
Dabei werden plastische Formen und Icons genutzt, um den analogen Bezug zu festigen und parallel die moderne, aber doch warme Atmosphäre zu erhalten. Um unsere moderne aber nicht klinische Designsprache erfolgreich umzusetzen, wurden viele Varianten gebildet und ständig evaluiert und die visuelle Wirkung dieser Varianten analysiert.
Für grundlegende Bedienfunktionen der Applikation, wie auch die Navigation, finden Flat Icons Verwendung. Sie sorgen für eine klare und distanzierte Beziehung zu den Funktionen und bauen zusammen mit den Fluent Icons einen Kontrast auf. Fluent Icons werden für Handlungen und wichtige Informationen verwendet, da sie diese deutlicher als Flat Icons illustrieren und die analoge Komponente verstärken.
