PROJEKTBESCHREIBUNG
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.
HERAUSFORDERUNGEN
Aufwendige Umsetzung eines unbekannten Designtrends erforderte eine zu große Einarbeitung.
Priorisierung von analogen Produkteigenschaften in eine digitale Experience.
LEARNINGS
Neue Designtrends wie „Fluid Design“ benötigen viel Zeit und mindern bei geringer Expertise die Designqualität.
Übertragung analoger Prinzipien ins Digitale stärkt das Verständnis für Nutzererlebnis und Interaktion.
Aufwendige gestalterische Entscheidungen beeinflussen direkt die verfügbare Zeit für andere Projektbereiche.
DAS ZIEL
Die Evernote Desktop-Anwendung weist eine hohe funktionale Dichte und komplexe Screenflows auf, die zu einer erschwerten Orientierung und ineffizienten Nutzung führen. Trotz der Vielzahl an Features wird den Nutzer*innen ein sehr großzügiges Layout angeboten, welche durch den großen Weißraum dennoch die Orientierung erschwert.
Ziel des Redesigns ist die Entwicklung eines reduzierten, klar strukturierten User Interfaces, das zentrale Funktionen priorisiert und durch optimierte User Flows die Usability verbessert.
Copyright by Evernote, 2022
DIE KONZEPTION
Das bestehende Konzept von Evernote wurde auf den Kern analysiert. Dabei stellte sich heraus, dass die aktuelle Desktopapplikation nur wenig intuitiv und zu sehr verschachtelt strukturiert ist, was den Nutzer*innen die Orientierung erschwert.
Das Redesign orientiert sich verstärkt an analogen Vorgehensweise beim Schreiben von Notizen. Dabei werden Notizen in ein Notizbuch geschrieben und anschließend in einem Bücherregal aufbewahrt. Dieses gewohnte, 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 mit Deadlines.
USER FLOW DIAGRAMS
Alle Use Case der App wurde in einem User Flow Diagramm dargestellt. Die verschachtelten Flows der bestehenden Desktopanwendung bieten an verschiedenen Stellen oftmals dieselben Funktionen, was den Nutzer*innen bisher die Orientierung erschwerte.
Daher steht in der Konzeption vor allem die Reduktion des User Flows im Fokus. Ausgehend von den Basisfunktionen wurden weitere Funktionen beschrieben und der Umfang des Redesigns abgesteckt.
links: bestehendes Evernote, rechts: Evernote Redesign
WIREFRAMING
Auf Basis iterativer Skizzen wurden verschiedene Layout- und Keyscreen Varianten entwickelt und schrittweise zu strukturierten Figma Wireframes ausgebaut. Durch User Tests validiert und weiter iteriert, entstand das Minimal Viable Product als Konzeption der neuen Desktopanwendung.
Das finale Konzept wurde in zentrale Use Cases und Key Screens überführt und in einem klickbaren Prototypen umgesetzt und weiter mit Nutzern getestet.
VISUAL DESIGN
Das visuelle Redesign verfolgt das Ziel einer ruhigen, fokussierten Arbeitsumgebung, die Nutzer*innen bei der Organisation und Zielerreichung unterstützt. Eine reduzierte Formensprache, klare visuelle Hierarchien und gezielt eingesetzte Kontraste mit frischen Farben sollen Informationen strukturieren und die Orientierung innerhalb komplexer Inhalte unterstützen.
Das Visual Redesign kombiniert analoge Metaphern mit digitalen Interaktionen, um ein vertrautes und gleichzeitig modernes Nutzungserlebnis zu schaffen. Plastische Formen und Icons werden verwendet, um den analogen Bezug zu festigen und parallel eine moderne, aber doch warme Atmosphäre zu bieten. Sie differenzieren zwischen Navigation, Aktionen und Informationsdarstellung und unterstützen so eine klare Verständlichkeit und Scanbarkeit des Interfaces.
Entsprechend dem Designtrend des Microsoft Fluent UI wird eine visuell räumliche, leicht „materialisierte“ Designsprache aufgegriffen. Charakteristisch sind dabei Effekte wie sanfte Tiefenwirkung, Blur- bzw. Frosted-Glass-Anmutungen sowie subtil gestaffelte Ebenen, die eine klare visuelle Hierarchie erzeugen und die Orientierung innerhalb des Interfaces unterstützen. Dreidimensional anmutende Icons werden für wichtige Informationen und primäre Interaktionen eingesetzt, während Flat Icons sekundäre Funktionen und ergänzende Informationen klar zurückhaltend visualisieren.
