Data visuals & interaction design
Role
Lead product designer
Summary
Salesloft's Analytics is a robust tool that helps teams understand how effective their sales process is by tracking key metrics and trends.
Analytics collect data across the platform based on activities, engagement, process adherence, and outcomes. This data is then aggregated into various dashboards, panels, charts, and reports. Sales teams can refer to the metrics and available insights to help make data-driven decisions, improve collaboration by sharing insights across teams, and enhance sales performance.
Project overview
Salesloft's Analytics are intended for use by various roles within a sales organization, including sales managers, revenue operations teams, and individual sales representatives. Sales managers and operations teams primarily use Analytics to track performance metrics and identify areas for improvement. Individual sales representatives can use the feature to monitor their progress and adjust their strategies accordingly.
​
Our platform was looking to revamp the outdated analytics view to include enhanced interaction, accessible visuals, and ultimately to bring helpful insights to users based on their performance.
What was the challenge?
Our platform’s performance visualization experience was outdated, inconsistent, and difficult to navigate, leading to low adoption and user frustration. Customers struggle with fragmented data access, inefficient filtering, and inaccessible layouts across screen sizes.
Additionally, the lack of drill-down capabilities prevents users from understanding the source of key metrics, reducing trust in the data. To improve adoption, we need a refreshed, user-friendly design that streamlines navigation, ensures accessibility, and provides interactive, transparent insights.
Project Goals
Research - improved navigation
We take important steps to listen to our users and understand their needs.
The largest initiative we took while undergoing research with our UXR team, was to understand current workflows and how users would expect to navigate through their data.
​
-
Customer feedback centered around how you were able to access analytics pages in separate parts of the platform, disrupting workflow, adding time to tasks, and making it more tedious to make meaningful connections between data points.
​
-
By surveying multiple customers in multiple roles (Rev Ops, revenue leader and manager users) a four item sub-navigation menu was chosen to organize data. This menu allows for us to reorganize existing content to be more easily navigated by end users as well as ensures future analytics on unknown topics can be easily slotted in.
-
It was then further tested to validate understanding and expectations when navigating through.
Connection
Primarily, we would show users their data through charts on a dashboard and they could choose to click for more detail into a table break down view.
​
It was understood that this created a disconnect in consuming the data, so we chose to consolidate into one primary view. This allowed for new interaction of the charts to filter the table below, allowing for proper drill down into the numbers.
Attention to detail
Using high charts as our primary source of how we would be building these components, I researched interaction patterns. As users interacted with our charts, it would filter the table below.
It took a great amount of exploration to refine the details.
- What does hovering look like?
- Are users able to multi-select?
- What could be a selected state pattern for different types of charts?
It was also important to improve current experience. Hardly anyone knew that a metric in the legened could be clicked upon to hide it from view. There was no indication upon hover that they were clickable, so I added in a few suggestions.
Interactive & insightful
Providing flexibility and consolidation in data visualization is all fine and dandy. However, if the data we provide isn't giving enough value, it doesn't matter if a user can filter down to it in a table.
​
What next step can a user take with that data? If Jackie Callahan has the highest response rate to her emails, but you cannot tell me which emails her recipients are responding to, what good does that do for me?​
Responsive
Accommodating to users, other factors going into this work:
-
Review of responsive break points at 2560, 1680, 1440, 1280, 960, 500, 390px sized pages.
-
Color palette to make sure contrast ratios all met WCAG AA standards
-
With many, it is easy to utilize the well known understanding of Green, Yellow, and Red. However, this is one of the worst approaches in terms of color blindness an affects a large amount of users.
Set up additional testing for drill down:
- ​When a use clicks on a metric within a chart:
- how does it affect other charts on the page?
- How are top row filters affected?
- What interactions are expected when canceling out of a selection?
​​
Schedule a meeting with our team product analyst to identify key metrics to measure adoption and success. ​