Logo

Fallstudie: Neugestaltung von Todoist für Android

Kategorie:
Erstellt am: 3. Mai

Todoist ist eine To-Do-Listen-App, auf die sich 25 Millionen Menschen jeden Tag verlassen, um ihr Leben zu organisieren. Als Teil der Ziele des Doist-Designteams für 2021 wollten wir die Todoist-Android-App neu gestalten, um von den neuesten Google Material Design-Richtlinien zu profitieren.

In diesem Beitrag berichten wir über die Designentscheidungen und -prozesse, die hinter der Neugestaltung der Todoist Android-App für Material Design stehen. Wir untersuchen die Praktiken der Zusammenarbeit des Design- und Android-Teams, die das App-Update zum Leben erweckt haben, das mit dem Material Design Award 2021 in der Kategorie Großbildschirme ausgezeichnet wurde. Fangen wir an!

Gelegenheit

Als wir mit dem Projekt begannen, war unsere Design-Implementierung auf Android reif für eine Generalüberholung. Der letzte Meilenstein der Neugestaltung auf Android wurde nach der Veröffentlichung der ersten Material Design-Richtlinien im Jahr 2016 eingeleitet. Seitdem hat das Team erfolgreich an kontinuierlichen Verbesserungen der Android-App gearbeitet, aber wir sahen die Gelegenheit, Todoist auf Android auf einer ganzheitlicheren Ebene zu verbessern.

Wir machten uns daran, Instanzen älterer UI-Komponenten, Farben und Textstile zu bereinigen und sie mit den neuesten Material Design-Komponenten zu aktualisieren. Wir stellten fest, dass einige Interaktionen und Navigationsmuster nicht mehr mit dem übereinstimmten, was die Benutzer auf neueren Android-Geräten erwarteten, und wollten dieses Erlebnis modernisieren. Mit Blick auf neue Hardware- und Software-Änderungen machten wir uns daran, das Erlebnis auf größeren Telefonen und Tablets noch besser zu machen, damit Todoist die Vorteile der neuesten Gerätegeneration voll ausschöpfen kann. Material 2 und 3 boten einen unglaublichen neuen Rahmen, um das aktuelle App-Erlebnis neu zu überdenken. Mit diesem Gedanken im Hinterkopf haben wir uns daran gemacht, herauszufordern, wie eine moderne Android-App aussehen sollte und das Standard-Benutzererlebnis zu erneuern.

Lösung

Das Team setzte sich das Ziel, unsere Todoist Android-App neu zu gestalten und sie zur am besten gestalteten Produktivitäts-App auf Android zu machen. Das Projekt war ehrgeizig und sollte mehrere Monate in Anspruch nehmen. Während der Arbeit an dem Projekt setzten wir uns die folgenden Ziele:

  • Überprüfung der aktuellen Implementierung und der älteren Entwurfsspezifikationen.
  • Studieren Sie die neuesten Material Design Guidelines und beurteilen Sie, was für unser Projekt relevant ist.
  • Recherchieren Sie großartige Material Design-Anwendungen und Fallstudien und lernen Sie von deren Ausführung.
  • Definieren Sie die neue Todoist Android App Designsprache und dokumentieren Sie die Änderungen.
  • Design und Entwicklung arbeiten zusammen, um die vorgeschlagene Lösung und Implementierung zu bewerten.
  • Testen Sie eine frühe Version der neuen App intern, um Feedback zu sammeln und Anpassungen vorzunehmen.
  • Laden Sie Beta-Tester zur neuen App ein, um Feedback zu sammeln und Anpassungen vorzunehmen.
  • Verfeinern Sie die App und beheben Sie die wichtigsten Probleme, bevor Sie sie der Öffentlichkeit zugänglich machen.

Überprüfung

