Agon - Company Relationships Visualization - Initial UI and Visualization Design Concepts Challenge

Welcome to Agon - Company Relationships Visualization - Initial UI and Visualization Design Concepts Challenge!

We are looking for your most innovative and interactive approaches to data visualization. The data is being visualized in a series of relationship nodes that are changing depending on what “view” or “user scenario” you are currently in. We are also looking for ideas related to how a series of filters and adjustments can influence, change, and update the main visualization, and what the best UX would be for this process. Taking into account that the information value needs to be high. The third part of this is would be to provide an effective and useful UI layout to frame the interactions. Think about what will be user friendly, but also visually engaging and highly interactive.

Round 1

Submit the following for Checkpoint feedback:
Make sure that you are capturing ALL of the functionality, filters and visualization updates that are present in the wireframes. These items include:
1. Hierarchical Relationships (ownership structure).
2. Collaboration Relationships (two companies collaborating).
3. Temporal aspect of (both) Relationships.
4. Change in Positioning of the nodes (companies). Re-Organization of the nodes based on:
# Force algorithm based on collaboration strength
# First group on industries and within industry force algorithm on collaboration strength.
# Fixed place (long-lat variables).
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Final Design plus any Checkpoint feedback:
Make sure that you are capturing ALL of the functionality, filters and visualization updates that are present in the wireframes. Include any checkpoint feedback updates. Areas that should be included in your designs:
1. Hierarchical Relationships (ownership structure).
2. Collaboration Relationships (two companies collaborating).
3. Temporal aspect of (both) Relationships.
4. Change in Positioning of the nodes (companies). Re-Organization of the nodes based on:
# Force algorithm based on collaboration strength
# First group on industries and within industry force algorithm on collaboration strength.
# Fixed place (long-lat variables).
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Challenge Details:
The goal of this challenge is to start establishing a general direction and design language for the visualizations that will be the focus of the subsequent challenges.

You are provided with wireframe screens to explain what we are looking for. There are a lot of subtle interactions and functionality to changes/updates the main visualization. Make sure that you are capturing these areas in your designs. If it is present in the wireframes we MUST to see it in your designs. If there is any confusion about the wireframes please ask questions in the forum.

Design Requirements:
- Clean open layout.
- White background.
- Navigation in left pane; filters on top (inspiration: google analytics style in layout and colors).
- User friendly, easy to navigate and clear UI elements.
- Open branding, but use existing app as your guide (Existing App Screenshot.jpg.zip). Your designs should be able to integrate into the existing app and not feel out of place.
- Make sure you are picking up similar styles, colors, look & feel, general UI, etc. from the Existing App Screenshot
- Background coloring: White: #FFFFFF , Greys: #F2F2F2, #f5f5f5, #fafafa, Blue: #008cba, Light blue: #e4eff3. Foreground coloring:Link color: #3b7bea Text color: #222222.

Areas to Explore:
- How to present the data and relationships in a clear and understandable way; especially when there are lots of nodes (100-1000)..
- Labels and overall node information.
- How to visualize temporal changes (connections have a from-to date).
- How do elements change and evolve when the visualization is zoomed in and out? How does this affect labels, node sizes, relationships, etc.?
- Re-organization of nodes based on industries: When a user filters or refine by industry the visualization should update its layout to group the same industries together. Color coding will also be beneficial to help with the visual grouping.
- How to high-light /zoom to parts of the graph.
- How to collapse the graph when a node has more than 1 parent.
- Relationship strength: Lines/ edges between nodes should show the strength of that relationship. When a parent node/company is collapsed it should combine all of it’s children company relationships and update the main parent relationship accordingly. (Relationship strength.png)

Supporting Documents:
- Example Dataset (Example Dataset.xlsx).
- Wireframes (wireframe.zip).
- Branding Guideline (Existing App Screenshot.jpg.zip); Basically the whole project is to create a d3js object that visualizes the graph which responds to filters, layout choices and navigation.
We already have applications running where there is filtering (on the top of the screen) and navigation (left pane) and a main analytics object (for example a barchart). The idea is that we use this design for showing the graph object too. This is the screenshot for the general UI design. That means that I’m not looking for a new design to navigate or to filter, they can just use the existing design. The challenge is (mainly) on the graph-object itself. If there is an existing d3js filter object that designers want to reuse, fine, but the design/development efforts should be on the graph object, not on the screen layout or filter/navigation objects.
- Relationship strength example (Relationship strength.png).
- Inspiration Doc: Use these examples more for style and aesthetics. Your branding and colors should be pulled from from the Branding Guideline doc (Existing App Screenshot.jpg.zip)

