Why navigation?

Quickbase's navigation structure had remained largely unchanged for many years, leading to a clunky and dated user experience. With this in mind, I led a hackathon team in 2021 that explored an initial vision for modernizing the platform's navigation.

From that project, our leadership investigated and prioritized adding a revamped navigation to the product roadmap. The final output would span 2 years and 6 engineering teams to build, not to mention the marketing, education, and sales teams that would all be affected by the rollout.

Problems

Looks outdated / dated UI

The initial findings from our research team uncovered several issues that needed to be addressed:

• The dated look of the interface was negatively impacting sales conversations, shifting focus away from the Quickbase's capabilities.
• New users struggled to discover important functionality and experienced users felt that key actions took too many clicks and too much screen real estate.
• There was a lack of consistency since there were three different navigation experiences across our main product and other features from acquisitions (Pipelines), or that were just built differently (Exchange and admin console).
• Technical debt had accumulated over time, which significantly increased development time for new features. Additionally, the legacy navigation wasn't accessible or international-ready, creating barriers for future global adoption.

Goals

Out of those issues came the UX goals around the navigation project (separate from additional technical goals to implement):

• Modernize the look and feel
• Have frequently accessed functionality more prominent and easy-to-access
• Implement a more consistent navigation experience across our platform
• Improve navigation accessibility

Initial concepts

The initial concepts revolved around 2 main concepts:

• A sidebar-only navigation where all global and app functions would live, freeing up the entire main content area for users to work in.
• A global navigation bar at the top that would house more general functions (switching apps, search, favorites, help, user settings) and an app navigation sidebar at the left that would house app links and tables.

I also re-designed related features to be consistent with the top-level parts, such as the page bar, search, help menu, add record menu, and favorites menu.

One thing that I stressed to the team was that re-doing the navigation is a big change, and the look and feel of our current design system wouldn't let us put our best foot forward in that front. And there were things with data-density that could be improved from the current components. This would help drive forward our design system update.

Design feedback & refinement

Clean, sleek, modern, user-friendly, cool, familiar, consolidated, functional

I created several iterations of prototypes used for testing to get feedback, buy-in, and make sure the designs were feasible. Based on feedback from customers, non-customers, and internal stakeholders, we converged onto one design concept. These prototypes tested different navigation flows, related menus and dialogs, visuals, and content. From there, we converged onto the MVP that would be built.

Follow-up research & accessibility testing

Once the new navigation was built and launched in a closed beta, I ran some of the first impression and 1 month follow-up interviews. Our team also conducted accessibility testing, which I organized into our research database and synthesized.

Learnings and actions from our accessibility testing included:

• Working with our content designer to improve screen reader labels for clarity and accuracy
• Adding aria landmarks to jump to different parts of a page and deal with dense pages
• Adding a “jump to” menu for accessibility
• Look into keyboard shortcuts for common, quick actions

Shipped feature

The shipped navigation featured a global bar at the top that houses top-level items, user settings, and help. A collapsible and resizable sidebar on the left allows users to navigate their apps and tables when they need to or hide it otherwise. Going this route streamlined the interface for new users while maintaining feature parity and functionality for more advanced users and admins. In addition, it addressed a longstanding complaint from users about the legacy navigation taking up too much screen real estate.

Two other notable enhancements include improved accessibility (via improved screen reader labels, aria landmarks, and keyboard navigation behavior) and implementing a consistent navigation experience across all platform features, some of which had their own navigation bars.

Outcome & impact

In general, the new navigation has stuck with customers, especially in comparison with past features that we've launched. Positive customer feedback has revolved around better feature discoverability, improved use of screen real estate, and enjoying the modern look.

Negative feedback that we received was expected, the volume was in our expected range, and decreased over time. We were largely aware of improvements that could be made to the navigation, which we took as next steps.

The navigation project also drove improvements within our design team, especially in how we audit, document, and work with engineers on communicating accessibility specifications.