Visualizing client interactions in a business to business context. A design exploration case study
In this presentation, we'll start with an introduction and then a deep dive into
the four visualizations we explored for B2B client interactions,
followed by our learnings and reflections.
For this project, we spoke to client facing
representatives across different accounts to understand their workflow,
challenges with their current tools, and pain points they experience in their client relationships.
We gathered four main pain points from our user study.
B2B Commerce, unlike b2c, is a relationship
between two organizations, and the client knowledge is distributed among a multitude of individuals.
Most sellers have their own way of recording their communications
and they are not all captured in a shareable way.
Existing CRM tools are not suitable because they do not consider inter-organizational
relationships. Therefore most communications go unrecorded and as a result,
institutional knowledge of client organizations and its value remains largely untapped.
To resolve these pain points, we built a set of interactive visualizations
that can be used to understand client relationships
and to gain meaningful insights for business development.
We have four interconnected visualizations that provide our users with valuable insights into
different aspects of their business accounts.
We'll go over each of the visualizations individually
and detail our design process and the challenges we faced.
The first visualization shows interactions between the two organizations
and among their members.
Their involvement and interactions change over time
and our users need a tool to understand these
relationships and patterns. Specifically, they want to easily
see who interacted with whom the most, how often they interacted, and what topics they discussed.
The proposed solution was a visualization that plots the provider organization on one side
and the client organization on the other. The two sides are then connected
with lines that represent interactions, creating a network that is of the account.
On the left, users colleagues are listed in the order that considers not only their activity but
also the organizational hierarchy.
And the client organization is on the right in the same format .
The lines are in different styles to illustrate the nature and strength of the connection.
We also added tags for high level topics associated with interactions, which not only
label them, but are filterable.
As demonstrated here, a seller can use this visualization to explore
interactions between individuals.
He can select his colleague, Ann Hill, to see all the client
contacts she has interacted with in the past and the high level topics she has discussed with them.
There were some challenges we faced. A one-on-one call should carry more weight than a group meeting.
Visually representing this could be explored in future iterations.
Some attendees of a meeting play a more important role than the others,
and their significance needed to be differentiated.
Lastly, extracting and identifying the most important topics was a challenge too.
Our second visualization is a timeline. Our users needed to be able to see the progression of their
interactions and focus areas. However a simple timeline would not suffice.
Our approach was to enrich the timeline with additional layers of information.
Each interaction is represented as a bubble, with its size corresponding to the number of
people involved, and the background is a heat map of activity.
The timeline also has a zoom bar to control the units of time
which can be set to quarters months weeks or even days.
When a user has selected a topic from the left panel, this adds a row to the y-axis of the visual.
Users can add multiple topics to see how the records differ.
They can also hover over the heat map
or select a bubble to view more information.
For this visualization, we needed to make sure that it was not overly complicated.
So we decided to use familiar graphs and layouts.
Handling duplicate interactions that cover
multiple topics were also difficult to deal with.
And in the future we could use natural language processing
to extract the sentiment of meetings and use it to organize the bubbles.
The third part is the network visualization.
In most social networks, the connections are based on a single dimension, the degree of association,
which fails to demonstrate the nature and strength of the relationships.
but with our design, sellers would be able to discover non-obvious connections
that are based on past interactions, organizational roles, career history, and personal relationships.
The network visualization plots a users colleagues
and client contacts in two different colors and their nodes vary in size
based on their relevance.
The links connecting them denote types of connections and their strength.
Here, the seller has selected Jane Smith a client contact, as the target.
The left panel displays relevant details
and he can request the tool to recommend the best paths to reach out to her.
Conceptually, we approached this visualization with the user as the starting point, target contact as
the destination, and connections between the two as routes.
Here on this screen, the recommended paths to Jane Smith are highlighted
One of the challenges we faced was to visually represent members that moved
between accounts and organizations. For future design explorations,
we see connections being made between multiple targets and organizations.
We also recognize calculating optimal connection paths as an area of algorithmic interest.
The topics visualization is another way for users to see the details of their interactions.
They needed to see the most relevant topics to address with the client, so that they could recommend the best
products and services possible. This visualization shows the popularity of various topics through
natural language processing specifically, latent dirichlet allocation. The algorithm would cluster
keywords that appear in similar contexts across meeting notes. These clusters are represented by
bubbles, and the left panel allows the users to select them like in the timeline visualization.
The topics bubbles vary in size to represent cluster population, and they are positioned by
semantic distance between them. Users can hover over the bubbles to reveal further insights.
The topics visualization was the last visual that we worked on, and we did not get as much
time to investigate and iterate on its design with feedback.
Although we did research NLP and consult with an expert on language processing
we could not fully explore which methods would be best.
We also struggled with translating NLP results like semantic distance into a user-friendly visual.
Despite some overlap each visualization offers different kinds of insights.
Interactions capture communication between organizations and among its individuals.
Network reveals the best paths to contact and connect with clients.
Timeline shows how these interaction patterns change over time
and topics help sellers to focus on relevant solutions.
Through the project, we learned that visualizations are only as good as their data sets,
and by showing what is possible we hope to motivate sellers to record more of their interactions.
Unfortunately the development of this project was halted by mandated incumbent systems,
but we see an opportunity for integrating our visualizations with existing CRM tools.
With this case study, we hope that the larger HCI community may benefit from our experience and learnings.
Thank you!