Nadine Roßa am 17. Dezember 2015 Redesigning Redmine – Die Geschichte hinter dem neuen Planio User Interface
Alles begann im Frühjahr 2015, als Jan und ich mit der Typografie von Planio und den Farben direkt im CSS herumexperimentierten.
Innerhalb einer Stunde veränderte sich das Erscheinungsbild von Planio so drastisch, dass wir noch einen Schritt weiter gingen und ein neu gestaltetes Planio auf den Markt bringen wollten.
Zu diesem Zeitpunkt hatten Planio und ich bereits eine gewisse Vorgeschichte. Ich arbeitete seit über 5 Jahren damit, und seitdem hat es mehrere Designentwicklungen durchlaufen.
Gestaltung innerhalb der Beschränkungen von Redmine
Ehrlich gesagt war die Neugestaltung von Planio nicht einfach.
Planio basiert auf Redmine, einer Open-Source-Projektmanagement-Software. Ein zentraler Bestandteil unserer Philosophie bei Planio ist die Kompatibilität mit Redmine. Das bedeutet, dass wir Teil einer offenen Community sind und nicht ein weiteres proprietäres Projektmanagement-Produkt mit geschlossenem Quellcode entwickeln.
Das bedeutete aber, dass ich mich auf die Entwicklung des neuen Planio konzentrieren musste, damit wir die Kompatibilität mit Redmine beibehalten konnten.
Anstatt mit einem leeren Blatt Papier zu arbeiten und von Grund auf neu zu beginnen, musste ich innerhalb eng definierter Parameter arbeiten, was natürlich eine Herausforderung darstellte – im Guten wie im Schlechten.
Die Ziele des neuen UI-Designs
Das wichtigste Ziel war ganz klar Planio moderner und frischer aussehen zu lassen.
Es sollte frisch und nach „2015“ aussehen – weniger Verläufe, weniger Shadows, mehr Simplizität, High Resolution Display-Ready und bessere Benutzerführung.
Da ich Planio schon lange selbst benutze, kenne ich es sehr gut aus Nutzersicht und konnte meine eigenen Wünsche gut mit einbringen. Ich kenne aber auch die technischen Einschränkungen aus Entwickler-Sicht. Oft funktionieren Ideen an einer bestimmten Stelle, aber bei Planio/Redmine galt es immer das komplette Paket vor Augen zu haben. Und das funktioniert eben nur gut, wenn man das Produkt selbst sehr gut kennt.
Der Design- und Entwicklungsprozess
Zunächst arbeiteten wir bei LAUNCH in Berlin an dem neuen Design. Da das aber auch ein Coworking-Space ist und der Planio Customer Support nebenher läuft, mussten wir schnell feststellen, dass wir hier einfach nicht die nötige Ruhe hatten.
Deshalb haben wir in Hamburg spezielle „Planio Hackathon Days“ ins Leben gerufen, damit wir uns voll und ganz auf die anstehende Aufgabe konzentrieren können (dort wohnt und arbeitet Felix und hey, Hamburg!).
Wir würden ein oder zwei Tage in einem Raum eingeschlossen verbringen und in einem Dreierteam arbeiten:
- Nadine: Meisterin des Designs
- Felix: Frontend-CSS- und SASS-Guru
- Jan: Produktmanager und Berater für die „gesamten Redmine-Beschränkungen“.
Der Prozess lief dann in etwa so:
Ich gab Design-Anweisungen, Felix setzte sie quasi in Echtzeit um und Jan sagte dann meistens, dass das in Redmine nicht sooo einfach geht weil noch dies und das bedacht werden muss.
Und dann begannen wir zu diskutieren. Das war eine unglaublich tolle und zufriedenstellende Art zu arbeiten, da wir innerhalb kürzester Zeit Ergebnisse erzielten.
Diese »Hackathon Tage« waren die effizientesten im Ganzen Jahr.
Das bedeutete, dass wir in der begrenzten Zeit, die uns während der Hackathon-Tage zur Verfügung stand, einiges erreichen konnten.
Direktes Feedback aus dem Team – auch wenn’s weh tut
Da wir Planio natürlich auch selbst für unsere eigenen Projekte benutzen, hatten wir den Luxus einer Testgruppe live vor Ort.
Das bedeutet, dass wir jede Neuerung immer sofort veröffentlichen können und vom Team auch immer direkt Feedback bekamen (ob wir wollten oder nicht).
Das kann auch durchaus mal schmerzhaft sein, wenn das Team eine Neuerung zerreißt an der wir länger getüftelt und sie für gut befunden haben.
Es hat aber auch große Vorteile. Da alle im Team mit Planio und uns vertraut sind, ist das Feedback auch sehr ehrlich. Außerdem können sie meist besser Feedback geben, weil sie es genauer beschreiben können als einfach nur zu sagen »gefällt mir nicht«.
Einige Rückmeldungen flossen sogar in neue Funktionen von Planio ein. Louise fand die Tabellen in Planio zu weit auseinander. Sie wünschte sich einen Modus, der ihr mehr Informationen auf dem Bildschirm anzeigte. Deshalb entwickelten wir zunächst speziell für sie einen „Kompaktmodus“ und tauften ihn intern „Louise-Modus“.
Es stellte sich heraus, dass einige Planio-Nutzer ebenfalls danach suchten, aber nie genau sagen konnten, wonach. Louise empfiehlt ihnen nun die Verwendung des Kompaktmodus.
Einige Feedbacks wurden zu eigenen Features im neuen Tool. Louise z.B. fand dass die Tabellen im neuen Design zu breit und »luftig« waren. Sie wollte eine Möglichkeit mehr Informationen auf dem Screen angezeigt zu bekommen.
Daher haben wir ursprünglich nur für sie den »Kompakt Modus« erfunden, den wir intern deswegen den »Louise Modus« nennen. Wie sich heraus stellte, war das auch etwas, was viele Planio Nutzer wünschen, es aber so nie formulieren konnten. Louise freute sich daher im Support wenn sie auf »ihren« Modus verweisen konnte.
Die Hauptnavigation
Die Überarbeitung der Hauptnavigation nahm einen großen Teil in dem Projekt ein und brachte uns oft zum Verzweifeln, weil wir mehrfach hin und her gewechselt haben.
Da es offensichtlich ein wichtiger Teil der UI von Planio ist, verdiente es allerdings auch die notwendige Aufmerksamkeit.
Die ersten Versionen, an denen wir arbeiteten waren sehr minimalistisch mit nur drei Elementen: Suche-Icon, Dropdown Menü und ein User Icon. Das war ein großer Unterschied zu vorher, der Header war voller Links. Uns gefiehl das gut, deswegen ließen wir es durch den internen Team-Test laufen und da zeigte sich, was ich auch schon ein bisschen befürchtet hatte.
Es war dann wohl doch zu minimalistisch, also ergänzten wir das Projekt Dropdown und machten die Suche immer sichtbar und das kam sowohl bei den internen als auch bei den externen User-Tests gut an.
Die Zeiterfassung
Die Zeiterfassung war eines meiner wichtigsten Features in der Benutzung von Planio und mich hat immer die Art gestört, wie es bis dahin gehandhabt wurde.
Man sah deutlich, dass es später hinzugefügt und stiefmütterlich behandelt wurde. Es war immer sehr versteckt, was häufig zur Folge hatte, dass ich einfach vergessen habe, sie aus zu schalten und sie auch gerne mal übers Wochenende lief. Möp. Da meine Kunden mich leider nicht für unbegrenzte Arbeitsstunden bezahlen, war das ein echtes Problem.
Nun ist die Zeiterfassung ein prominentes Feature in der Header Navigation, das die laufenden Aufwände anzeigt und so daran erinnert, dass sie aktiv ist. Seitdem habe ich keine 48 Stunden-Tickets mehr gehabt.
Das Notification Menü
Das ist ebenfalls ein komplett neues Feature, das wir ergänzt haben. Es ist ein großer Gewinn für die Usability, denn es ermöglicht eine direkte Übersicht über das aktuelle Geschehen. Man kann nun auch direkt in Tickets springen, die kürzlich bearbeitet wurden.
Da es natürlich auch den Zustand gibt, dass alle Tickets und Aktivitäten abgearbeitet wurden und wir dort kein leeres Fenster zeigen wollten, entstand die Idee zu Mr. Planio: Ein freundliches Maskottchen, das die Aufgabe hat, genau dieses positive Gefühl zu transportieren im Sinne von »toll gemacht«.
Da Mr. Planio nur aus Punkten, einem Lächeln und Bäckchen besteht, löste auch er intern Diskussionen aus. Denn einigen im Team war er einfach zu niedlich. Letztendlich entschieden wir hier demokratisch und deswegen: Hello Mr. Planio!
Der Kampf mit den Formularen
Formulare machen wegen der Komplexität von Redmine einen großen Teil der Nutzererfahrung aus. Und eben weil es so viele Formulare gibt und außerdem die Möglichkeit eigene Formularfelder nach Belieben zu ergänzen, lag hier eine große Aufgabe vor uns. Formulare sind ja in der Gestaltung grundsätzlich immer eine Herausforderung.
Leider gibt es hier feste technische Vorgaben, die ein paar scheinbar einfache Anpassungen unmöglich machten. Wir mussten also Work-Arounds finden und eins davon war die Idee, die Formular-Labels mit in die Felder herein zu nehmen statt sie linksbündig davon zu platzieren.
Durch die farbliche Absetzung mit Hellgrau und etwas Letter Spacing erhielten wir ein – wie ich fand – tolles Ergebnis. Ich liebte diese Formulare!
Aber nun ja, sie wurden im Team Testing gnadenlos verrissen. Holger meinte, er vermisse die außen stehenden Labels, da sie ihm helfen, sich auf einer Seite mit vielen Feldern zu orientieren. Die anderen pflichteten ihm bei und so landeten wir bei einer Version, die der Ausgangs-Variante sehr ähnlich ist.
Ich muss gestehen, dass das ganz schön hart war, denn da rein hatten wir viel Arbeit gesteckt und ich persönlich fand es eine tolle Verbesserung.
Aber am Ende des Tages muss die Lösung für die Nutzer funktionieren und das tat sie dann leider eben nicht.
The Icons of Planio
Eine meiner persönlichen Spezialgebiete sind Icons und Typografie und die Icons im alten Planio waren alles andere als zeitgemäß. Sie hatten Verläufe, waren pixelig und nicht Retina-ready – wie Icons vor zehn Jahren halt so aussahen.
Es war uns klar, dass die Icons als zentrales visuelles Element Überarbeitung brauchen. Aber wir sprechen hier von wahnsinnig vielen Icons, die wir nicht unbedingt alle überarbeiten wollten und konnten. Aber natürlich juckte es mich in den Fingern Icons zu gestalten.
Wir entschieden uns also für einen Weg mit zwei Komponenten: Für einen Großteil der Icons benutzten wir Font Awesome, damit konnten wir die meisten Icons abdecken. Aber in der Hauptnavigation stießen wir damit an unsere Grenzen.
So toll Font Awesome auch ist, leider passen die Icons nicht immer gut zueinander und ich war der Meinung, dass die Hauptnavigation eigene Icons in einem einheitlichen Stil verdient hatte.
Also haben wir alle diese Icons selbst entwickelt und den Rest mit Font Awesome abgedeckt.
Hipster Buttons
Das Tolle an einem Redesign an einem Produkt, das man schon so lange verwendet, ist, dass man Sachen, die einen schon immer gestört haben, korrigieren kann.
Wie z.B. den »Bearbeiten« Button auf der Aufgaben Seite. Ich habe mehrfach erlebt, dass Nutzer den — wie ich finde — wichtigsten Button auf der Seite einfach nicht gefunden haben. Das hat mich immer wahnsinnig gemacht, also habe ich das geändert, indem der Bearbeiten Button nun grün ist und entsprechend auffällt.
Das löste allerdings noch nicht das Problem mit den anderen Aktionen in der Leiste. Meiner Meinung nach waren sie alle als Buttons viel zu prominent.
Sie einfach nur als Textlinks zu lassen, brachte aber zu wenig Abtrennung. Jan war es dann, der das was ich »Hipster Buttons« nenne, probieren wollte.
Am Ende war es von allem etwas: Der »Bearbeiten« Button war ausgefüllt und grün, die zwei daneben bekamen eine Outline, die bei aktiver Zeiterfassung auch grün wurde und der Rest wurden schlichte Icons mit Tooltips.
Alles in allem nur eine kleine Veränderung aber eine Riesen Verbesserung zur Original UX von Redmine.
Offizieller Launch
Nach sechs Monaten voller Hackathons, viel verbratenem Gehirnschmalz und internen Tests launchten wir das neue Design Anfang November. Da ich eine zeitlang das alte und das neue Design in meinen Planios parallel verwendet habe, ging ich in diesen Launchtag recht gelassen.
Ich empfand das neue Design und die UX so viel besser, so dass ich sicher war, dass die meisten Kunden es auch so sehen würden. Wobei man natürlich niemals die Bockigkeit der Nutzer unterschätzen sollte ;) , es ist nicht unbedingt so, dass was besser ist, auch immer direkt so empfunden wird.
Aber hier war es so. Das Feedback der Nutzer war toll und da wir als Beta launchten und um Feedback baten, konnten wir in den ersten Tagen viele kleine Sachen auch direkt fixen oder Ideen von Nutzern umsetzen.
Es liegen noch ein paar Arbeitspakete vor uns, die wir im neuen Jahr angehen werden, aber ich bin sehr zufrieden mit dem Ergebnis.
Wenn ihr es ausprobieren möchtet, legt euch hier einen kostenlosen Probeaccount an!
