The Style Guide also served as a home for product design principles and general advice about typography, accessibility, and UX best practices. The Power BI design team was composed of designers who ranged from folks who had worked at Microsoft for decades, to young designers working on their first product team. The Style Guide was a way to help reach consensus on common paradigms and industry standards.

It was important to me that the Style Guide not be simply be comprised of single UI elements, but also more molecular pieces that need to be used across the experiences in the product. We often had inconsistent experiences in terms of the surfaces we used for flows in-product (when to use a toast vs. a dialog, for example), and the Style Guide served as a way to set standards on what to do moving forward.

I was surprised to learn at the time that such guidance wasn’t in place at Microsoft, so I took advice from other product groups to inform the suggestions made for Power BI. We significantly reduced the variables attached to Toasts (we used to have 4 different timer options for how long a Toast would remain visible before self-dismissing). This reduced complexity in product development and set a consistent pattern of expected behaviors for users.

Previously we had to house the ability to add visuals to the report canvas inside of the panes, because we could not render a ribbon inside of the web product. This forced us to use pivots underneath, which are contextual and appear and disappear depending on whether or not a visual is selected. This combination of factors confused users and obscured vital features like visual formatting. The pivots also combined formatting and the data wells, leading to a cramped and confusing experience. The panes simply mixed too many types of controls in one place.

The new configuration splits data and formatting controls, and the stacked labels ensure we don’t have to truncate labels, as you see in the old design.

More important than the visual improvements we undertook was the overall app reconfiguration I led alongside product. I tried dozens of configurations for our key UI elements, and the final arrangement establishes a logical, consistent eye-flow for users and groups controls by their functionality. Reading left to right, the user sees their data, and anything that relies on drag and drop functionality with the field list in close by. Controls that affect the entire report, from adjusting the canvas or adding visuals is housed in the Ribbon. Object specific controls are kept in an optional pane on the right side.

To help our designers resist the urge to design in hi-fidelity too soon, I created a wireframe kit in both Illustrator and Sketch. This gave designers a kit of parts that was based on our Style Guide components, but is styled distinctively to remove any confusion when presenting to stakeholders. The results are both easy to follow and obviously unfinished, preventing breaks in process where stakeholders might attempt to move forward with a design before proper sign-off happened.

The kit also helped the designers quickly construct flows that were accurate in scale and components to the eventual production result without the time drain that occurs when designing in high fidelity.