Network Mapping Experience —interactive data mapping feature set for a corporate group's in-house employee networking platform
🔒
This is a white-labelled preview of the project. I'm currently working on a password-protected full version.
Interaction Design
Pencil & Paper
Client
A holding company uniting a collective of 20+ of the world's top creative and strategy consultancies
Nov 2021 → Jul 2024
As you can assume, while integrated in this client team for close to 4 years, I was involved in the building of many different feature sets, each with its own rich root problem, intricate process and satisfying outcome.
In order to present a case study that's in depth to the level I want, I had to choose only one.
I'm going to walk you through the complete overhaul we did of the network maps experience of the platform.
tl;dr
While we internally hate the analogy, the best (shortest) way to describe this platform is to say that it is like an internal LinkedIn. Every employee of each company has a profile, that they can fill up with their interests and skills and the system regularly receives standardized data from the companies themselves about clients and projects.
The platform is the centralized place for all this intelligence to come together and to be leveraged to encourage transparency and collaboration.
The network maps feature set is a parallel experience that users can jump in and out of at any time. Every data point can be browsed as a typical details page and as a network map, contextualizing it visually to connected data which also has network maps of their own, à la Inception.
If you ain’t got time to read the whole thing, here’s what it ended up looking like:
(P.S. This is the white-labelled version, you can access the real stuff here with a password)(coming soon)
Challenge —what we needed to achieve
The platform's very first version was completely centred around network maps (or the graph, as they called it). It was just maps. You logged on, faced a search field, could pick anything in the database and "build a map" around it. It had sort of become famous in this population.
Over time, as the client built the rest of the platform, the network maps experience gathered dust, started feeling "flat" and one-level, and was lacking some much needed design TLC.
User tests kept confirming this shared feeling of overwhelm that people felt when facing search fields or blank initial states. "Where do I start?", "Don't know what to search", "What kind of information's even in here", etc.
The network maps experience was not getting the amount of traffic that the platform's map-centric roots deserved. We had a firm belief that the network maps held the expressive potential of data visualization to educate the collective about the expertise and interests they all share.
With this redesign, we needed to land somewhere between vulgarization, exhibition and placemaking.
The network maps are powered by Graph Commons
The goals the platform had to achieve
▶️ 🏁
Increase engagement
and adoption of the tool, one member company at a time
👁️👄👁️
Educate
employees of member companies about the larger collective they’re part of
🤝 👯
Enable collaboration
and intelligence sharing between knowledge holders
The design principles that got us there
🙋🌎
Self-centred experiences
To ensure users felt anchored in something familiar at any point within this broad universe
🔗🧠
Intelligent & Contextual
To tether each moment to relevant and related exploration paths
🌈 🎯
Comprehensive & Actionable
To expose the rich interconnectedness of the dataset while encouraging tangible initiatives
Status quo —what we started with
The original flow went like this:
From any details page, you could launch the map view but landed without any metadata or context
Map views had a two-panel layout
Additional context was only shown on node selection
And the secondary panel contained all available filters —there were a lot— and ended up not being used
The main CTA on most maps' primary drawer was encouraging users to go to the details page version of the data point's map they were on
The rest of them simply didn't have a CTA or any point of continuation, you were basically facing a wall. You had reached the end of your shallow rabbit hole.
Essentially, the network maps experience kept pointing you back to the parallel reading experience (as if it wanted to get you out of there as fast as possible).
In a nutshell, the user sentiment could be summarized by feelings of confusion and overwhelm.
Process —how we worked it out
Early ideas we had
We explored various navigation concepts from video games.
We fleshed out this principle of “selfish design", to make sure each network map was going to be designed around the viewer, prioritising what they have in common with what’s being shown.
We looked at landmark and placemaking patterns from map software.
We toyed with the idea of leveraging a third dimension — to integrate a notion of time on the z-axis.
Data clean-up
Before producing new maps, we took a good look at the data structure and re-mapped the data connections. For example, does it make more sense to show related companies or related people on a network map about a particular client? We asked ourselves which data types made more sense together and which connected data are people expecting to see on a given map.
From the cutting room floor
We started out by keeping the concept of side drawers to display meta data and filters before getting rid of them and included more curated in-map filters.
Quite early in the process, we landed on this architectural idea of “global maps” and “local maps”. For example, a large map displaying the cross-connections between all industries, and then a smaller map centred around a single industry.
We had many heated conversations about breadcrumbs (which, spoiler, didn’t end up making it to prod). They were especially tricky in the context of this feature set because of the “parallel” nature of the maps experience. You could build a breadcrumbs trail that included the details page version of Client A and the map view of Client A. It became very crowded very fast.
And we thought of various tools and interactions to ensure easy navigation and sensical placemaking. A “lens” switcher that could bring into focus specific subsets of data, a screenshot / capture tool to encourage sharing, a lookup feature to quickly navigate to a point of interest, node groupings that you could collapse and reposition, a mul-tiselect feature to accentuate certain connections while dimming out the noise, and many more.
🔐 Visual artifacts for these discarded explorations are present in the full case study (coming soon)
User tests
From our various rounds of tests, we heard from users that they appreciated the "lenses" concept to aid overwhelm; “give me a summary or the most important parts of what I'm looking at”. Applying multiple lenses felt natural.
We found that our wayfinding mechanisms were working; the CTA fork felt intuitive, and the global <> local map mental model was starting to sink in. Every tester was easily able to identify which map they were on.
They appreciated the UI being less cluttered than previous iterations.
It was clear that the screenshot tool was getting cut; they preferred their own ways of sharing specific views (regular screen capture, screensharing, share via URL, etc). They found more value in maintaining the interactive interest of the map view.
"Maps are good when I don’t know what I’m looking for - good way to explore."
"Maps visually give me breadth and the context pages give me depth but they are both useful"
Solution —what made it to prod
We landed on a final set of three “global” maps and a dozen types of “local” maps. All of which were interconnected, meaning you can jump back up to the “bird’s eye view” of any local map at any moment.
Example of a “local” map centred around the Climate Change topic
Example of a “global” map displaying the interconnections between all industries and clients of the network
We took the time to intentionally design proper node states instead of the out of the box ones from the library we were using. Different hover, focus and active states depending on if you had manually selected a node or if you were brought there by some automatic process like our Lookup search or the Lenses being applied.
A sample of our extensive set of hover tooltips, ensuring we were always showing contextual detail centred around the viewer
We developed an extensive set of contextual tooltips so that we could always dynamically show the most relevant metadata. As an example, for a single event, depending on who was viewing it on which map, it could be one of 13 variations because we had to account for notions of host, attendee, registrant, etc.
And we streamlined the tools and interactions so that they all flowed together.
Our Lookup tool acts as a “quick search” / “bring me there” interaction
Once you select a node, you are presented with a "fork” allowing you to choose between continuing to browse in this map experience, or to jump out into the reading experience of details pages
Each network map featured a handpicked set of “Lenses” you could turn on and layer
Happy outcomes
After launching this feature set, we observed that the maps were getting regularly used during pitch presentations to expose clients to the broad expertise and network within the collective.
"Since its launch over 20+ new initiatives and projects have been born."
🔐
Read the full case study here
Access the password protected page (coming soon)