Sigma Computing
ui chrome redesign
Sales continues to report that deals are lost because of a variety of look and feel issues, including visualizations, colors and product chrome. Some takeaways we've had from internal conversations and customer calls:
Roughly 25% of customer feedback can be categorized as “delightful defaults” and 75% is requesting that Sigma support pixel perfect dashboards.
PROJECT STRATEGY
"From a strategic perspective, there is very little value in pursuing a pixel-perfect experience. There is an endless feature list, which we'll always be chasing down, and are entirely non-innovative. If someone really cares about pixel perfect, they are going to go with Tableau every single time. We'll get way more bang for our buck, and have a much bigger impact, with smart defaults and beautiful designs.
I know a lot of Leadership’s interest in this project comes from being able to replace Executive Dashboards (usually Tableau or PowerBI), which seemingly lends itself more towards pixel-perfect. We're going to need to resist the urge to add endless configurations, and focus more on delightful defaults. My hypothesis is that pixel-perfect isn't the main blocker to replacing exec dashboards. It's more about responsiveness, usability, and (most important) the ease of making something analysts feel comfortable showing to their bosses."
overview
my role
I led this initiative, setting down the strategy and design principles for the project, which touched every part of the Sigma UI.
THE TEAM
My entire team worked on this project, but the following individuals were most involved:
Stephen Del Valle (Lead Visual/UI Designer)
Jenné Leigh (Senior DSM Designer)
Simin Gu (Senior Product Designer)
project scope
The project scope touches the entire product UI (the “chrome) and UX improvements to the majority of the product analysis interactions.
TIMELINE
I set this project in motion approximately 3 months prior to my departure. While not yet shipped, the samples below are current and are planned to be delivered sometime in the first half of 2024.
Complex UX & Workflows
Dated Look & Feel
Ever-Changing Designs
Pick a typeface
Remove all color
Layer in the major UI design layout elements (but keep away from the weedy details)
Add in whitespace to all parts of the UI
Why pick a typeface at this stage?
What's wrong with Source Sans Pro?
Why remove all the color?
Why add whitespace?
As part of a prior project, all of the icons for the product were redrawn. We included the icons in greyscale for the tuxedo version, and eventually used the color versions as the rollover image during the “ADD NEW ELEMENT” interaction. We felt that the rollover brought an element of delight when interacting with this function, but didn’t cover the UI with color icons that drew the user’s attention away from what really matters: their data and visualizations on the canvas. This decision is consistent with the third Sigma Design Principle:
Data is king - it must ALWAYS be the star of the show: Sigma is all about users getting insights from data. They can't get insights if they can't see/use the data. If your design results in hidden data, or its comprehension is in any way impaired, it is unacceptable.
The icons were also drawn at a bigger scale (picture 48x40, container 70x60) to better stand up to the larger text in the inspector panel. While the font size itself didn’t change, the rendering of Lato at 12pt appears bigger than that of the same size in Source Sans Pro. With this new design, Stephen streamlined the UX and saved the user a click* when adding a visualization to the canvas. In the current version of the product, the user has to click “VIZ” and bring up a secondary menu in order to select the type of visualization they want to add to the canvas. In the new design, all of the visualization types are listed on the same element menu as all the others.
* A good UI designer will find opportunities to improve the user’s experience of the product by trying many different versions of a design and choosing the one that benefits the user the most.
The artwork for the new icons is (largely) the same size as the old ones, but the tighter bounding box (the padding around the icon) is considerably less. Now that more icons can fit in the panel the categories are clearer. Further, the grey banding has been eliminated in favor of simple 1px key lines between each element type.
