Hi, I'm Nadine.

I am a visual designer &
illustrator, design writer and co-founder living in Berlin.

mail@nadine-rossa.de

Redesigning Redmine – Die Geschichte hinter dem neuen Planio User Interface

21. Dez 2015

There is an English version of the article here.

Vor etwa sieben Jahren begegnete ich in einem Kundenprojekt das erste Mal Redmine. Redmine ist eine Open-Source Projektmanagementsoftware und ich will ehrlich sein – das war keine Liebe auf den ersten Blick. Auch nicht auf den zweiten. Ich hatte bis dahin wenig Erfahrung mit Ticket-Systemen, tatsächlich arbeitete ich auch damals in der Agentur ausschließlich mit einem E-Mail System, das nichts anderes bedeutete, als dass sich regelmäßig eine Flut von E-Mails, die Arbeitsanweisungen enthielten in mein Postfach ergoss. Ich will nicht behaupten, dass das gut funktionierte aber ja, es funktionierte irgendwie, wenn auch sicher nicht besonders effizient.

Nun sollte ich also mit einem Ticket-System namens Redmine arbeiten, das leider so ganz und gar nicht meinen visuellen Ansprüchen entsprach. Es wirkte etwas altbacken und auch nicht besonders intuitiv. Aber ich kam nicht drum herum und tastete mich langsam heran.

In der Tat verstand und genoss auch ich schnell die Vorteile eines Ticket-Systems und irgendwann wurde ich warm damit. Das lag allerdings auch daran, dass ich zwischenzeitlich eine Firma mit Jan zusammen gegründet hatte und Jan brachte quasi ein Projekt mit in unsere geschäftliche Beziehung. Es hieß Planio und basierte auf Redmine. Genau genommen beinhaltete es Redmine Hosting als Software as a Service, daraus entstand Planio.
Wir nutzen es von da an selbst sehr intensiv, immer wenn wir neue Projekte für Kunden begonnen, machten wir damit das komplette Projektmanagement. Häufig behielten die Kunden danach ihr „Planio“ für ihre Projekte, weil sie es kennen und schätzen gelernt hatten.

So wuchs Planio über die Jahre und wurde langsam aber kontinuierlich größer. Mit den Kundenzahlen wuchsen auch die Mitarbeiterzahlen und Aufgaben, nur Planio selbst sah immer noch so aus wie zu Beginn. Zwar hatten wir zwischenzeitlich mal hier und da eine leichte Design-Anpassung gemacht, aber dabei änderten wir lediglich ein paar Farbwerte und etwas Typografie (was schon sehr viel ausmachte).

00_designingplanio

Im Frühjahr diesen Jahres begannen wir dann aus einer Laune heraus ein wenig rumzuprobieren indem wir typografisch ein paar Dinge anpassten und ein paar Farbanpassungen vornahmen. Wir waren positiv überrascht wie schnell man dabei Ergebnisse sehen konnte, denn wir saßen zu dritt zusammen und änderten einfach alles direkt im CSS. Innerhalb einer Stunde sah das Planio, das wir kannten schon völlig anders aus. Das begeisterte mich als kleines Effizienzmonster sehr. Motiviert von diesen schnellen Ergebnissen beschlossen wir das UI von Planio dieses Mal richtig zu überarbeiten. Das haben wir an verschiedenen Punkten vorher schon mal überlegt und teilweise auch angefangen, aber nichts davon war richtig zielführend und zu Ende gedacht. Das sollte sich dieses Mal ändern.

Gestalten im Rahmen des Möglichkeiten von Redmine

Im Idealfall ist man als Designer von Anfang an Teil eines Projektes und kann es so mitentwickeln, wobei das auch oft nicht so ist und man einfach an einer Stelle im Projekt dazu kommt. In diesem Fall war das auch nicht möglich aufgrund der Tatsache, dass es Redmine schon lange gab. Teil unserer Firmenphilosophie ist es, dass Planio immer kompatibel zu Redmine bleibt. Wir sind damit Bestandteil einer offenen Community und müssen uns deswegen an bestimmte Vorgaben halten.

Und das wiederum machte es nicht besonders einfach, die UI gestalterisch zu überarbeiten, denn was immer wir vorhatten musste auch mit Redmine kompatibel sein.

Also konnte ich in der Gestaltung nicht bei Null anfangen sondern musste immer bestimmte technische Vorgaben beachten – was in jeglicher Hinsicht eine große Herausforderung war.

10_neues_Planio

Die Ziele des neuen Planio User Interface

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 trafen wir uns immer in Berlin, hier haben wir unser Hauptbüro. 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. So setzten wir »Planio Hackathon Tage« an, die meist in Hamburg stattfanden (dort wohnt und arbeitet Felix und hey, Hamburg!) und mit zwei Elternteilen im Team immer gut organisiert werden mussten. Aber wow, waren die effizient! Wir schlossen uns ein oder zwei Tage ein und arbeiten zu dritt quasi agil zusammen:

01_Planio_hamburg_hackathon

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.

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 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 freut sich daher auch heute noch im Support wenn sie auf »ihren« Modus verweisen kann.

02_normalvslouise_mode

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.

3_header

Die Zeiterfassung

Die Zeiterfassung ist 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.
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.

04_time_tracking

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!

5_mrplanio

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.

Die Icons

7_planio_Icons

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

8_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

9_beforeafter

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 → https://plan.io/

Fotos: Norman Posselt und ich.

Kommentieren