The original design has been doing the job for some time, but over the time some of the customers experienced issues with certain parts of the UI. Furthermore, we had ideas of our own of what could be improved. This is the list of issues that we ended up with:
- The overall user interface could be more elegant and professional
- The website is hard to use on large screens
- There is no efficient way to switch between organizations (a user can be associated with multiple organizations)
Over the course of this post I’ll be solving these problems, I’ll start with aesthetics first, because those are simpler to implement.
I started with was a sidebar first, here’s a before and after:
Make content area the focus of the page
For the sidebar use a background color with lower contrast compared to the content area. A high contrast sidebar will grab more attention than content area and this is wrong — content should be the center of user attention, not the sidebar. In this case, with white content area, a grey sidebar attracts way less attention than a blue one. Besides, dark grey links and borders on a grey background is easier on the eyes rather than white on blue
Sidebar should look sparse
Sidebar is a central navigation element, that’s why the links in it should be more bigger and distinctive. The margins between the elements are good, but in this case a bit too much — it is a waste of space and is not looking good.
Don’t overemphasize an active sidebar link
Don’t use underline and background fill for active menu simultaneously, especially when the link’s background color is very contrastive to the sidebar color. In our case it will look better to ditch them both and highlight the active link with a different color — as a result the link blends much better, but still stands out.
The navigation should be predictable
The links in the dashboard sidebar should only lead to pages within the dashboard. Right now, the top menu item, “Home”, leads to the front facing website instead of the home page of the dashboard — this is confusing.
Don’t overload user with controls
Collapsing a sidebar make sense on mobile where the space is a luxury, but on desktop there is enough space to display a sidebar permanently
Don’t be afraid to use margins
The header would benefit from more margins around it. The menu items could be bigger too.
Same goes for the footer — the margins would help. Adding a line break between the links and copyrights will make footer stand out a bit.
Borders are helpful to separate the sections of the page
It should be clear to a user what sections the page consists of: either use a different background color or separate them with a border.
Margins are good, most of the time
- There should be some space between the content area and the sidebar
- The page title, on the other hand, takes too much vertical space
- A search bar is too big and could be retouched a bit. The columns with data could be improved too
That’s it for the general interface improvements, now on to solving the rest of the issues.
Large screen layout
Even though the website looks good at 1280px width, this layout doesn’t scale well on wider screens. Here’s how the website looks at 1920x720px:
As you can see the sidebar just stays on the left and the content just stretches to fill the rest of the space, it will look even more stretched on 4k monitors. The problem is that there is just not enough content to fill all this free space with.
Use a centered fixed-width container
In most cases it just makes sense to use a fixed width container. Sticking a sidebar to the left side on large screens will look asymmetrical and weird. In our case, sidebar has a background color which complicates things a bit: if we center the container horizontally the sidebar will look out of place.
Divide the page vertically if a sidebar has a background
I like how Stripe solved a similar challenge, by dividing a page into two vertical parts, which occupy the whole width of the screen. The actual sidebar and content are sticked to the right and left edge of those parts respectively.
You see how the container has a fixed width and is centered horizontally? On top of that, the visual distinction between a sidebar and a content is preserved. We can do the same with our interface. In order to implement this we need to get rid of the full width header and footer, so that the page will be divided vertically between the sidebar and the content area.
In our case, we moved the menu to the content area. However, some prefer to have all the navigation in the sidebar — it is a matter of preference. The logo should be in the sidebar, especially when the sidebar is sticky.
Make the sidebar sticky
Once you have a full page sidebar it makes sense to make it sticky, so when the user scrolls the page they still have an access to the main navigation area. Since the sidebar is sticky and the footer is minimalistic, it is useful to move the footer to the sidebar as well.
Great. Now that the page is divided vertically, we can wrap a sidebar and a content area into a fixed width container which is centered horizontally.
Looks good. Using the dashboard on larger screens is now a more pleasant experience. As a bonus, we reduced the waste of space at the top part of the page.
While the desktop version is mostly there, we still haven’t touched the mobile version, so this is what we’re going to do next. Since we removed the header and the footer we now have something like this:
Use proven UI elements
I’m not a big fan of this grey line on the left, so let’s add a header with a button that would show or hide a sidebar on a click — this is more conventional and also doesn’t consume the horizontal space across the page. Let’s also remove a logo from the sidebar on mobile and put a small logo in the header. It doesn’t make sense to have a logo in the sidebar because the sidebar is not visible by default and once the sidebar is open, a logo consumes vertical space on the screen.
Dropdown is a neat way to group user-related controls
There still a problem though: the header menu is missing on mobile. After some thinking we came to a conclusion that a menu consists of two parts: the first one is the links from the frontend application (the actual SaaS business powered by DjaoDjin) menu, while the second one consists of links related to user account (profile, sign out, etc). While the first one is nice to have on mobile dashboard, the second one is definitely a must. We ended up solving this with a dropdown menu, which is a compact way to group related functionality.
Nice! This is going to be useful on larger screens too.
Switching between different organizations
Clients have been complaining about the poor user experience of switching between organization for some time — in DjaoDjin each user account is associated with one or more organization(s) and each organization has its own dashboard. It makes sense to implement this feature as a part of the new user menu.
Each organization has its own section in the dropdown menu. Besides, a user can see their account role in a particular organization. That should do it.
This is what we ended up with on desktop, before and after:
And that’s how it looks on mobile:
In this post we’ve described our journey of a dashboard redesign. We started with improving overall page aesthetics, making it more sophisticated and professional. Then we moved on to solve some of the customers pains, like making the dashboard usable on large screens and adding an ability to switch between organizations efficiently.
Don't miss the new posts.
I could send you updates on the new stuff.