Navigation revamp

Overview

In the wake of a company-wide rebranding, the company looked to improve the product's navigation component and increase the usable space on screen. This project came in with high priority, and a quick turnaround time.

Design

Work began with rapid prototyping of designs, testing not only different layouts, but different color schemes. Once we had our first round of options in place, we stepped back to consider:

• Is the navigation easy to read?
• Does this pattern increase or decrease time-to-navigate?
• Does this pattern increase or decrease clicks?
• Does the color contrast pass WCAG accessibility guidelines?

The end result split our navigation into two sections: a primary navigation at the top of the page that would allow users to move between areas of the application with discrete purposes, and a secondary navigation that collapsed into the side of the page when not in use, increasing usable space on screen.

Development

With the design settled, I began working on a POC using HTML, CSS, and JavaScript. My work included:

• Accessible POC

  A fully functioning POC with full implementation of labels and keyboard controls following WCAG guidelines.

• Engineering handoff

  Full set of HTML, CSS, and JS files prepped for handoff to all engineering teams involved, including comments in each file for increased understanding.

• Collaboration and revision

  Worked with each team to adjust aspects of the code as needed to accommodate their existing libraries and code bases.

Through careful consideration, collaboration, and rapid prototyping, we were able to deliver a true, modern experience that improved navigability in the system. Through the new layout we were able to reclaim space on the page that is a precious commodity when working with large amounts of data. Furthermore, we were able to release the change across the entire product in a single release, for a seamless transition.