Das Projekt begann damit, dass wir die aktuelle Implementierung der Todoist-Android-App überprüften und festhielten, welche Bereiche behoben werden mussten und was auf dem neuesten Stand war. Während der Überprüfung machten wir Screenshots von der App-Implementierung als Referenz. Auf diese Weise konnten wir den aktuellen Zustand der App leicht erkennen und mit den neuen Designvorschlägen vergleichen, die erstellt werden sollten. Nach Abschluss des Überprüfungsprozesses hatten wir einen umfassenden Überblick über den aktuellen Zustand der App und die Änderungen am Layout, an den Komponenten und am Styling, die wir vornehmen wollten.

Studie

Wir setzten das Projekt fort, indem wir die neuesten Material Design Guidelines studierten und die Komponenten und Praktiken bewerteten, die für Todoist am wichtigsten waren.

Als das Projekt im Februar 2021 begann, war Material 2 die neueste Version des Designsystems. Da Material 2 bereits seit einiger Zeit auf dem Markt war, gingen wir davon aus, dass auf der Google I/O im Mai 2021 Designänderungen an Material angekündigt werden würden. Anstatt zu warten, weil wir davon ausgingen, dass die Änderungen iterativ sein würden, haben wir unsere Arbeit vorangetrieben.

Wir identifizierten 25 Komponenten und UI-Muster, die wir in der gesamten App ändern wollten. Die Änderungen umfassten Schaltflächen, Formulare, Menüs, Blätter, Navigationsschublade, App-Leiste, Systemleisten, Text- und Farbstile und vieles mehr. Wir begannen mit der Erstellung einer Tabellenansicht in einem Dropbox Paper-Dokument mit den Komponentenänderungen und Verweisen auf die Material Design Guidelines von Google.

Diese Komponentenliste diente als Ausgangspunkt für die Diskussion, um den Umfang und die Komplexität der Änderungen zu planen. Enge asynchrone Diskussionen zwischen dem Design- und dem Entwicklungsteam in Twist und Dropbox Paper-Kommentaren halfen uns, Entscheidungen über Umfang und Komplexität frühzeitig zu treffen und eine solide Grundlage für das Projekt zu schaffen.

Forschung

In der ersten Material Design-Studie haben wir auch inspirierende Material Design-Apps, Material-Studien, Play Store-Apps und Google Workspace-Apps untersucht, um von deren Ausführung zu lernen.

Wir begannen mit der Untersuchung der Material Design Award Winners 2020 und testeten die vorgestellten Produkte. Die vorgestellten Gewinner haben eine gute Balance zwischen der Umsetzung der Material Design Guidelines und der Beibehaltung der eigenen Produktmarke innerhalb des Systems gefunden. Dieses Gleichgewicht zwischen den Richtlinien von Google und der Marke Todoist war auch für uns entscheidend, und so haben wir uns bemüht, diese Mischung in der Arbeit zu finden, die wir im Rahmen des Projekts entwickelt und umgesetzt haben.

Zusammen mit den MDA-Gewinnern haben wir uns die Material Studies angesehen, die Google erstellt hat, um zu zeigen, wie Apps unter Anwendung von Branding und Material Design Richtlinien aussehen können. Es war eine großartige Referenz, um zu sehen, inwieweit Komponenten angepasst werden können, während die Kernprinzipien der Plattform beibehalten werden. Insbesondere die Reply-Fallstudie bot uns wertvolle Einblicke, da ihr Inhaltstyp und ihr Layout Todoist am nächsten kamen. Sie zeigte, wie Komponenten wie die App-Leiste, die Navigationsschublade und große Bildschirmlayouts funktionierten, während sie angepasst wurden.

Wir setzten unsere Recherche fort, indem wir im Google Play Store nach inspirierenden App-Beispielen suchten. Google Tasks, Press, Periodic Table und Kayak stachen für uns heraus, da die Qualität der Apps mit der von uns angestrebten Erfahrung vergleichbar war.

