Visualize Collabs

Design, Code, Visualization

Project Context

This project was built as part of User-Centred Data Visualization module during my Human-Computer Interaction course at UCL. It is related to the design and development of network based data to show research collaborations amongst members of University College London Interaction Centre (UCLIC).

Team Composition:
Individual Project

My Contributions

My Roles & Responsibilities:
UX Research, Lo-fi and mid-fi Prototyping, Graph Plotting, Planning Evaluation Study

Duration:
1 month

Tools Used:
Paper & Pencil, Figma, Miro, JavaScript and Python libraries, MS Excel

The Challenge

The objective was to devise a data visualization (specifically around network-based data) that would enable users to better make sense of the otherwise complex tabular data.

The Solution

Based on theories and principles of network-data visualizations, I designed a custom chord diagram-based visualization to depict the tabular information. Instead of being overwhelmed by simply going through multiple pages and rows of data in a table, users could now better relate data points through an interactive and engaging data visualization experience.

Image depicting the suggested data visualization design in real world settings

Designed visualization re-imagined on UCLIC's webpage.

Design Process

The iterative methodology that was used to solve this problem, has been detailed below. It consisted of five steps: Define, Empathize, Ideate, Prototype and Evaluation. Driven by constant feedback at every stage of this process, the aforementioned steps ensured that the project stayed in-line with the human-centric design approach.

Understanding the Problem

Stage: DEFINE

The process began by understanding the problem associated with the chosen use case of depicting network-based data in a user friendly and intuitive way. The network-based data was related to the academic collaborations amongst faculty and members of University College London Interaction Centre (UCLIC). Currently this data is shown in a tabular form with pagination and filters. There is a plenty of scope to make this information more meaningful for the user. Check out the data table at the following link:UCLIC Publications.

Setting the Goals

Stage: EMPATHIZE

Now that the problem had been defined. The next step was to empathize with the users and define clear goals for the project. After a few discussions with classmates (also potential users), I was able to define three domain tasks that the final visualization would serve:
‍
- Which members of UCLIC have had the most collaborations?

- What are the most recent research topics that a UCLIC member has collaborated on with different co-authors?

- Identifying the details about connections of a given UCLIC member with a particular co-author.

Brainstorming Options

Stage: IDEATE

In the Ideation phase, I had to go through relevant academic literature- such as journals, blogs and books, to gather various possible options used to display network based data. I created a collection (using MIRO) of the most commonly used types of graphs that are employed to illustrate such a dataset. A snapshot from the MIRO board, depicted below:

The next step was to start building quick prototypes. The quickest solution was to scrap all the relevant data from the UCLIC portal and use a no-code way to plot a graph.

The first approach was to arrange the available data in a suitable format in MS Excel, so as to plot a heatmap, since heatmaps are the simplest visualizations used when there is a single quantitative attribute associated with data in a matrix alignment.

The heatmap was visualized in MS Excel, by encoding the area of each data cell with a color mark, using yellow for the lowest value and red for the highest value. The resulting heatmap (shown below) was not effective enough to display the entire data as it needed larger screen estate to be rendered properly.

No-code Prototyping

Stage: PROTOTYPE

Next suitable option in the list was to visualize the data as node-link diagrams, since node-link diagrams are well suited for tasks that involve understanding network based data. Graphviz, which is a collection of command-line applications that perform graph layout, was used to plot a variety of node-link diagrams, such as force-directed placement, circo, etc.

After an intial round of user testing, some issues were reported, such as - just by seeing the edges ne cannot tell how many times has the two nodes (or UCLIC members) linked by that edge, collaborated. Another issue was that both the visualizations were having occlusion issues, because some data labels were hidden behind others and also the edges were crosssing over names in the fdp version.

Code-based Prototyping

Stage: PROTOTYPE

Iterative Prototyping

Stage: PROTOTYPE

To address the feedback received earlier, I prototyped a new version with an improved readability factor. There is a property supported by Graphviz (called penwidth) that can alter the thickness of the edges based on the numerical weight represented by the edges. It was used to re-plot both these visualizations (as shown below). This change did allow the ‘strength’ of the connections to be identified somewhat better than the previous versions. But still, the labels and the links were hampering the readability aspect.

Iterative Prototyping & Refinements

Stage: PROTOTYPE

Due to all the aforementioned issues, the same data was visualized via a Chord diagram, another way to represent relationships between objects.
‍
The chord diagram was plotted using Highcharts.js and it was made interactive in Figma. Color was used as an identity channel. The length of the arc would vary as per the number of collaborations associated with a name. The occlusion issue was fixed as there was no overlap of node labels (names in this case) with other node labels or with connecting edges (chords in this case). The initial stage, when there is no user interaction with graph (fig below on the left), would show chords with dimmed down colors.
‍
Once the user hovers over a name, all chords originating from/ or ending in that name, would become active and show up in bright colors (fig below on the right). A tooltip would be displayed, showing: member name, number of collaborations and most recent researches/ studies of that member, along with an expand icon, that would open up a modal window on top of the visualization, depicting all studies undertaken by that member.

Testing Plan

Stage: EVALUATION

Early feedback sessions with a couple of users, suggested that they did find the new visualization more engaging, informative and intuitive. Although, since no design is flawless, to measure the performance of the newly suggested data visualization, an extensive plan of evaluation has also been devised.

A lab based study can be performed wherein users would be given a set of pre-defined tasks and their task performance would be assessed to realise the efficiency of the networks based data visualization. It can also be combined with Think Aloud approach to capture users’ thoughts at specific points during their tasks. These methods can give sufficient information required to evaluate this data visualization and make any iterative changes to it, if required.

‍