National Instruments
Searchable Product Doumentation

National Instruments creates Test, Measure and Control systems for scientist and engineers. In 2015 National Instruments began a corporate website redesign due to outdated visuals and poor user experience. When customers needed to access support documentation for the products they had purchased, they had to manage through misleading information trail to find the content they needed. This caused many users to not rely upon the search capabilities of the website, but use an outside google search to direct them to the content they were seeking. The data team was asked to optimize the classification of pages in the websites support pages to give users a better experience.

Along with that, the content of the support pages was navigated by a Node System located on the left side of the page. These nodes had the possibility to go 12 levels deep, creating information overload to the user. I was asked to come up with a better alternative.  What I came up with, was a “stackable breadcrumb” that would replace the node system.

 

The Business Requirements

  • Improve In-Page search to result in more relevant content displayed to the user
  • Provide an improved navigation structure while utilizing the same screen real estate

  • Implement new visuals defined by new visual design style guides and interaction patterns

BookStack.jpg
OverShoulder_1.jpg

The Design Strategy

New Digital Strategy, Product Taxonomy, and High Level Visual Designs had been developed in collaboration with Centerline Digital (and outside creative agency). It was then up to the internal UX team to apply these High Level Visuals and use them as guidance to create experiences. This often times also required the creation of new interaction patterns that had to be validated through senior leadership on the Customer Experience team. This “Stackable Breadcrumb” that I created is and end result of this process.

My Prototype I presented to stakeholders: https://invis.io/8H7N4F4FR

The end result: http://www.ni.com/documentation/en/labview-comms/latest/lang/language-libraries/