Irgendwann später im Projekt, als Material You veröffentlicht wurde (mehr dazu später), stießen wir auf den Blogbeitrag zu den Google Workspace-Apps, in dem eine Vorschau auf die Material-3-Änderungen gegeben wurde, die Google an seinen eigenen Produkten vornahm. Er bot einen großartigen Einblick in das, was noch kommen würde, bevor die Material 3 Design Guidelines offiziell veröffentlicht wurden. Dieser Beitrag löste neue interne Diskussionen und weitere Design-Erkundungen aus, die wir für zukünftige Todoist Android Updates in Betracht zogen.

Spezifikation

Als wir begannen, die neue Designsprache für die Todoist-Android-App zu definieren und die Änderungen zu dokumentieren, entschieden wir uns dafür, ein Design-Framework zu erstellen, das sich auf die Erstellung von Komponenten konzentriert, anstatt jeden Bildschirm der App zu entwerfen. Auf diese Weise konnten wir das Designsystem konsistent in der App anwenden. Dazu verwendeten wir die zuvor definierte Komponentenliste, die wir während des Überprüfungs- und Studienprozesses erstellt hatten.

Es wurden Kernbildschirme aus verschiedenen Bereichen der App ausgewählt, um zu demonstrieren, wie die Komponenten angewendet werden können. Wir wählten unter anderem die Todoist-Projektansicht, das Menü der Navigationsschublade, den Bearbeitungsbildschirm der Projektansicht, die Einstellungen und die Projekt-Detailansicht. Diese Bildschirme gaben uns einen guten Überblick darüber, wie Schaltflächen, Formulare, Schubladen, Listen und andere Komponenten zusammen und in verschiedenen Zuständen funktionieren würden: ausgewählt, gedrückt, deaktiviert, etc.

Während des Projekts stellten wir unser Doist-Designsystem auf Figma um und begannen mit der Erstellung unserer ersten Komponenten in der neuen Doist Product Android Library. Wir begannen mit der Verwendung einiger Komponenten aus der Material Design UI kit - Components Bibliothek aus der offiziellen Google Figma Ressourcendatei und fügten sie zu unserem Doist Design System hinzu. Dann haben wir die Produkt Android Library Datei mit unseren Todoist-spezifischen Komponenten wie Aufgabenliste & Board-Ansichten, Detail-Ansichten, Sheets, Farben, Typografie, etc. aufgebaut.

Wir fuhren damit fort, Farb- und Typografieänderungen zu dokumentieren, die auf den Material Design-Richtlinien basierten. Das Designteam entschied sich für die Implementierung eines neuen Design Token Frameworks, das dieselben Werte zwischen unserem Designsystem und der Entwicklungsimplementierung austauschen würde. Das Entwicklungsteam gab die Werte der aktuellen Implementierung aus und das Designteam analysierte, welche Werte benötigt wurden und welche zusammengeführt, geändert oder gelöscht werden konnten. Daraus ergab sich das neue Farb- und Typografiesystem für Design Token, das wir dann dokumentierten und mit dem Team diskutierten, um es zu implementieren. Im weiteren Verlauf des Projekts freuten wir uns über die Einführung eines ähnlichen Token-Systems durch Material 3 in den neuesten Richtlinien, was unsere Überlegungen und Prinzipien hinter dem neuen Designsystem bestätigte.

Die Designdokumentation wurde erweitert und enthielt weitere Edge-Case-Mockups, die neben dem Designsystem eingesetzt werden konnten. Wir dokumentierten verschiedene responsive Bildschirm-Erfahrungen zwischen Telefonen und Tablets im Vergleich zur vorherigen Implementierung. Es wurden zusätzliche Abschnitte erstellt, um die Bewegungen zu dokumentieren, die für bestimmte Komponenten und Bildschirme verwendet werden sollten, indem auf bestehende Beispiele aus den Material Design-Richtlinien verwiesen wurde oder eigene Bewegungen in Principle und After Effects prototypisiert wurden. Die Design-Spezifikation befasste sich auch mit haptischem Feedback, das auf Touch-Zielen erscheinen sollte, wie der dunkle Modus in den neuen Komponenten funktionieren sollte, die Dokumentation von Todoist-Themen innerhalb der neuen Designsprache und mehr.

