On Design Workflow
An in-depth look into how Mollie’s Dashboard navigation was designed.
Last month, Mollie released a redesigned Dashboard. To accompany the release, we published an article about the new product and how we designed it to give our users an intuitive experience while also maintaining scalability for future features. In this article, I’ll go into more depth about the workflow I use and the design choices I made. I’ll show you everything from coming up with what you need, all the way to the final design.
The Situation
As an absolute design geek, I love seeing how a design came together. Checking out a finalised product is awesome but seeing the work that went into the design is something that I can learn a lot from. Seeing this process and being able to follow along from early decision-making, through design iterations, all the way to the final designs, gives you several great insights. It allows you to follow the reasoning of a designer. You can see how a product’s structure came about. It shows you which avenues were explored but dropped. Which darlings were killed, and why.
Recently, Mollie launched a redesign of Dashboard. This redesign was accompanied by a little article that introduced the new design and talked a little bit about how we tried to make it intuitive, scalable, and clean. The response to both the article and the redesign was very positive. Because of this, I felt this project might be a good one to base a first article about my own flow on.
In this article, I’ll go into a lot more depth concerning a single, particular point of the recent design, the sidebar navigation. I’ll start with the decision of using a sidebar, then go through all the versions I created, all the way through to the final design. By showing you exactly what I did, in what order, and with what considerations you’ll be able to get an insight into my personal workflow which, hopefully, will either teach you a thing or two, or allow you to give me tips on how to improve it.
The Process
So, when the decision was made to redesign the old Dashboard, we made an inventory of what needed to be fixed. The main problem we had, was navigation. Over the years, Dashboard hadn’t scaled well with the many features we added to it. Many times, when a feature was done, we still had to find a spot for it in the navigation and we just put it in a dropdown. Eventually, this made Dashboard feel cluttered and disorganised.
When we had identified the navigation as a main problem, I started exploring the possibilities. There’s several navigation types that could work in our situation. I tried out a top bar, bottom bar, side bar, and a nav bar. Out of all these attempts, the best solution turned out to be a dynamic side bar. We made it dynamic to be able to switch items depending on the organisation that’s selected or available. The account profile is static. But I’m getting ahead of myself. When it was decided to go for a sidebar, I started trying things out.
My exploration of the sidebar began with this. At this point I was trying to figure out what our structure should look like and which elements should go into the sidebar. At first, I figured there were 3 essential parts: 2 menu links (Payments and Statistics) and an organisation switcher. The organisation switcher would be able to have submenu items. To start it off (see version 1 above), I put them in the sidebar and tried to find a way to group them, at first trying to separate the organisational items from the payments-related items.
In version 2 you can see that I realised that I forgot about the account viewer and tried to add it to the sidebar. At this point, I reasoned that because organisations, technically, belong to an account, I put the account viewer above organisations visually as well. This created a problem with the Customers and Item submenu links which I had previously grouped with Organisation. To fix this issue, I moved these submenu links into the main part of the sidebar together with other menu links.
Because the main part of the sidebar was now getting filled with menu links, I figured I needed to try and see if it was scalable. To do this, I added some more menu links to it. I also tried to find a way to show that there’s a hidden dropdown menu behind the account viewer. The obvious choices to show this are either icons, which look good but aren’t that clear, and text, which is clear, but takes up a lot of space. At this point, neither option seemed worthwhile. When I get stuck on something like this, instead of spending hours trying to find the perfect fit, I just remove them and move on. This allows me to keep up the pace and try out more things.
I moved on and tried out something else. Perhaps, I thought, logging out in a single click is more important than adding a dropdown menu (see version 6 above). I noticed quickly that that would give me the same problem: should I use text, which is long and might not scale when the name is long, or an icon, which might not be clear enough. Again, I decided to move on and check back later.
At this point, I’ve made a couple of versions and tried a bunch of different things. It’s time to contextualise. Generally, I do this whenever I’ve fixed a certain issue or found something that seems to work. Because I’m pretty confident by now that a sidebar is the best option, this is a great time to check it out in context. By doing this, I can check whether a sidebar still works when positioned next to a list of payments, or next to other tabs and screens within Dashboard. Contextualising also gives you the opportunity to check other things. In this case, I checked things like whether black is the right colour, perhaps it should be white or some other colour? The sidebar held up to this test, and black definitely seemed to work, so I moved on.
When I was looking at the sidebar in context, I realised that placing the organisation switcher below the account viewer didn’t make all that much sense, even though it was technically logical. A user account is a static thing, every user only has one, but organisations are dynamic, a user can be connected to just one or multiple. Because of this, having the organisation switcher at the bottom wouldn’t be scalable. In the next iteration, I placed the account viewer at the bottom and it seemed to work (see version 1 above). Again, I tried to work out the icons for the account viewer but left it once more to place it into context (above).
This time, placing it into context helped me see that a simple dropup menu might work for the account viewer as well, with two triangles to indicate its hidden state. This felt right so I tried out some more states. I even tried out a white version (in version 2 above), but quickly returned to black. Because it seemed to work for the account viewer, I tried a dropdown menu for the organisation switcher as well. This too seemed like an option that improved clarity without becoming cluttered.
In the next few versions I tried to find a structure for the tabs: which links should be main navigation and which could be placed out of sight in another dropdown menu. There was also the difference between a website profile and an organisation. A single organisation can have multiple website profiles, should they all be visible in the main navigation? I’m also trying out icons to accompany the links. This would make the list easier to scan and would eventually open up possibilities for a smaller, collapsed navigation.
Now, in the last version here (version 6 above), I went back and tried to play around with the account viewer again. It’s important to keep trying things, keep moving parts around, see what works and what doesn’t. This is one of those things that didn’t work, so I put everything back as it was and moved on, placing it into context once more.
At this point I was feeling pretty confident about what I had, and I did a little clean up. I revisited all the previous versions, looked at what worked and what didn’t. I put it all in a single mock-up and locked in the structure as well: organisation viewer first, all menu links below that with icons to accompany them, and the account viewer at the bottom. We killed the idea that different website profiles should be visible in the main nav and decided that it would be better to make them filters in the lists. This allowed us to show only the organisations and the account in the sidebar which made for maximum clarity while keeping clutter to a minimum.
Because we’re pretty much locked in now, it’s time to do a real clean-up: revisit your versions, make sure the icons are good, and create all the states, hover, active, dropdown/dropup menus opened and collapsed, organisations switched, etc.
By now, I was basically done but there were still some options I wanted to explore. In particular, I was wondering whether or not I could fit subnav items into the sidebar as well, because some of the pages have tabs. For instance the Administration screen: it’s divided into Balance, Invoices, and Settlements. But how do you make it clear, visually, that some links can be expanded to show subnav items, while others can’t? And how do you do that without creating too much clutter? I tried a bunch of things: icons, no icons, little triangles, a vertical line, colours, dots, etc. In the end, I decided to kill my darling because I felt it would clutter up the navigation too much. Instead, we decided to add a tab bar to the main content screens.
Conclusion
30+ iterations farther and we’ve ended up with something that feels sturdy, intuitive, and scalable. To sum up the workflow: try to fix a single thing and make a new version for every change you make. Place your work into context often. Keep momentum going instead of getting stuck on a single aspect that doesn’t work, just take it out and work on something else. And remember to revisit your past versions, perhaps there’s something in there that works better than you expected.
I hope you enjoyed this write-up. Let me know what you think and whether I should do more of these for future projects.
If you already have an account you can check out Dashboard.
Read our other articles here.
Follow me on Dribbble for more design work.
Sign up at our website, or find us on Twitter.
