Taskly

Um sicherzustellen, dass wir mit dem Taskly-Team auf derselben Seite stehen, begannen wir mit der Neugestaltung einiger wichtiger Bildschirme. Anschließend stellten wir diese Neugestaltungen für ein Feedback vor, so dass wir die Präferenzen von Taskly einschätzen und die Richtung des Projekts abstimmen konnten. Lassen Sie uns einen genaueren Blick auf unsere wichtigsten Design-Entscheidungen und ihre Auswirkungen werfen.

Eine gut definierte Navigationsstruktur dient als Wegweiser, der die Benutzer durch die Funktionen und Inhalte der App führt. Sie wirkt sich direkt auf die Fähigkeit der Benutzer aus, das zu finden, was sie suchen, und verringert die kognitive Belastung und Frustration. Eine klare und logische Navigation ermutigt die Nutzer, mehr von den Inhalten zu erkunden und sich intensiver mit der App zu beschäftigen.

Wir haben die Navigation vereinfacht und sie intuitiver gestaltet. Dadurch verringerte sich die Zeit, die die Benutzer für die Suche nach den erforderlichen Funktionen aufwenden mussten, und das Gesamterlebnis der App wurde verbessert.

Die Informationsarchitektur (IA) ist von grundlegender Bedeutung für die Schaffung eines benutzerfreundlichen und effektiven digitalen Erlebnisses. Eine solide IA hilft den Benutzern, die gesuchten Informationen mühelos zu finden. Wenn die IA gut aufgebaut ist, können die Benutzer fließend durch die Funktionen der App navigieren und ihre Ziele schneller erreichen.

Wir haben die Darstellung der Informationen neu organisiert, den Inhalt in logische Blöcke unterteilt und die wichtigsten Elemente hervorgehoben. Auf diese Weise konnten die Benutzer die Informationen leicht wahrnehmen, insbesondere in wichtigen Abläufen.

Wir haben die Benutzererfahrung für das Erstellen und Annehmen von Aufgaben komplett überarbeitet und diese Kernabläufe intuitiver und effizienter gestaltet.

Das erste Problem war, dass aus dem alten Design nicht klar hervorging, in welchem Stadium sich der Benutzer befand. War er gerade dabei, eine Aufgabe zu erstellen oder eine anzunehmen? Außerdem waren die Schaltflächen völlig unintuitiv: aktive Schaltflächen hoben sich nicht von inaktiven ab, und das Hauptsteuerelement wurde mit dem Inhalt der Aufgabe verwechselt (z. B. Beschreibungen oder Angebotsvorschläge).

Also haben wir diese beiden wichtigen Abläufe komplett überarbeitet: Das Steuerelement für die Aufgabe wurde deutlicher hervorgehoben, indem es als Sticky-Element markiert wurde (das beim Scrollen fixiert wird). Dies ermöglicht es dem Benutzer nun, schnell zu erkennen, welche Elemente die Hauptfunktionen für die Interaktion mit bestimmten Aufgaben sind. Die Schaltflächen wurden größer und kontrastreicher gestaltet, was die Zugänglichkeit erhöht und die Interaktionen vereinfacht. Wir haben auch die UX-Texte überarbeitet und verbessert, indem wir die Texte handlungsorientierter gestaltet haben.

Wir haben einen einheitlichen visuellen Stil für alle Komponenten geschaffen, um ein professionelles Erscheinungsbild zu gewährleisten. Dazu gehörte die Standardisierung des Kartendesigns und die Sicherstellung der Konsistenz in Typografie, Farben und Abständen.

Wir analysierten alle Kartentypen in der App, wie Aufgaben, Bewertungen, Fragen, Transaktionsverlauf, Angebote, Chats und Benachrichtigungen. Bei dieser Analyse stellten wir ein Problem fest: Die Elemente auf den verschiedenen Karten – Fotos, Namen, Text, Beschriftungen – waren visuell nicht aufeinander abgestimmt. Dadurch entstand ein Gefühl von Chaos, und die Benutzer fanden es schwierig, sich auf der Oberfläche zurechtzufinden. Wir lösten dieses Problem, indem wir die Elemente in Bezug auf Struktur, Stil und Typografie vereinheitlichten. Durch die Vereinheitlichung von Farben und Größen konnten wir die visuelle Harmonie erheblich verbessern und den Benutzern helfen, bestimmte Arten von Informationen schnell zu erkennen.