Entwurf Implementierung

Bei Doist besteht der Vorteil des Teams darin, dass die teamübergreifende Zusammenarbeit bereits in der Zusammensetzung des Teams angelegt ist. Designer, Entwickler, Support und Produktmanager arbeiten in einem Team zusammen, um das Projekt zu realisieren. Diese enge Zusammenarbeit von Anfang an ist der Schlüssel zur Überbrückung der Kluft zwischen Umfang, Schätzungen, Design, Entwicklung und Lieferung. Das Team diskutierte täglich seine Ergebnisse und erarbeitete gemeinsam den besten Aktionsplan.

Die Designer begannen mit der Erstellung von Komponenten in Figma und teilten sie mit den Entwicklern in Dropbox Paper. Wir verwendeten Screenshots, um die aktuelle Implementierung neben den neuen Designs zu dokumentieren, und verknüpften sie mit den Standardkomponenten von Google Material Design. So konnte das Team alle Referenzen an einem Ort vergleichen. Die Entwickler teilten ihr Feedback mit, Anpassungen wurden gemeinsam erarbeitet, während die Entwürfe iteriert wurden.

Die am Projekt beteiligten Designer tauschten sich wöchentlich mit dem Rest des Designteams in einem Twist-Thread über ihre Arbeit aus. Hier wurden Details zu den Entwürfen besprochen, Alternativen entworfen und Pläne für das große Ganze gemacht. Bei den Designbesprechungen wurden Themen wie die Platzierung des FAB (Floating Action Button), Themenoptionen, die Verwendung von Akzentfarben für Komponenten, die Konsistenz mit anderen Plattformen, Navigationsoptionen und Schattenerhöhungen angesprochen. Nach gründlichen Diskussionen und der Präsentation alternativer Mockups versuchte das Designteam, das richtige Gleichgewicht zwischen Material Design und den Markenrichtlinien von Todoist zu finden. Das Entwicklungsteam, das ebenfalls an den Design-Reviews beteiligt war, gab sein Feedback zu der Lösung und wies frühzeitig auf die technischen Komplexitäten hin.

Schließlich wurde das Design stabilisiert und die Konsistenzen zwischen den Komponenten und Mockups aktualisiert. Die Entwurfsspezifikation wurde auf dem neuesten Stand gehalten, so dass das Entwicklungsteam stets die neuesten Entwürfe in Figma überprüfen konnte.

Prüfung

Sobald der Entwicklungsprozess begann, stellte das Android-Team erste Screenshots und Videos in Twist-Threads zur Verfügung, während sie die Designvorgaben umsetzten. Diese Praxis ermöglichte es uns, die App-Implementierung früh und oft zu überprüfen. Die Designer konnten die Entwicklungsarbeit überprüfen und Feedback in Twist geben, was zu einer qualitativ hochwertigen Umsetzung führte. Neben den Diskussionen in Twist richtete das Team ein Todoist-Projekt ein, um laufende Probleme zu verfolgen und Bugs zu beheben. Die Designer protokollierten neue Probleme, die Entwickler lösten sie und stellten die neue Implementierung den Designern zur Überprüfung zur Verfügung.

Als das Team die erste stabile Version der Android-App hatte, teilten wir sie intern bei Doist, um mehr Einblick und Feedback zu bekommen. Andere Doister konnten über ein Feature Flag, das in den App-Einstellungen aktiviert werden konnte, auf das Redesign zugreifen und die neue Version so lange testen, wie sie wollten. Das Feature-Flag-System ermöglichte es den Leuten, uns frühzeitig Feedback zu unseren Designentscheidungen zu geben und Fehler zu melden. Das Feedback wurde vom gesamten Team über einen speziellen Twist-Thread übermittelt, und die Designer und Entwickler konnten während der aktiven Projektumsetzung besprechen, wie das Feedback am besten umgesetzt werden kann.

