Step 6

Created a revolutionary navigation system

IA complexity was becoming an issue

As the product became more used, and users became more reliant up on it, its shortcomings in turn became more apparent. The issue of the relationship between projects and their associated technology needs and applications came to the forefront because users would spend a lot of time navigating those clades of information.


The hierarchy was very non-linear

The linear hierarchy on which we based the original navigation scheme no longer applied. We were aware of a mysterious paraphyletic clade of information called "P3" (which I would rename as "application") and had kicked the can of integrating it until we could figure out exactly what it did. Once we learned how it worked, it was clear that there would be a one-to-many relationiship between projects and applications. This obviated the natural hierarchy that made navigation intuitive and necessitated a new system that would not cause users to be disoriented.


This was the old home screen design

We had been getting increasing requests for a "dashboard" however, due to a lack of access to users, we did not have the kind of data we needed to create a dashboard. As such, I held off on such requests. At the time, the home screen of the application looked like this.


This was the new home screen design

The increasingly complex IA necessitated a better home portal with more direct links and data types. While designing a new home screen, I included a central data visualization based on something called "t-stochastic neighbor embedding" which plots points on a plane based on their similarity to each other. Because t-SNE enables the visualization of unlimited variables, it allowed us to create a data visual that did not commit to any specific metric (which we could not do without more user research). This resulted in a form of dashboard that at least would temporarily satisfy requests.


Devised a Z-axis interface to facilitate navigation

To solve the navigation issue created by the updated IA, I came up with a presentation format that changed the metaphor from the user navigating through data like a submarine (wherein they are the one moving) to a metaphor of the user staying in one place while the data they request comes to them. Given that the updated home screen and sophisticated search would reduce the need to hierarchically browse through data, this new format worked much better. The metaphor involved sheets of virtual "paper" in the form of modals representing the various data objects in the system. The user would never be disoriented by navigation because the home would always be in the background, one click away.


Created an alternative to conventional breadcrumbs

As users explore data by hyperlinking from one object to another, they will create a trail of history. However, instead of being a hierarchical trail of breadcrumbs, wherein one object contains another, like folders, the model was generalized to show objects pointing to one another. Once a user opened up a data object (such as a technological need or a project), each successive object that they opened up would appear to the right of it and then shift to the center of the screen. Clicking on the portion of the previous document still visible on the screen would return to that page.


Isometric graphics explained this novel idea

I used an isometric visualization to illustrate this concept to the stakeholders as well as the developers. I developed this visual communication format on the NutraTek project and it is an indispensable tool for explaining Z-layered interfaces which are where visual UI is headed in the future.