back
Node Relationships
Problem Statement
For each document that contains hundreds of clauses, it is hard to understand all relationships that parts of documents have to obligations that it dictates.
Process Flow
In order for users to create obligations in a uniform fashion, product leadership has identified a need for templatizing the process. Analysts would choose from available templates to create obligation. If no appropriate template was created, analyst would have to request one to be created.
User Personas
Node relationships was intented to give clients an overview of an anatormy of a document. Goal was to provide them with an ability to see how each component relate to one another. Each regulation publication was made up of large number of mandate clauses that needed to be associated with obligations.
Key Research Findings
After internal testing workshops, interviews with industry experts and collaboration with business analysts, we have arrived at several key drivers for our designs. It has become quite clear that most important thing was to provide accessible visualization that would represent structure of each document in our library.
Sketching Wireframes
Iterations + Discoveries
Initial designs that we put together were intended to break up document into annotated clauses which could be expanded to see related obligations, controls and processes. Because many documents were quite large, initial desings proved to be quite hard to manage.
After reviewing initial designs with users we took another aproach and proposed another interesting solution to show document structures and relationships. User would be able to pan around and
1
enable multiple nodes and see relevant connections. 2
Navigation and legend describing nodes was placed on the bottom.
In order to help users understand groupings -
3
nodes were arranged into columns which eliminated a need for a legend. 4
Page navigation was moved into a more prominent position and given more contrast for users to notice it. 5
Filter and search functionality was added to each column header as it was brought to our attention that in many cases there could be hundreds of entities.
User Flow
Navigation was designed in a way where user would be able to access traceability view from dashboard or from details of each of the publications shown in library. Most common behavior that people would follow was to find document from dashboard, review detail and then see all of the relevant information.
Improvements
Having received feedback that designs should take under consideration large amount of nodes in each section, I've decided to take a different approach.
1
I've decided to move away from free floating elements and put them into a scrollable section that would be easier to navigate and would reduce stress on the system.
2
Having an easy access to search for each column has made it easier for users to find nodes they were looking for. For each search result in one column, relationships in other columns would be adjusted and display updated relationships.
Once user has identified a node they needed more information on, they could see
3
relevant details that each nodes contains. If they decide that item they found is what they were looking for, they could 4
easily add it to the report that system would generate for the user.
Dribbble
Behance
Art Store