Nachdem wir die App-Implementierung weiter verfeinert und frühes Feedback berücksichtigt hatten, öffneten wir das App-Update für unsere Beta-Nutzer. Hier hatten die Nutzer Zugriff auf das neue Android-Redesign und konnten uns Feedback geben. Unser Support-Team sammelte das Feedback und teilte es mit uns in einem speziellen Twist-Thread. Das Team analysierte jeden Kommentar und suchte nach Mustern, um das Nutzererlebnis zu verbessern.

Im Rahmen dieser Optimierungen haben wir die Funktionsweise der unteren Leiste und der Navigationsschublade geändert. Einige Benutzer berichteten, dass sie mit der Funktionsweise der neuen unteren Navigationsleiste und der Menüschublade nicht zufrieden waren. In der ersten Version war die Schublade beim Öffnen halb ausgeklappt und musste nach oben gestrichen werden, um wieder ausgeklappt zu werden und die vollständige Inhaltsliste zu sehen. Dies war für einige Nutzer ein Problem, da es langsamer war, den Inhalt unterhalb der Liste zu erreichen. Daher haben wir beschlossen, die Schublade beim Öffnen standardmäßig vollständig anzuheben. Außerdem haben wir es einfacher gemacht, die Navigationsschublade zu öffnen, indem wir von der unteren Anwendungsleiste nach oben schieben. Dies war eine kleine Abkürzung, aber sie ermöglichte es den Nutzern, schneller zu ihren Inhalten zu gelangen.

Material Sie

Während wir uns in der Testphase befanden und kurz davor waren, das Projekt abzuschließen, stellte Google Material You vor, und einige Zeit später wurden die Material 3-Richtlinien veröffentlicht. Mit den neu angekündigten Ressourcen gingen wir zurück, um die neuesten Richtlinien und Referenzen zu studieren, die wir finden konnten, um zu sehen, wo das Redesign der Todoist Android-App hineinpasst und welche Anpassungen wir jetzt oder in Zukunft vornehmen müssen.

Dynamic Color war eine große neue Funktion, die als Teil des Material You-Updates angekündigt wurde. Da Todoist viele verschiedene Themen unterstützt, schien das Material You Dynamic Color Feature gut zu unserem Produkt zu passen. Wir haben uns entschieden, diese Funktion zu priorisieren und Dynamic Color für helle und dunkle Themes als Teil unserer Todoist-Theme-Einstellungsoptionen zu implementieren.

Um Dynamic Color zu implementieren, erstellte das Entwicklungsteam zunächst einen Demo-Prototyp, der das Dynamic Color-System nutzte und zeigte, wie wir aus einer Reihe von Farboptionen auswählen konnten, die das System auf der Grundlage der Tapetenauswahl definierte. Von da an versuchten wir, das Systemverhalten in unsere Design-Mockups zu integrieren. Wir entwarfen eine Reihe verschiedener Farbmockups und Komponenten, um zu sehen, welche Farben zu welchen Komponenten passen könnten. Wir haben dann ein Farbsystem entwickelt, das für die Todoist-App und die neuen Themen funktioniert. Diese neuen Dynamic Color-Themen würden neben den aktuellen Themenoptionen in den Einstellungen der Todoist-App erscheinen. Von hier aus konnten die Nutzer zwischen den Dynamic Color Light und Dark Themes wählen.

Zusammen mit Dynamic Color hat das Team auch eine anpassbare untere App-Leiste entwickelt, die es den Nutzern ermöglicht, die App so einzurichten, wie es für ihre Arbeitsabläufe am bequemsten ist. Die Position der Schaltfläche "Dynamisches Hinzufügen" kann in die Mitte, die linke oder die rechte Ecke des Bildschirms verlegt werden. Die Reihenfolge der Menü-, Such- und Benachrichtigungsschaltflächen kann so angepasst werden, dass sie am besten zur Ergonomie der dominanten (linken oder rechten) Hand des Benutzers passt und seine Navigationsmuster optimiert.

