Designing the Distribution Visual for Visier's People Solution
With over 15,000 customers in 75 countries, including a number of Fortune 500 companies, Visier is a recognized global leader in workforce analytics and planning. Visier focuses empowering HR and business leaders to make smart and informed decisions to drive better business outcomes.
During my 8 month internship at Visier, one of the projects I worked on as part of the Analytics team was bringing box plot visual to the platform. I was responsible for the end-to-end delivery of this project, from meeting with stakeholders to establish design requirements to designing and experimenting with various data visualizations.
TIMELINE
Summer 2022
what did i do?
Research
Prototyping
UI Design
UX Design
Role
UX Design Intern
status
Shipped Q4 2022 🚀
visier’s platform
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.
Previously, the Distribution visual was only available in the Compare room.
Without a full screen visual, the current visual was missing a number of details such as specific numeric values, the ability to view different attributes, and the difference relative to the each percentile.
The Challenge
Design the Distribution Visual in the Explore Room.
Our goal was to redesign the Distribution visual by improving its workflow and implementing additional features. Our mandate was to make it as easy for the user to access the Distribution visual outside of the Compare room and be able to customize it according to their needs.
We wanted a solution that would:
My Role
I led the end-to-end design process of the Distribution visual between March 2022 and August 2022.
In addition, I worked alongside my Design Lead and two developers.
This feature launched as part of the Fall Update in Q4 2022.
For Visier customers, the Distribution visual answers the important question of showing how the data is distributed. We wanted to design a simple yet powerful UI for users to identify insights that average or 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.
Key Takeaways
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
Additional data can be shown during hover interactions, minimizes clicks a user has to take to analyze the visual
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.
Explorations
With the given challenges and key takeaways in mind, I leveraged the existing design system and explored a number of different features.
Experimenting with box plots
Starting blank, we wanted to identify the best way to display the Distribution visual. We experimented with different types of box plot data visualizations, colour variations, and forms of display.
Designing new user flows
As a new visual in the Explore Room, we needed to consider both the high level and nitty gritty of the full experience.
Visier's Distribution visual makes use of a category and qualitative value, in which attributes are selected relative to its category.
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, which showed both the category and attribute in one modal; and Version 2, which broke the two up into separate modals.
Navigating different use cases
A large majority of 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
Parts of the product designs are under NDA.
Please email me for a full case study.
The Launch
After a number of design reviews, weekly syncs, and user testing sessions, I moved on to hand-off in which I helped provide support to two developers.
I later had the opportunity to present to over 100 people in the organization at our Product Demo!
Visier taught me a lot about designing data visualizations and delivering scalable solutions to enterprise users. My biggest takeaways from my 8 month internship are:
Consider all use cases
When working with enterprise UX, it's important to keep in mind who you're designing for, and that a solution may not be a 'one size fits all'. With this in mind, it challenged me to explore all the options and create the most optimal design before hand off.
Iterating on constraints
While this project 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.