Role
UX Designer — User Research, Ideation, Wireframing, Prototyping, UI Design
Team
Macguire Rintoul — Senior Designer
Cynthia Zhao — Software Developer
Jenessa Tan — Software Developer
Timeline
August 2022
Status
Shipped Q4 2022 🚀
Overview
Visier is a renowned global leader in workforce analytics and planning, dedicated to equipping HR and business leaders with data-driven insights that drive smarter decisions and enhance business performance.
As a designer in the Analytics team, I led the design and development of one of the key data visualizations within the platform—the Distribution visual. This tool is designed to help users more intuitively analyze and interpret complex data sets, making it easier for organizations to uncover valuable insights and take proactive action.
Following its launch, the feature experienced a surge in adoption, increasing from 12% to 42.5%. This rise in user engagement highlights both the effectiveness of the design and the growing recognition of the tool’s value in driving business intelligence across our client base.
—Context
Visier's platform is made up of several features or "rooms" that provides users with access to complex, rich and valuable insights. In the Explore room, users are able to explore a number of different key metrics through several different visualizations.
“Rooms” within Visier’s platform
Previously, the Distribution visual had limited functionality.
The current visual was missing a number of details such as numeric values, the ability to view different attributes, and the difference relative to the each percentile.
Existing box plot visual, only accessible to certain users
—The Challenge
Design a full fledged Distribution Visual in the Explore Room.
Our goal was to redesign the Distribution visual by enhancing its workflow and adding new features. We aimed to make it easier for users to access the Distribution visual outside of the Compare room and allow them to customize it to suit their specific needs.
We wanted a solution that would:
Simplify it for quick and easy analysis.
Give users more control over the data they’re viewing.
Create a platform for innovation and deeper engagement.
—My Role
I led the end-to-end design process for this feature from March to August 2022, collaborating closely with my Design Lead and a team of two developers. This feature was launched as part of the Fall Update in Q4 2022. Within just one month of its release, analytics revealed a remarkable increase in adoption, with usage soaring from 12% to 42.5%.
—Environmental Scan
For Visier customers, box plots helps answers the important question of showing how data is distributed. We wanted to design a simple yet powerful UI for users to identify insights averages and aggregated values simply can’t provide.
At the start of the project, we didn’t have a clear mission or specific goals for the Distribution visual.
Is our visualization intuitive and accessible? Is there better way to display distributions? These were just some questions that I was prosed with before beginning my research.
Without pre-existing insights, I wanted to get insight on the catalogue of box plot visuals used by competitors and how they were displayed to users.
Box Plots from PowerBI, Google Charts CandleStick Visualization, SAP Analytical Cloud, and Tableau, respectively.
—Key Takeaways
Reading box plots
Box plots are used as a convenient way of visually displaying the data distribution through their quartiles, with the minimum and maximum shown as whiskers
The most efficient way of display
The horizontal orientation can be a useful format when there are a lot of groups to plot. On the other hand, a vertical orientation can be a more natural format when the grouping variable is based on units of time.
Analyzing competitor flows to design better interactions
Hover interactions revealed additional data, making it easy for users to quickly analyze data.
—Explorations
1.
Starting from scratch, our goal was to determine the most effective way to present the Distribution visual. We explored various box plot visualizations, colour schemes, and display formats to find the optimal approach.
Box plot study
After exploring various types of data distribution visuals, we tested several options. Each offered a different perspective on the data, but we decided to stick with the classic box plot. It provided the clearest and most accessible insights into the data's central tendency and variability, making it the best fit for our analysis.
Classic Box Plot
Box and Whiskers
Spread
Colour Analysis
We leveraged the colour palette from our established design system to ensure consistency and clarity throughout the interface.
Viz/Primary/1 > Viz/Primary/2 > Viz/Primary/1 (40%) > Viz/Primary/1 (20%)
Focused value: Viz/Primary/1
All other value bars/dots: Viz/Primary/2
IQR: Viz/Primary/1 (40%)
Full bar: Viz/Primary/1 (20%)
Colour #1: Distribution
Colour #2: Employee
Colour #3: Difference line
2.
As a new visual in the Explore Room, we needed to consider both the high level and nitty gritty of the full experience.
In a typical box plot, there are two key components: a categorical variable (representing the category) and a quantitative variable (the values being measured).
The box plot displays the distribution of the quantitative values for each category, helping to compare the spread and central tendency of the data.
This was a new workflow, which allows the user to change the visual to the attribute they wish to see. Here we had two options:
Version 1: 1 Modal
Version 2: Two Modals
3.
Visier customers utilize the Explore Room to create data visualizations to include in their own analyses and presentations. Here, it was important for us to account for new use cases and components.
Things such as Cards, Micro + Macro Populations, and Distribution Benchmarks are just a few of the things that had to be accounted for.
—Final Designs
1.
Now available in the Explore Room, the box plot tool allows users to dive deep into employee engagement metrics, performance trends, and workforce diversity insights. With the ability to compare data across departments, regions, and timeframes, HR leaders can now make data-driven decisions with unparalleled precision.
2.
Whether you're tracking a single employee’s growth trajectory or comparing multiple team members, this feature ensures that all data is contextualized to each individual, making it easier to identify trends, spot areas for improvement, and celebrate achievements with precision.
3.
We empower users to gain more meaningful insights by breaking up complex features into two distinct actions: the subject and the attribute. This approach enhances clarity and control, helping users extract actionable insights more effectively.
—The Launch
After several design reviews and user testing sessions, we moved into development. Throughout this process, I collaborated closely with two developers, providing support and refining the design based on feedback and testing. This iterative approach allowed us to address issues in real time and ensure the feature evolved to meet both user needs and technical requirements.
After its launch, the feature saw a significant increase in adoption, rising from 12% to 42.5%. As a powerful visual tool, the box plot has become an essential part of the analysis process, helping clients quickly grasp data trends.
While the feature has delivered strong results, it’s still a work in progress. We’re addressing areas for improvement and adding new features such as the ability to add multiple box plots and displaying benchmark metrics in future sprints to better meet user needs and enhance its impact.
Presenting to over 100 people in the organization at our Product Demo!
— Reflections
Visier taught me a lot about designing data visualizations and delivering scalable solutions to enterprise users. My biggest takeaways from this project was:
A better understanding of enterprise design
While a version of this visual did exist prior to this project, there were a number of net new workflows and design components that we would be introducing to the platform. In this case, it was important to explore all the different workflows and understand what the pros and cons of each one was, and why was the one that we were going with the best?
Iterating on constraints
While Distribution was under production, there were a few constraints that limited the original design – such as labels not fitting when the distribution changed, or a visual or comparator with no numeric values. Here, it was important to be able to iterate existing designs without losing full functionality of the product.
Less is more
Data visualization often means portraying dense and complex information. However, our goal was to make the visual as simple as possible, allowing for an easy experience for users. This was important to keep in mind not only in designing, but also in presenting. When presenting to other teams, for example, it was important to not over populate slide decks and use jargon, but instead, keep things as simple as possible.