Sidefire: Why Nutshell redesigned our navigation sidebar from scratch

Andy Fowler
CEO & Co-Founder, Nutshell
Andy Fowler
CEO & Co-Founder, Nutshell

When we launched Nutshell, intuitive design was our priority.

We understood that CRM fails when it’s clumsy, time-consuming, or frustrating. Since then, we’ve worked to expand Nutshell’s powerful reporting and build new integrations, but we’ve also budgeted time to learn, polish, and evolve Nutshell’s design—keeping us far ahead of the pack.

Earlier this month, we launched a significant update to Nutshell’s layout and navigation. Code-named Sidefire, this series of improvements provides a warmer, more intuitive experience for our customers, and helps them do important things even faster.

Why we needed a change

A series of compounding challenges, along with some inspiration for a bolder look led us to make this decision.One such challenge was the space at the top of Nutshell. In our previous design, some of our pages contained a lot of configuration, filtering, and introduction “above the fold,” which would frequently push important things lower on the page.

The People page is a good example. Before you got to the heart of the page—your list of people—you had to work through the search bar, a title, list actions, a row of filtering, and options for the type of view. All of those things take up real estate. When we counted the number of lines between the top of the browser and the first person record in the list, we realized that we had accumulated a stack of distractions that customers had to skip over to get to what they actually needed.

Another challenge was our Settings section. Here, our customers configure types of activities, custom fields, products, competitors, and tags. It’s a part of Nutshell that isn’t frequently visited, unless you’re just getting started. We wanted to unify it with the rest of our app, and better educate new Nutshell customers at each page.

We had five goals in mind when we set out to redesign our sidebar:

1) Better search results

Our customers search Nutshell hundreds of times a minute. The new design had to produce more room for search results, making it even easier to find the right person, company, or lead.

2) Quicker access to help

Created and maintained by our friendly, Ann Arbor-based support crew, Nutshell’s help center is a well-stocked library of videos and articles that help you use Nutshell more effectively. We wanted to embed our help center directly into the product, so that answers to questions would be just a quick search away.

3) More room for activities

Whether you’re working on a list of leads, a full-screen sales report, or a long company feed, a streamlined layout creates more space for our customers to use the product.

4) Fewer distractions

Each additional sidebar icon adds mental overhead, where the customer has to figure out what each represents, so we wanted to keep the number of icons as low as possible. Some of them are must-haves—your companies list, a link to reports—but not everything has to be present at all times.

5) Warmth!

We’ve always thought of Nutshell as a warm, friendly place to grow your business—not a piece of stodgy corporate software. We saw this refresh as an opportunity to share some of that personality.

What else is new in Sidefire?

By moving non-essential items off the top of the page and adding a slide-out pane in the sidebar to tuck in additional actions, Sidefire puts more emphasis on the page you're working with. Here’s a quick rundown of some of the notable changes, and our thought process behind them:

Company setup

We’ve moved the setup tab out of the main navigation, and into the user drawer in the bottom left. Click your initials at the bottom left of the screen, and you'll have access to your settings, and—if you’re an administrator—settings for your entire company.

While considering the new location of the setup section, we found that even if we looked only at administrators, only 7% of Nutshell app page views take place there. We wanted to judiciously keep distractions off the page, and we felt that this was one of them.

Within the setup section, we had found that 20% of the page views were related to imports and 20% were related to user management (i.e. adding and removing team members). We have plans to raise these heavily-used sections to more prominence, but overall, the numbers suggest that customers just aren't spending their days "tinkering" or "reconfiguring" Nutshell, which gave us confidence that we could make this change without hurting the customer experience.

At-a-glance calendar

We’ve given our calendar a sleeker design and the new ability to browse your upcoming tasks. You can quickly check your availability from any page in Nutshell by clicking the calendar, toward the bottom of the sidebar.

sidefire companies icon

Companies icon

Over the years, our Companies icon had evolved from a very literal, high-fidelity representation of buildings—right down to all the tiny windows—to a more minimalist representation that many of our customers mistook for a chart. For the Sidefire redesign, we refreshed this icon to something less abstract.

On “Sidefire Orange”

In terms of color, our first discussion was simply, “Should there be color at all?” The initial designs presented the new sidebar in a neutral gray, which was non-controversial and didn’t clash with anything else in Nutshell. Then we began to explore with a bolder palette. Ultimately, we decided that a splash of color better represented our personality and brand.

After we decided that there should be color, the second question was “which color?” Of course, our first thought was our brand orange, and that’s what we trialled while the project was under development.

“Nutshell Dotcom Orange” is a bold color (#FF7033!). You could see it from across the room whenever someone was working on the sidebar. We realized that the color was too bright to work. On the other hand, settling on neutral gray felt like a step backward.

We needed a tone that conveys our bold personality without burning any retinas—even if it’s not the same Pantone color as our logo. “Sidefire Orange” was born—a slightly softer orange that we’re now using exclusively in our sidebar.

Putting our name on it

This entire process happened over the course of eight weeks, and represents Nutshell’s greatest product development strength: our ability to move quickly. As a lean, tightly-knit team, Nutshell’s designers and developers work side by side. Cycles of back-and-forth can happen in minutes, not days. Larger companies simply don’t have the ability to turn on a dime the way that Nutshell can. (Ben has previously written about some of our successes in quickly building customer requests into Nutshell.)A round of high-fives to Taylor and Charles, our newest two designers who joined Nutshell and hit the ground running in the middle of this project. And big ups to Chris, Rebekka, and Andrew who ushered this project to completion.

One of our values is, “Put your name on it. We’re inspired by products whose makers stand behind them with a signature: think authors, clothing designers, or distilleries. Completing something is difficult, and creative work is never finished. But when what you’re working on achieves the quality you need to put your name on it, that’s when we deliver it to customers.

Design refreshes tend to be grueling at the finish, and carry enough controversy to be uncomfortable at times. We recognize that no redesign will make all of our customers happy. That’s the cost of making decisions.

But in the end, the juice is worth the squeeze. Sidefire makes Nutshell better for our long-time customers and for those just getting started.

Andy Fowler is the Co-founder and CTO of Nutshell. Connect with him on LinkedIn!