How we redesigned the sidebar of our CRM

The left navigation is present on every page you look at in Close. It provides the main way to move through the product. It also hasn’t been touched since about 2013! It was time to show it some love.

In this post, we'll share a bit of the work that went into the redesign our left sidebar, and how we arrived at the current version. As always, we'd love to hear from you, our customers, how we can build an even better app for you.

Challenges and constraints

There are always challenges when redesigning any area of the product. Even more when that area is always visible and used by every user, every day.

This project was not a rebrand but instead a look at the side navigation in isolation. This limits the scope of change as it depends on the other colors in the product, what the content looks like, what other navigation elements look like, and so on.

We also decided not to add new functionality yet so that we could ship the updates sooner and iterate based on feedback we'll receive from you, our customers.

Approach

There are some basic design changes that needed to happen to bring it inline with other—more modern—areas of the product. This also gave us a way to include new features in the future, which would not have worked in the previous style and size.

Here's what the left navigation looked like from 2013 until now:

We started by updating the icons and aligning everything a bit better. Changing the color of the background. This worked well but it still felt a bit drab. Smart Views also needed more thought as the edit icon still seemed a little squashed off to the right.

Experimenting with different colors and layouts allowed us to change the feel of the product. A white sidebar looks clean, modern and minimal. But would it fit with the rest of the product?

We then explored moving the top bar into the side navigation(but simply removing it at first) which has a dramatic effect and makes it easier on the eye. But when pairing it with real content pages (such as the Lead view and Settings pages) it was too much white. And we can’t touch those pages.

Remembering that this wasn't a redesign was sometimes a challenge. But constraints are good.

Could we create a similar effect by flipping the contrast on the side navigation and the top navigation? Maybe. We also tried to inject some color into the interface but that, as you can see, looks a little awkward. The goal of a great interface is to not be noticed by those using it.

Ok, now we’re getting somewhere. If we want to remove or change the top bar then we need to look at how those elements might fit back into the left nav. Moving the user profile and giving it more prominence certainly makes it feel more personal. Maybe it’s a bit too prominent though.

This was a great opportunity to surface some settings that are hidden (unless you know where to look).

There was a lot of discussion, and it’s clear that everyone on the team wants to make sure everything we do is because it will benefit our customers. Rarely is a design change not backed up by direct customer feedback, customer problems, or higher level rationale.

The result

After all of the decisions, rationale, trade-offs, and introspection, the end result is a well-considered and thoughtful redesign of the left navigation.

• Better icons
• Better alignment of text
• Wider and less claustrophobic
• Easier access to Settings

A lot of customers (and our internal teams) call out specific Smart Views using emoji. This is a great idea so we’ve incorporated it into this update. We now display emoji in a deliberate way, when they’re used at the start of the Smart View name. Go ahead and try it out!

We have some additional features that will be coming soon. See if you can spot them.