Start

Nachdem das kritische Beta-Feedback berücksichtigt und Stabilitätsverbesserungen vorgenommen worden waren, fühlte sich das Team bereit, die neue Todoist Android-App für die Öffentlichkeit freizugeben. Das Team protokollierte die Probleme, die nicht sofort behoben werden konnten, für zukünftige Überprüfungen und Updates.

Das Design- und Marketingteam bereitete den Start vor, indem es das What's New-Banner und die Texte erstellte, die beim Start des Updates in der App angezeigt werden. Das Doist-Marketingteam erstellte außerdem Versionshinweise und verbreitete die Ankündigung der App-Aktualisierung auf unseren sozialen Kanälen. Das Team für Marken- und Produktdesign arbeitete zusammen, um individuelle Bilder und Texte zu erstellen, die die Projektarbeit auf einfache und schöne Weise zusammenfassen.

Was kommt als Nächstes? Material 3

Nach dem erfolgreichen Start der neu gestalteten Todoist for Android App, kontaktierte Google Doist, um bekannt zu geben, dass Todoist als Gewinner des Material Design Award 2021 in der Kategorie Großbildschirm ausgewählt wurde. Das Team war begeistert, für seine harte Arbeit anerkannt zu werden und es fühlte sich an, als hätten wir das Ziel erreicht, das wir uns gesetzt hatten.

Intern studierten und diskutierten Designer und Entwickler weiterhin die Material 3-Updates. Das Designteam begann mit der Erforschung von Mockups und Designänderungen, die von Material 3 und Googles Workspace-App-Updates inspiriert waren. Einige unserer aktuellen Todoist-Untersuchungen beinhalten die Änderung des FAB-Stylings, die Aktualisierung der App-Leiste, die weitere Entfernung von Höhenschatten und mehr. Hier ist eine Vorschau darauf, wie ein zukünftiges Todoist-Update aussehen könnte.

Wir hoffen, dass diese Einblicke in den Designprozess von Todoist und die Praktiken der Zusammenarbeit Ihr Interesse geweckt haben. Vielen Dank fürs Lesen und bleiben Sie dran für zukünftige Design-Updates!

Mitbringsel

  • Studieren Sie die Material-Richtlinien, Material Design-Gewinner, Material-Studien und Google Workspace-Apps, um fundierte Designentscheidungen zu treffen, wenn Sie Ihr nächstes Produkt oder App-Update gestalten.
  • Bewerten Sie, welche Material Design-Komponenten und -Praktiken für Sie geeignet sind, und implementieren Sie sie in Ihr Produkt.
  • Bringen Sie die Material Design-Richtlinien sorgfältig mit Ihren Markenrichtlinien in Einklang, um eine einzigartige und konsistente Erfahrung zwischen Ihrem Produkt und der Plattform, auf der es läuft, zu schaffen.
  • Arbeiten Sie frühzeitig und häufig mit Ihren Android-Entwicklern zusammen, um App-Updates effizient bereitzustellen und die Qualität der Designimplementierung zu verbessern.
  • Verwenden Sie Designkomponenten und bauen Sie ein Designsystem zusammen mit praktischen Mockups auf, um eine effiziente Designspezifikation zu erstellen.
  • Überlegen Sie, wie die neuesten Android-Funktionen in Ihr Produkt passen und welche die größte Wirkung auf Ihre Nutzer haben, bevor Sie sich für deren Implementierung entscheiden.
  • Testen und prüfen Sie Builds mit Ihrem internen Team und externen Betanutzern, um wertvolles Feedback zu erhalten und Anpassungen vorzunehmen, bevor Sie sie der Öffentlichkeit zugänglich machen.
  • Erstellen Sie Ankündigungsgrafiken, um Ihre neueste App oder Funktionsaktualisierung zusammen mit einer klaren Beschreibung zu präsentieren, die Sie in der App und in den sozialen Medien teilen können.
Copyright © 2022 webmousedesign.de
crossmenu