Workspace Dashboard

Styra is a company with a web-based application called DAS. DAS enables enterprises to systematically define, enforce and monitor policies across cloud-native environments such that security rules, compliance regulations and other operational policies are automatically enforced.

Our sales team needed a quick win to show potential customers the value of our product. Through rapid iterative design and close-knit collaboration, I delivered a dashboard that helped our sales team demo value while also considering the requirements of users who need to gain comprehensive insights about their policies through clean design and visualization.

Role
UX Designer
Team
John Snow (PM)
Tetiana Kelly, Marcus Stade (FE Engineer)
Ryan Grant (BE Engineer)
Me (Designer)
Duration
Jan 2023 - Feb 2023
Status
‍Shipped! 🚀

The problem

Our sales team approached the product team with a request to easily show prospects in the sales pipeline the value and usage of DAS. Taking their request into account, we considered the different ways we can show this information for our main persona, the platform engineer. I took over this project from another designer who had left. To finalize on the requirements needed for the widgets on the dashboard, I had extensive daily meetings with the team to get scope. Due to timeline expectations, rapid iterations were made consistently to meet launch.

The Visual Display of Quantitative Information by Edward Tufte

To expand my knowledge of preparing statistical graphs, I studied a classic book called “The Visual Display of Quantitative Information” by Edward Tufte and tried to apply some of its principles in my iterations.

One of the main widgets in the dashboard is the Decisions widget, which displays the count of decisions by its type.

‍

At the time of the mocks, we didn’t have an accurate representation of the data. When our backend team gave us sample data more indicative of our customers’ environments, we knew we had to adjust the scaling.

‍

We had designed the widget assuming that we were working in the thousands, but it turns out the scale could range from single digits to millions. How might we show the Y-axis such that the graph is still legible?

‍

Following Tufte’s advice on erasing redundant data-ink (within reason), I opened up the space on the Y-axis by dividing the ticks into no more than 3-4 intervals. Since the range of the data points were spread so apart, we also added a trendline that appears upon hover. The trendline allows users to compare bars closer to each other in value. This helps the graph become truthful and revealing, another principle from Tufte’s book.

‍

Element Explorations

Apart from determining what kind of questions and visualizations will be most helpful for our users, we also had to consider elements such as color (meeting accessibility standards), the responsiveness of the cards based on different screens, and interactivity of the graphs based on a new set of data visualizations components (Nivo). There was constant and rapid collaboration daily.

Learnings

While we typically imagine the design process to be linear (from discovery to concepts to prototype to validation to final visuals), I learned that at fast moving startups, this most often is not the case. For this project, the team began with daily stand ups to flesh out the APIs we had versus what we needed versus what we wanted. For this project to be successful, there was constant collaboration happening across teams, and honestly, the collaboration made the project way more fun.
‍