Design capability mapping

Mapping out internal design-focused expertise




UNSW Design Next


Doménique van Gennip

My role

Mapping UNSW’s design activity in a graph

At UNSW’s Design Next, we needed a comprehensive mapping of current design activities across the university. Design Next was a cross-faculty unit aiming to develop design across the university in teaching and research. My task was to compile a list of everyone researching, applying, and publishing in design. With that data in hand, we can work out where UNSW’s strengths lie and with whom.

To support my analysis, I built a bespoke network graph visualisation web app.

Explore the graph webapp yourself!

Finding everyone active in design

I gathered info from:

  • Published material classified under the 1203 Field of Research-code in recent years;
    • For future readers, the 1203 code has now changed but was design-focused;
  • Faculties' staff lists;
  • UNSW Find a Researcher page;
  • Google Scholar;
    • Once I had Scholar IDs for academics, a small python script helped to scrape citation data;
  • Talks with people across campus throughout our fact-finding exercise.

I ended up with a list of 150+ academics active in design. I catalogued their topics of expertise and publicly available information such as their personal website and social media handles.

Finding commonality through social network graphs

table data on left, graph example on right
My data was captured in a large table (partially shown on the left) but this made it hard to find commonality between people. Using a social network graph, as sketched on the right, it's much easier to see who has research interests in common. Thus, while collecting data in a table works fine, for analysis I wished for a network graph.

Finding commonality between people and strengths across the university required a more connected representation than a large spreadsheet could offer me. So I turned to a graph representation. In a graph network, every person is a node that may be connected to other nodes based on similarity. For example, two architects would be closely linked, whereas an architect and a robotics designer wouldn’t be so close. This allowed me to find clusters of connected people, driven by data on their research topics, faculty, School, etc.

network clustered by faculties
Academics clustered in the app by their respective faculties. Colour coding highlights Engineering in red towards the top, Art & Design in pink, Built Environment in green, FASS in orange, Science in blue, and Medicine in pale blue. It's clear a few people are well connected across faculties.

UI design and development

Because I couldn’t find a good existing network graph solution, I development my own graph representation in a web app. Development was done in javascript and standard web technologies. It allowed me live control over the parameters of the graph, adjusting its composition, which helped me make sense of the data (and enjoy the process a little more too!).

UI screenshot showing filter functions on the right and user dropdown view
Main elements of the UI: on the left, the graph itself with dots representing people and lines the connections between them. On the right, a list of topics, each of which can be toggled on and off, and towards the top-right fine-grained controls for the graph connections. Also in the middle, the 'more info' popup that's shown when hovering over someone's node.

Because the graph is best seen and enjoyed fullscreen, my focus was to keep UI elements out of the way. The righthand bar (for search, graph settings, and topics selection) can be folded away to give maximum space to the graph. When open, it’s semi-transparent to show as much of the graph as possible.

During development and early use, I realised that searching for topics or people would speed up my ability to get useful information out of the app. So whenever someone starts typing, the app will automatically select the searchbox and starts filtering. There’s no need to first hunt for and select the searchbox. Pressing Esc resets the search terms, allowing for fast changes to other terms.

As a nice extra, while searching, irrelevant nodes fade out to let relevant ones stand out. Also, clicking on a name will highlight others related to just that person. This makes it easier to see commonality between people.

network graph showing a distinction based on Art & Design staff on the one end, and Built Environment staff on the other, with Engineering staff mixed in
Another view showing a distinction based on Art & Design staff on the one end (pink nodes), and Built Environment staff on the other (in green), with Engineering staff leaning closer to the former (red nodes).

Ideas for UX improvements

To improve the user experience, I’d improve explanations for the control sliders as these may not be self-explanatory. Toggling topics on and off is not intuitive, so it should be explained somewhere. This is compounded by the potential slow response from the browser when it has to regenerate the graph, reducing immediate feedback. I can imagine others unfamiliar with the app struggling with these things.

Explore the design graph online

Explore the webapp graph yourself!

A few pointers for using the web app

The webapp was developed only for internal use, so it lacks the polish I’d desire for a more widely used tool. It’s still fun to explore the data (let’s face it: spreadsheets are dull, graphs are cool).

  • It’s a little slow to load as the page generates the graph on opening.
    • Making changes to the graph (when using the sliders or toggling topics) may also cause a noticeable delay.
    • Performance depends on the browser used: Firefox has somehow gotten slow, Safari is meh, Opera is fast.
  • Zoom in and out as usual. Controls can be sensitive.
  • Pan around the graph by clicking, holding and moving the mouse.
  • Start typing to search or use the top-right search box. It’ll search most data fields.
  • Enable or disable a topic by clicking on its label.
  • Right-click a label to exclusively enable it (and thereby disable all other topics).
  • Hover over a person’s dot to get more info on them, and get links to their data, website, etc.


All data shown in this version was publicly available and correct in early 2020. Significant organisational changes later in the year affected many people listed here, so it’s not quite representative even just one year on. Not long after developing this, it became clear the data was soon going to be stale and without a return to a stable situation expected in the near-future, we paused our capability mapping.