Nadine Roßa on December 17, 2015 The challenge of redesigning Redmine – the story behind the new Planio UI
It all started back in Spring 2015 when Jan and I were playing around with Planio’s typography and the colors directly in the CSS.
In an hour the look and feel of Planio changed so drastically that we wanted to go further and ship a redesigned Planio.
At this point, Planio and I had some history. It’s over 5 years ago now that I started working with it, and since then, it’s gone through several design evolutions.
Photo by Norman Posselt
Designing within the Constraints of Redmine
Honestly, it wasn’t easy working on redesigning Planio.
Planio is based on Redmine, which is an open-source project management software. Part of our philosophy at Planio is making sure Planio remains compatible with Redmine. That means we’re part of an open community rather than creating yet another closed-source proprietary project management product.
But it meant that I had to focus on designing the new Planio so we could keep compatibility with Redmine.
Instead of working with a blank sheet and starting from scratch, I was working within tightly defined parameters, which is obviously challenging — in a good and a bad way.
The Goals of the New UI Design
At this point, the last redesign of Planio had been 3 years ago, so I really wanted to give Planio a fresh, modern look.
I also use Planio on a daily basis both for my work with Planio, but also with my design clients.
Constantly using Planio meant that I know the product really well from the perspective of a user.
Often, it’s easy to design ideas that work on a specific page, but won’t work when you consider the big picture of the entire software package and how different parts work together.
The Design & Development Process
At first, we worked on the new design at LAUNCH in Berlin. Constant interruptions meant that it was hard to focus just on the Planio redesign.
That’s why we started having special “Planio Hackathon Days” in Hamburg so we could fully focus on the task at hand.
We’d spend a day or two locked in a room working together in a team of three:
- Nadine - master of design;
- Felix - front-end CSS and SASS guru;
- Jan - product manager and “big picture Redmine constraints” consultant.
I’d notice something that we could change. I’d point it out to Felix and he’d quickly implement it, and we could all look at it and decide whether we should keep it.
It’s really rewarding and fun to have this really tight loop between trying out design ideas, deciding on one approach and then implementing it straight away.
This meant that we could accomplish quite a bit in the limited time we had during the hackathon days.
Direct Internal Feedback is Very Effective Even if It Hurts
We use Planio ourselves internally for customer support and all internal projects, so we have a test group inhouse.
That meant we could release the beta version of the new Planio UI to the Planio team and get quick feedback from them. Getting feedback from your own team has the advantage that they’re often quite honest.
Because our team knows the product so well, they were able to express problems and the reasons behind them rather than just giving a vague sentiment that something bothers them.
Some of the feedback even turned into new features in Planio. Louise found that the tables in Planio were too spaced out. She wanted to a mode that allowed her to see more information on her screen. That’s why we created a ‘compact mode’ initially just for her, so we christened it “Louise Mode” internally.
It turned out that some of Planio users also were looking for this, but could never quite put their finger on it. Now, Louise recommends that they use the compact mode.
The Challenge of the Header Navigation
A big part of the new redesign was the new header. We went back and forth on this issue for quite a while.
Obviously, it’s one of the most important UI elements in Planio.
The first version of the new header was super minimalistic. We only had three elements. It was just a search button, one drop down menu and the user icon.
We liked it, so we tried it out internally. It quickly became clear that we’d gone too far with our minimalistic approach. We adjusted the design, adding in the projects tabs and making the search box always available.
We’ve also added time tracking, a notification bar and Mr Planio to the header navigation.
Stop Forgetting to Track Time
I felt that the previous version hid time tracking in a tiny icon on top of issues. I personally track time on client work a lot in Planio. I found that my biggest problem with time tracking was that I’d forget to stop tracking the time, and the timer would continue indefinitely. Unfortunately, my clients don’t pay me for indefinite amounts of work, so that was a problem.
Now, you can track time right in the header from anywhere in Planio.
The Notification Menu
This was another win for usability, because it’s really nice to be able to jump straight into the latest issues or see the latest updates.
While we were in Hamburg working on the navigation, I came up with the idea of adding a mascot to Planio. We ended up with our Mr. Planio, whom we all love:
He appears to tell you when you have no more unread notifications.
The Battle of the Forms
The form for creating or editing an issue in Planio is a big part of people's daily experience of working in Planio.
It’s a challenging form to design, because there are a lot of fields, and many people add extra custom fields to it. So even if you wanted to, you couldn’t make every single field pixel-perfect. Users will add their own that I couldn’t account for.
One idea we tried out was reducing the size of the forms. We took the labels and placed them inside the form fields. This was based on UX research that suggested reducing the size of the forms would improve the user experience.
However, we quickly got negative reactions from the team. Holger pointed out that there were a large number of fields in Planio. Therefore, it was a lot easier to scan through the fields if the labels were all aligned on the left and right columns, rather than in the form fields themselves.
I found it really tough killing that idea. We’d spent a lot of time thinking about the forms. We tried out new ideas. And yet we ended up throwing away our initial concept and redoing it a second time from scratch.
That was frustrating at the time. Ultimately, however, you have to go with the solution that works for your users, rather than just changing for the sake of a beautiful design.
The Icons of Planio
Photo by Norman Posselt
A personal speciality of mine is icons and typography.
That’s why I had a particular interest in updating the icons in Planio, so they’d be modern, clean and look great on a hi-res screen.
There are a lot of icons in Planio, so we decided to go with the Font Awesome icon font. The icon set was great for many of the icons.
We needed custom icons for many items in the navigation bar. If you start changing one of them, you cannot really mix in the differently styled Font Awesome icons. So we defined sections that would use all custom icons (project and admin menus) and sections which would use only Font Awesome. The result is that these important icons have the same look and feel.
The Attack of Hipster Buttons
The issue page was an area where I saw that users were often confused. The edit button is the most important button on the page, and yet people often missed it.
It’s a small detail, but it’s one that users will face daily, so improving it was a priority.
Jan wanted what I call “Hipster Buttons”. It actually took quite a few months to finally agree on these buttons. We went back and forth between having a entire row of buttons or just using icons.
In the end we found the perfect mix of the two. We also defined one main button for every view that we highlighted visually. That’s just a tiny difference from Redmine, but a major improvement in UX, I think.
Time to Ship
After six months of hackathons, thinking and internal testing, we shipped the new Planio at the beginning of November. I had been using both the old Planio design and the new Planio simultaneously for several months on a daily basis.
Seeing them side-by-side meant that I was much more confident on launch day, because honestly I really didn’t like going back to the old Planio.
The feedback we received was amazing. Usability and design actually seem to concern a lot of people. Felix and the team did some extra shifts during the first few days working on all the little bugs, improvements and ideas which our users came up with. It really helped perfect the new design even further.
I hope you enjoy the insights into the design process at Planio.
