Agon - Company Relationships Visualization - Design Refinement Challenge

Welcome to Agon - Company Relationships Visualization - Design Refinement Challenge!

We are looking for your most innovative and interactive approaches to data visualization. The data that is being visualized is a series of relationship nodes that change depending on “view” or “user scenario.”  We are also looking for designs related to how a series of filters and adjustments can influence, change, and update the main visualization, and the best UX for this process. It is extremely important that you understand the information; every element of the design should work to tell a story about the data available and must use the space optimally. If you have questions please ask in the forum. For example, how does color tell a story about the data? How does node size portray information? What additional insights can the design deliver? Would an innovative view such as a fisheye help to pan over the nodes? The third part of the challenge is 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 document. These items include:
1. Zoom Close Up.
2. Search/filter.
3. Sticky node ; reorganize the nodes.
4. Zooming.
5. Nodes when zoomed-out (large number, 100+).
6. indication of how many nodes are being shown (on and off screen).
7. Company Relationships.
- 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 document. Include any checkpoint feedback updates. Areas that should be included in your designs:
1. Zoom Close Up.
2. Search.
3. Sticky node./  reorganize the nodes.
4. Zooming.
5. Nodes when zoomed-out (large number, 100+).
6. indication of how many nodes are being shown (on and off screen).
7. Company Relationships.
8. Map idea.
9. User Scenarios “Views”.
10. Graph options.
11. Any Additional Ideas.
- 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 take the provided document that describes wanted features for data visualization and apply it on a good design so we have a meaningful storyboard at the end of this challenge. We are more concerned with the main visualization than the outside filters and navigation; focus on the visualization design itself.

You are provided with a document (Data Visualization Features Document) to explain what we are looking for. There are a lot of interactions and functionality that changes/updates the main visualization.

Make sure that you are capturing these areas in your designs. If it is present in the document we MUST see it in your designs. If there is any confusion about the document please ask questions in the forum.

User Scenario “Views”
There are 4 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. We MUST see these 4 views represented 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).

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. Be creative if there is a circular reference
-    Ownership hierarchy is a directed graph (company a owns 30% of comp B, not the other way around

2. Collaboration strength Relationship:

• 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. 
  

3. Temporal aspect of (both) Relationships

• There are two types over temporal events:
  - One with starting date and end date (a company was bought on 12jan05 and sold on 22feb15).
  - Events with just the date of happening (combined filing of a patent in feb06, investment of 3 million in jan14)
• 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.

4. Change in Positioning

3 types of organizing the nodes:

1. Fixed place (long lat)
2. Force based on collaborations strength
3. Cluster/group by industry and within industry use force

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).

Design Requirements:

• Clean open layout.
• White background.
• The client really wants to make sure that all of your visualizations will work with a large number of nodes. While we don’t expect you to make 500-600 nodes, we do expect a large number that is representative (100+), and show what information value is left
• There needs to be an indication of how many nodes are available; on and off screen/ view port. This number could potentially be 1000+ total, but only roughly 100 could ever be displayed at one time in the view port (based on the required size of the nodes, associated information/ labels, edges, relationship lines, etc)
• 3 Scenario “Views”: Hierarchical Relationship, Temporal Relationships and Change in Positioning
• Efficient use of space (depending on view) that optimizes user insights

• Capturing and designing ALL requirements outlined in the Data Visualization Features Document. If it’s in the document we want to see your ideas and designs for it.
• 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, etc.
• Background coloring: White, Greys, Blues

Supporting Documents:

• Data Visualization Features Document: This is where most of the information, direction and requirements will come from for your designs.
• 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.
• 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) There are also a lot of examples and inspiration in the Data Visualization Features Document.

Required Features:

Please read the attached Data Visualization Features Document before you start designing

• Zoom Close Up.
• Search.
• Sticky node.
• Zooming.
• Nodes when zoomed-out: This should be able to handle and show what 500+ nodes would look like
• Company Relationships: The idea of having different line weights based on the strength of relationships. As you zoom out and nodes collapse and regroup into their parent nodes these lines should get thicker accordingly.
• Map idea.
• User Scenarios.
• Graph options.
• Any Additional Ideas that allow users to draw or investigate visual hypothesis

Target Audience:
Agon Strategy Consultants.  

Checkpoint Prizes
We are currently awarding 5 checkpoints at $200 each. However, the client is willing to pay for additional checkpoints for great submissions. Keep pushing and show us your BEST ideas and designs.

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.
- Optimal use of space and design to illustrate data insights

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.