App navigation
Initially, Nutshell's navigation consisted only of icons, which wasn't very user-friendly and increased cognitive load during browsing. I improved the existing design by reducing the icon size and adding text labels, while maintaining the original color scheme.
The challenge
Nutshell, a customer relationship management (CRM) platform, provided people with a left-side vertical navigation bar that used only icons. While space efficient, this design was not very user friendly. People faced an increased cognitive load as they had to interpret each icon or hover over them to reveal their labels.
Nutshell's old navigation had labels that only appeared on hover and unclear groupings of buttons.
Left-side vertical navigation
Our team recognized that Nutshell was on the right track by placing its navigation on the left, vertically. This is best for applications with a broad information hierarchy, as people who read from left to right are already accustomed to this pattern in desktop apps and SaaS products.
Examples of left-side vertical navigation in other applications, all of which have text labels.
Our strategy
Our goal was not to reinvent the wheel but to enhance the existing navigation bar. We kept the same color scheme and improved the user experience by reducing icon size and adding text labels.
The first sketch of what navigation might look like with smaller icons and visible labels.
Design & implementation
Our design principles prioritized left-aligned, front-loaded text labels to enhance scannability of the navigation elements. To match the elegance and user-friendliness found in other successful left navigation bars, we ensured adequate padding around each item for breathability, while maintaining compactness.
Hover and click targets got plenty of padding themselves, while still leaving a few pixels of room between each other.
The timeline for the project was challenging. As part of a "Holiday Hackathon," Craig, our engineering intern, and I were tasked with developing a minimum viable product (MVP) for the new navigation sidebar in less than a week. This fast-paced prototyping resulted in a dynamic and collaborative process, where design and implementation happened nearly simultaneously.
Exploring various design approaches by adjusting elements such as padding, margins, and dividers to group different sections.
Handling the design details
Precise details, such as appropriate hover and selected states, were a top priority. We also addressed potential issues with varying text lengths at the top and bottom of the navigation sidebar. By designing elegant truncation behavior, we ensured a smooth user experience, irrespective of the length of someone's email or company name. We also added the ability to customize the icon at the top of the navigation, subtly incorporating your company’s branding throughout the app.
From top to bottom: an active navigation element indicating the current page; a hovered element showing the interaction state; a focus state demonstrating accessibility through keyboard navigation.
The top and bottom sections adjust their display length conditionally, based on the length of your company name, your name, and email address. We designed a way to truncate these sections when necessary.
Recognizing how often people asked for more ways to personalize the app, we seized the opportunity to provide a customizable company name and icon at the top of the app.
Impact & lessons learned
The final redesign greatly improved the user experience by reducing cognitive load and enabling more seamless navigation within the app. Launched in early 2023, the redesign received overwhelming positive feedback from customers.
Navigation sidebar before and after the redesign, now with clear, user-friendly labels.
The redesigned navigation sidebar within the app interface.
The app's new navigation also benefited Nutshell's sales and customer-facing teams, simplifying the process of explaining feature locations. This led to more efficient support calls and sales demonstrations.
The updated design not only increased the sizes of each click target but optimized the vertical space used by each element. As a result, a more streamlined and vertically responsive navigation was achieved, which proved to be more suitable for smaller screens.
The new design effortlessly accommodated a much wider variety of screen heights.