Terms Definitions:
Force algorithm: When positioning nodes of a network on a canvas for visualization, it is desirable to place nodes with strong, or many connections close together. This can be achieved by simulating the edges to represent an attractive force between nodes, so that each node on the canvas is ‘pulled’ by all its neighbors to its final location.

Collaborations and collaboration edges: Companies often work together in executing their R&D, for instance by bringing together pieces of knowledge in the two companies to develop new technical ability. These types of pairwise collaboration can be represented as edges (next to the ownership relation edges).

2015 collaboration relations: These collaborations change over time; in the one year there may be 10 people involved, while the next year it’s 50 people from the two companies working together. It is a key aspect of this visualization to show how the relationships between companies change. The “2015 collaboration relations” refers to the particular state of all the relationships between companies in the year 2015 (s an example).

Longitudinal phenomena: Longitudinal phenomena refer to relationships that exist over an extended period of time, and that may change in nature over time. For instance the strength of a collaboration (how much are you working together) is a longitudinal phenomenon. By contrast, a financing event is highly localized in time; you can point to the moment in time where it occurred. A third type of relationship in the dataset is the parent-child relationship. This is again different in that it has no temporal property; it does not change its strength or whether it’s true over the period of time the dataset applies to.

Deliverables:
We are looking for more of unique interactions and UX methods/patterns for addressing the 3 unique user scenarios/visualizer relationships. We are not setting specific screens, but your designs and ideas should focus on and address outlined under each of the user scenarios/visualization relationships below. Again, use the wireframes as your guide for items that we MUST see in your designs.

General requirements:
- As a user I want to see a graph with all the company nodes.
- On mouseover of a node there should be a popup showing the node label, and other useful attributes.
- On mouseover of a node, the graph should highlight all nodes belonging to the same type or same parent as the pointed node.
- On mouseover of an edge node there should be a popup showing the edge label, and other useful attributes of that edge.
- On mouseover of an edge, the graph should highlight the edge and the two nodes belonging to the edge.
- I want to be able to zoom in and out onto on a part of the graph, preferably by scrolling, for better visual overview of crowded parts of the graph.
- It should be possible to color nodes and edges nodes by any attribute that is assigned to them: country, parent (discrete colors), but also a ‘heatmap’ to indicate the intensity of continuous numeric measures.
- Similarly, numeric measure can be chosen to represent the size of a node or the thickness of an edge.
- The position of the nodes should be determined by the graph-object through a variety of algorithms, such as force layout.- It should be possible easily to add new layout algorithms to the backend of the tool.
- It should be possible to collapse/expand nodes according to acyclical, directed edges (parent/child relationships), preferably in levels.

User Scenarios/Visualization Relationships:
There are 3 different user scenarios that will directly affect how the visualization looks and is functioning. It might make sense to think of these user scenarios as different “Views” within the application.

1. Hierarchical Relationship

-     Show the network with nodes with the ability to be filtered by some criteria (like industry and geography).
-     Nodes are positioned by a force algorithm, according to their 2015 collaboration relations.
-     Initially we see all nodes and their collaboration relations. We can then collapse nodes to their parents and then see the network where collaboration edges are the aggregation over all collaborations between their subsidiaries.
-     It’s also possible to at once, collapse all nodes to their parents.

2. Temporal Relationships

-     Show the network with nodes filtered by some criteria (like industry and geography).
-     Nodes are positioned by a force algorithm, according to their 2015 collaboration relations.
-     Financing events occur at an instance in time.
-     Collaborations by contrast are longitudinal phenomena.
-     We want to visually see, whether and how the events of financing events follow or lead the collaboration phenomena. For instance, whether the collaboration between two companies is followed by the investing of the larger company in the smaller one.

3. Change in Positioning

-     Show the network with nodes filtered by some criteria (like industry and geography).
-     Nodes are positioned by a force algorithm, according to their 2015 collaboration relations.
-     By default, nodes are pre positioned according to their Ownership edges.
-     We want to be able to introduce an additional parameter to influence the positioning, for instance so that nodes that share a geography or industry are grouped together. When they collaborate, they are positioned even closer.
-     Alternatively we want to position the nodes based on a long-lat value (for example on a world map).

Client Specific filtering criteria for the network and nodes:
Please refer to example dataset document
- The client would like to be able to show a subnetwork by geography (C-column in Excel), or set of countries (US and Canada, or Sweden, Norway, Finland and Denmark)
- The client would like to be able to show a subnetwork by industry, for instance all companies with an industry code (D-column) either in the range 1000 through 2999 (Manufacturing) or the range 8500 through 8599 (Education).
- The client would like to be able to show a subnetwork, composed only by edges from 2012 or 2013.

Target Audience:
- Agon Strategy Consultants.  

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG image files based on Challenge submission requirements stated above.

Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.