Um den Zugang zu erleichtern, haben wir außerdem eine spezielle Komponentenseite eingerichtet. Auf dieser Seite befinden sich alle Hauptkomponenten: Karten, Schaltflächen, Textfelder, Benachrichtigungen und mehr. Dank der Figma-Varianten und Komponenteneigenschaften kann jede Komponente leicht geändert werden. So können Sie beispielsweise in einer Karte ein Symbol aktivieren oder deaktivieren, Text hinzufügen und den Hintergrund oder die Beschriftung mit nur wenigen Klicks ändern. Dies ermöglicht eine schnelle Anpassung der Elemente an verschiedene Anwendungsfälle, ohne dass neue Komponenten erstellt werden müssen, was eine große Zeitersparnis bedeutet.

Die Erstellung wiederverwendbarer Komponenten war nicht nur aus Gründen der Designkonsistenz, sondern auch der Kosteneffizienz notwendig. Änderungen an einer Komponente werden automatisch überall dort aktualisiert, wo sie verwendet wird, was die Wartung vereinfacht und zukünftige Kosten reduziert.

Wir fügten animierte Übergänge zwischen den Bildschirmen hinzu, um die Navigation innerhalb der App flüssiger zu gestalten. Diese Animationen helfen den Nutzern, sich besser im Prozess zu orientieren und eine Verbindung zwischen den verschiedenen Interaktionsphasen innerhalb der App zu spüren. Fließende Übergänge reduzieren die Sprünge zwischen den Bildschirmen und machen das Nutzererlebnis angenehmer, was besonders für Nutzer auf mobilen Geräten wichtig ist.

Außerdem haben wir Mikrointeraktionen implementiert, um die Interaktivität zu erhöhen und das Gefühl zu vermitteln, dass eine Aktion abgeschlossen ist. Nach dem erfolgreichen Erstellen einer Aufgabe sieht der Benutzer beispielsweise ein animiertes Häkchen, das den Erfolg anzeigt und bestätigt, dass die Aktion ausgeführt wurde. Dies schafft einen Moment der Zufriedenheit und gibt dem Benutzer eine ausdrückliche Bestätigung, dass die Aufgabe erfolgreich erstellt wurde.

Das Prototyping bietet die Möglichkeit, den Fluss der Benutzerinteraktionen schon früh im Prozess zu testen, wodurch kostspielige Umgestaltungen und Iterationen während der Entwicklung minimiert werden. Außerdem hilft es den Designern, sich in die Lage der Benutzer hineinzuversetzen und so deren Bedürfnisse und Verhaltensweisen besser zu verstehen, was zu einem nutzerzentrierten Design führt.

Die Erstellung eines interaktiven Prototyps hilft uns dabei, Probleme bei der Produktnavigation oder andere Probleme bei der Benutzerfreundlichkeit zu erkennen, die wir sonst vielleicht übersehen würden.

Für dieses Projekt erstellten wir einen Prototyp, der die primären und sekundären Bildschirme skizzierte, um zu sehen, wie die Benutzer durch die App navigieren würden. So konnten wir uns ein klares Bild von der gesamten Benutzererfahrung machen und zeigen, wie die Benutzer bei jedem Schritt mit der App interagieren. Dieser Ansatz stellte sicher, dass das Endprodukt wirklich den Bedürfnissen und Erwartungen der Taskly-Benutzer entsprach.

Eine gut organisierte Figma-Datei kann die Erfahrung des Entwicklers erheblich verbessern, indem sie das Hin und Her minimiert und eine sofortige Umsetzung ermöglicht. Wir haben das Design in Figma so organisiert, dass ein reibungsloser Arbeitsablauf für alle Beteiligten gewährleistet ist. Wir wollten, dass Taskly das Projekt leicht navigieren und unseren Fortschritt überwachen kann.

Wir erstellten mehrere Kategorien, um die Entwürfe je nach ihrem Status klar zu trennen: Bildschirme in der Entwicklung, Bildschirme zur Überprüfung durch den Kunden und Bildschirme für die endgültigen, genehmigten Versionen. Zusätzlich zum Hauptdesign wurde eine separate Seite für Animationen erstellt, auf der alle dynamischen Elemente und Prototypen übersichtlich gruppiert und zur Übergabe an die Entwicklung bereit waren.

Durch die Straffung des Design-zu-Entwicklungsprozesses können Unternehmen Zeit und Geld sparen. Taskly profitierte von dieser effizienten Übergabe, indem es seine Entwicklungszyklen beschleunigte und die Zeit bis zur Markteinführung verkürzte.