„Man muss die Zeit investieren, aber noch wichtiger ist das Urteilsvermögen. Die Richtung, in die man sich bewegt, ist wichtiger als die Geschwindigkeit, die man fährt.“
— Naval Ravikant, Mitbegründer von AngelList
Zwischen dem 2. und 9. März nahm workstreams.ai am ersten offiziellen Slack App Virtual Hackathon teil. Unser Ziel war es, unsere bestehende Slack-App mit modalen Dialogfeldern und dem Home-Tab zu erweitern. Diese Block Kit-Oberflächen verbessern die Produktivität und Entscheidungsfindung der App-Nutzer. So haben wir es gemacht.
Der Beweggrund
Beginnen wir damit, wer wir sind und warum die Entwicklung neuer Funktionen für Slack so wichtig für uns ist. Unsere Anwendung verbindet agile Kanban-Boards und andere wichtige Aufgabenmanagement-Tools mit der internen Kommunikation eines Unternehmens – für mehr Transparenz, klarere Prioritäten und besser organisierte Möglichkeiten der Zusammenarbeit.
Als wir vor ein paar Jahren mit der Entwicklung von workstreams.ai als Slack-first-Anwendung begannen, glaubten wir, dass die Zukunft der Arbeit dort stattfindet, wo Menschen am effektivsten kommunizieren können. Rückblickend betrachtet, hätte unsere Entscheidung für Slack als beste Plattform nicht besser sein können.
Rund 30.000 Teams haben sich dafür entschieden, mit workstreams.ai in Slack zu arbeiten, da wir das Aufgabenmanagement nahtlos in Slack-Konversationen integrieren, wodurch die Nutzer effizienter arbeiten und sich besser abstimmen können.
Beim Hackathon bestand unsere Aufgabe darin, das Versprechen eines nahtlosen Aufgabenmanagements zu erfüllen. Um dies zu erreichen, wollten wir Block Kit nutzen, um den Nutzern unserer App eine bessere Entscheidungsfindung mit einer personalisierten Aufgabenübersicht zu ermöglichen.
workstreams.ai adaptiert stets schnell die neuesten Slack-Funktionen, vor allem da unsere Nutzer eine symbiotische Beziehung zwischen unserer App und Slack erwarten. Dieser Hack war also der perfekte Moment, um Transparenz, Flexibilität und Produktivität für die vielen Menschen, die täglich nahtlos zwischen unserer App und Slack arbeiten, drastisch zu verbessern.
Nachdem wir unsere App auf Slack neu bewertet hatten, entschieden wir uns für folgende Optimierungen:
- Einen Home-Tab für unsere Slack-App erstellen
- Dialoge zu Modals aufwerten
- Checklisten und verbesserte Bearbeitung für workstreams.ai-Aufgaben in Slack anzeigen
- Granulare Berechtigungen für ein sichereres und zuverlässigeres App-Erlebnis einrichten
Die Methode
Bei diesem Hack konzentrierten wir uns in erster Linie darauf, unsere App-Startseite von Grund auf neu zu entwickeln. Wir haben eine enge und kontinuierliche Feedbackschleife zwischen Design und Entwicklung eingerichtet, damit wir schnell reagieren können.
Der Gestaltungsprozess
Unsere Designer haben eine Kombination aus dem Block Kit Builder von Slack und traditionellem Whiteboarding verwendet, um die Nutzeroberfläche des Home-Tabs zu entwerfen – einschließlich der angrenzenden Modals, Menüs und der aktualisierten Nutzeroberfläche für unsere breitere App-Erfahrung. Außerdem haben wir Nutzerforschung betrieben, um ideale Anwendungsfälle für unsere neuen Features und Funktionen zu definieren.
Mithilfe unserer Entwickler bastelte unser Designteam an JSON und Block Kit Builder herum und vermittelte ihnen wichtige Kenntnisse über die neuesten Höchstgrenzen von Block Kit, was zu viel schnelleren Iterationsphasen und reibungsloseren Designübergaben an unser Entwicklungsteam führte.
Sobald die Nutzeroberfläche im Großen und Ganzen feststand, wurden Besprechungen abgehalten, um nicht nur den Inhalt der Nutzeroberfläche zu vermitteln, sondern auch die Konzepte dahinter, wobei der Schwerpunkt mehr auf dem Ansatz als auf dem bloßen Format lag. Dies verschaffte unseren Entwicklern Klarheit über die Zielsetzung und eine größere Fähigkeit zur Improvisation, wenn neue Ideen in Betracht gezogen oder neue Einschränkungen während des Entwicklungsprozesses aufgedeckt wurden.
Der Entwicklungsprozess
Unsere erste große Aufgabe bestand darin, eine Block-Kit-Komponentensuite zu erstellen, die das Verhalten eines modernen Frontend-Frameworks wie React nachahmt – um einen Lebenszyklus von wiederverwendbaren zustandslosen und zustandsabhängigen Komponenten zu schaffen. Außerdem aktualisierten wir das npm-Paket slack-block-kit mit Unterstützung für alle aktuellen Funktionen wie Checkboxen, Optionsfelder und Ansichten.
Wir haben unsere ereignisgesteuerte Systemarchitektur so konzipiert, dass sich neue Ereignisse und Aktionen mit wenigen Zeilen Code einfach und unabhängig einbinden lassen. Es gibt einen View-Submission-Handler, der in unserem Slack-Bot-Event-Bus registriert ist. Er ist dafür verantwortlich, dass bei einem bestimmten Ereignis oder einer Aktion, die in der Slack-App ausgelöst wird, wie z. B. beim Klicken auf eine Schaltfläche, die richtige Ansicht weitergeleitet wird. Außerdem haben wir für jede modale Ansicht eine separate Datei verwendet, um die Konflikte beim Zusammenführen am Ende des Hackathons zu entschärfen.
Wochenmitte
Am Mittwochabend des einwöchigen Hackathons waren wir Gastgeber einer großen Veranstaltung für die in Berlin ansässige Slack Platform Community (SPC). Dies war eine großartige Gelegenheit, mit den vielen begeisterten und leidenschaftlichen jungen Entwicklern zu sprechen – zusammen mit einigen unserer lieben Freunde von Slack, darunter Colm Doyle vom Slack Developer Relations Team.
Wir tauschten Ideen und Feedback zu einer Vielzahl von Themen aus, darunter auch zu unserer eigenen Arbeit mit Block Kit Builder. Slack ist immer auf der Suche nach Produktfeedback, also sind wir nie schüchtern – und das solltest du auch nicht sein. Du kannst jederzeit schnell mit uns in Kontakt treten, indem du eine E-Mail an feedback@slack.com schreibst.
Zwischenfazit
Während es in der ersten Hälfte der Woche darum ging, unseren Kurs festzulegen, ging es in der zweiten Hälfte der Woche darum, voranzukommen. Das Feedback während der Veranstaltung am Mittwoch hat uns auf jeden Fall Rückenwind gegeben, so dass wir die Ziellinie erreichen konnten.
Unsere größte Herausforderung war die Begrenzung der Blöcke in einem Modal, die im aktuellen Zustand maximal 100 Blöcke beträgt – nicht viel, wenn man darüber nachdenkt! Zum Beispiel zeigt, Meine Aufgaben eine Liste von Aufgaben an, die deine Aufmerksamkeit benötigen. Aufgrund der Blockbeschränkung haben wir die Anzahl der Aufgaben pro Modal auf maximal 15 beschränkt.
Diese Beschränkung wirkte sich auch auf andere Funktionen der App auf unserer Startseite aus. Eine zukünftige Verbesserung könnte die Implementierung von Paging in Modals sein. Um eine einheitliche Nutzererfahrung zu gewährleisten, haben wir als Reaktion auf diese Einschränkungen neue Designentscheidungen getroffen.
Die Ergebnisse
In der zweiten Hälfte der Woche kam einiges zusammen. Schließlich haben wir uns beim Slack App Directory beworben und unser Einreichungsvideo aufgenommen.
Nach unserer Einreichung verbrachten wir drei weitere Tage damit, unsere neuen Funktionen zu testen, bevor wir sie öffentlich zugänglich machten. Wir sind stolz darauf, dass Slack nur wenige Tage nach unserer Einreichung bekannt gab, dass wir in der Kategorie „Best modernized directory app“ (Beste modernisierte Verzeichnis-App) des Hackathons gewonnen haben.
Vielen Dank
Entscheidend für unseren Erfolg war unsere Bereitschaft, zuzuhören, zu lernen und Feedback zu erhalten. Ohne den fließenden Austausch von Informationen und Ideen zwischen unseren Teammitgliedern hätten wir das Tempo der Prototypenentwicklung nicht so hoch halten können.
Es ist nicht überraschend (aber dennoch erwähnenswert), dass die Entwicklung eines teambasierten Tools eine echte Teamleistung ist, wenn sie richtig gemacht wird. Besonderen Dank an Anh Duc Nguyen, Bruno Bez, Elie Goldfarb, Jaime Flores, Jesse Van Mouwerik, Judith Mewes, Lukas Kleine-Bühning, Martin Velkovski, Pedro Ferreira Ramos, Roman Roznovsky, Shane Saunders, Stefan Romeis und Yi-Wei Hsufür die Teilnahme!
Schau dir die workstreams.ai-App im Slack App Directory an. Für Fragen oder Feedback kannst du uns gerne eine E-Mail an feedback@slack.com oder einen Tweet an @SlackAPI senden.
