How we designed a more consistent and intuitive experience for 40.000+ users.

Mollie has a clear focus on fixing the online payment space through better tech and intuitive design. If you’ve ever used our API, I hope you’ve found the experience agreeable. We’ve tried hard to make it as efficient as possible. Now, we’re releasing an entirely redesigned Dashboard, to deliver that same experience. In this story, I’d like to introduce you to the new design and I’ll talk about how we’ve tried to add value for our customers through design that inspires a logical workflow while maintaining scalability. Come take a tour around the design highlights of the new Dashboard.

The Situation

We firmly believe that providing our users with a calm, intuitive, and efficient working environment is essential. By building a product that is neatly arranged and makes sense, we can help our users be more productive. The less thought that goes into how you’re achieving something, the more focus, there is on what you’re doing. And since there’s so much data in Dashboard, it’s important that we present that in a clear way, to help our users navigate it all easily.

We felt, however, that over the years, Dashboard had lost some of that clarity. For years, we’ve been adding features and tweaking its design to make it all fit. By now, we got as much out of the old design as we were going to get. That’s why we decided it was high time we took a step back and looked at how it all fits together.

Of course, before starting out, we decided on our needs and demands: the new Dashboard had to fit in with the new identity we established in 2017 and form a consistent whole with our other touch points, like the marketing website. We also needed a design that doesn’t just hold our current features and functionalities, but one that will also hold any future features we might come up with. This scalability is extra important now because we’ll be releasing new features and updates at a higher pace than before. The design also had to be familiar enough to be usable by users who’ve grown accustomed to the old design, without too much guidance. Another thing we had to keep in mind: our users range from single-person webshops to Fortune 500 enterprises, and they all use the same Dashboard. You can probably guess that finding a way to encapsulate all of this, was quite a challenge. But as I look at the final product, I think we rose to that challenge.

Sidebar, content, and optional inspector in the new and much calmer Payment Detail screen.

The Design

There it is. As you can see, we’ve made it fit in nicely with our other touch points. To achieve this, we used recognizable colors, typefaces, and icons. We used the same solid color backgrounds and loads and loads of white space that we also use on the website. This also gives the whole a clean look and feel. And the layout mirrors our website as well.

Next, to make it recognizable, we had to make it scalable. We realized this by dividing the screen into two distinct parts: the sidebar and the content. Let’s dive into those a little deeper.

Sidebar

The introduction of the sidebar is the biggest change we’ve made. This sidebar is always visible on larger screens and turns into a hamburger menu on small screens. It holds the main navigation, the organisation switcher, and the account options. All these elements used to be at the top of the screen, but this positioning had some serious flaws. For one, it really wasn’t scalable. We ran out of space and had to find some creative ways to fit things in, which in some cases resulted in some counter-intuitive manoeuvring to achieve something simple. Changing organisations, for instance, you’d have to go to the dropdown menu below your personal account to get an overview of the organisations you work for and then be able to switch around. It works, but it’s not great. By giving this a dedicated place, we hope to improve the way you navigate around the different organisations. In the same way, navigating around the different parts of Dashboard has been made more efficient.

Having set up Dashboard with a sidebar, we’ll also be ready for future features. For instance, we’re working on implementing more extensive team management and role dividing settings, at some point in the future. We’ll be able to easily integrate that into the design of Dashboard now.

Something else we think will help: because the sidebar is always visible, it’ll be easier to block out when you’re working within the content screen. This creates a calmer working environment. On to the content.

Content

The content portion of the screen is obviously the biggest, and because we’ve moved the navigational options away from this portion, we’ve freed up quite a bit of screen space. We love white space because we think it makes for a peaceful and calm experience and we made sure to keep a lot of it. We cut all this free space up into three distinct parts. The first two parts are the header and the content, these are always visible. The third part is optional: an added inspector within the content part. We think working becomes easier because these parts are used consistently. The header always holds the page title on the left and page actions on the right. The content always has enough room. If the content requires anything in particular, like filters or detailed information, the added inspector is there to provide it.

Throughout Dashboard, the actions in the header control the entirety of the content. They refresh the data, show a different data set, export the data, etc. The actions in the inspector always manipulate the shown data, they filter it, search through it, or provide extra information. By making this distinction between page actions and data actions consistent throughout Dashboard, we believe using them becomes a more intuitive experience.

Mobile optimisation

While we were at it, we also took the opportunity to optimise Dashboard for mobile screens. As much as 20% of our customers use Dashboard from a mobile device and we wanted to give them an equally great experience. I already mentioned how we change the sidebar into a hamburger’d menu when your screen gets narrow. In addition to that, at this point the header, the content, and the optional inspector get restructured. The title and page actions are stacked vertically. Below them, whenever visible, comes the optional inspector. Finally, the tables are structured differently to better fit the dimensions of a smaller screen. We think these changes give our users an optimal mobile experience while maintaining clarity and usability.

Wrapping it up

That, in a nutshell, is how we redesigned Dashboard and how we used a sidebar, consistently recurring elements, and a lot of whitespace to create a clearer, a more consistent, and more intuitive UI. I hope you got something out of this write-up.