One of major issues in Power BI desktop app was its panes, there are multiple panes that had been designed in different times of product development and each had their own UI patterns and backend code.

This made onboarding, learning UI patterns and optimizing or updating them much harder for our users and developers.

Since I joined Power BI team I was trying to solve this huge issue and after many meetings and discussions I finally managed to convince our team that this problem needs to be resolved.

What is Power BI?


Lead Product Desinger


Microsoft Power BI


3 Product Managers

6 Engineers

1 Researcher

1 Content Designer


6 Months

The Big Problem

Power BI Panes Structure

As you can see in this picture each pane has a different functionality in Power BI and there isn't a consistent pattern across any of them.

Each color in this image represents a different size padding and margin. As you can see there are lots of styling inconsistency across all panes.

Not only the styles are inconsistent but also the structure of each pane is different, some have action bar, some don't. Some have empty state with a visual and some don't and so on.

This was my initial proposal, I brainstormed this idea with our team to bring all these panes into one cohesive pattern and style. It would help users onboard Power BI easier and make maintaining and updating them much easier. Also future development would benefit from predefined pattern and style.

What Were My Long Run Goals?

Reducing cost of design, development and maintenance

Improving users cognitive load and usability

More alignment with other Microsoft's Office applications

The Truth

We Can't Fix All Panes At Once

Although it was almost obvious that we can't tackle every pane in this project but we went trough multiple brainstorming sessions and discussed all possible scenarios and solutions. At the end based on previous user research data and user survey that we did it became clear that formatting pane has a high frequency of issues and user requests for improvement.

The formatting of visuals is a common task for our users and has been known to consume significant amounts of their time due to various issues, including:

  • Hard to find formatting options
  • Very cramped list of options without any IA and logic
  • Lots of guessing and checking
  • Very small space to do these tasks
  • Hard to tell what settings is related to what properties because of low contrast
  • No clear indication of what each icon means
Format Pane
The Basics

Format Pane Structure

Here is the structure of the formatting pane in Power BI desktop. There is a title, visual selection section, pivots that users can switch between building the visual, formatting the visual and analyze the visual.

Left image is when the build part is selected and right image is when user is in formatting pivot which has search and all properties and settings of selected visual.

Format Pane Structure
Format Pane Structure
Problem Demonstration

How Bad Is Formatting In Power BI?

Here is a sample of a basic task that users try to do, changing colors of gridlines in their visual.

First they need to select the visual, then switch to format tab which has tons of formatting options without any order and logic. (Notice the double scrollbars)

They try to find an option for gridlines in a long list of options and they see there is an option for guidelines which is weird because they are gridlines. Then they can switch the color of these lines, it takes about 14 seconds to do this very basic formatting task.

Problem Video
Sample Formatting Task Demo
What Were Our Business Goals?

We knew our users spend a lot of time making their reports look good. If we help them reduce this time and make beautiful report faster we will have happier user which in return they can make their reports easier to read for their consumers. Our definition of success was based on these factors:

Less complaints on Power BI forums

Less guess/check for formatting tasks

Higher NPS due to better usability

Higher new user retention

The Persona

Who Should We Design For?

Alan is a data analyst who is responsible for performing statistical data analysis and delivering insights about their domain to the business.

Their job typically involves: (For this project we only focused on first two tasks)

  • Hard to find formatting options
  • Very cramped list of options without any IA and logic
  • Lots of guessing and checking
  • Very small space to do these tasks
  • Hard to tell what settings is related to what properties because of low contrast
  • No clear indication of what each icon means
The Persona
What Were Our Biggest Challenges?

Along the way we faced many challenges and needed to coordinate with many teams to address these issues as well as our passionate users that as many of you know changing something after couple of years is going to be hard for them.

More than 200 settings

Very old code base

Many dependencies on other teams

Lots of passionate and advanced users

The Huge Collaboration

Here Is The Diagram Of All The Teams

Here are the list of the teams that I had to work with in order to update this specific part of the Power BI desktop. As you can see there were lots of collaboration between me and all these teams.

Team Dependencies
Team Dependencies
Audit Of Format Pane

By this time, we didn't have any centralized place or document that contained all these different options and settings of formatting in Power BI. My first step was to go over all these settings, categorize and review them to understand what we are dealing with and if there are any other issues that we missed during our initial conversations. By creating a comprehensive catalog of formatting options, I was able to enhance our workflow and ensure consistency in our collaborations.







The Findings

There Were Many Issues That We Didn't Know

After my initial audit, I noticed that there are more issues that we initially thought there were. It was a huge eye opener for myself and my team to understand what we are dealing with. Here are some of the issues that we didn't know about:

  • Which properties are shared between all visuals and which are unique
  • Naming and ordering inconsistencies
  • Wrong UI controls that have been used
  • Find discrepancy between some default values
  • Unnecessary double scrollbar

As you can see in this sample image, I grouped all properties into different categories to showcase the issues, inconsistencies in our formatting pane.

Sample Audit Of All Visual Properties
Sample Audit Of All Visual Properties
The First Victory

It Helped The Team Enormously

As I mentioned before this audit showed us many issues that we missed before. Suddenly all our team members started using this file and contributing to it. Researchers, content designers, product managers and even engineers started using and contributing to this huge file.

  • Helped content and PM team tremendously to view all these issues in one place
  • It became one source of truth for others as well to check the issues
  • Helped to find unseen issues that we didn’t know about
  • Later engineering team needed a comparison view between old and new UI while building new components
Audit File Zoomed Out
Audit File Zoomed Out
The Initial Survery

How Do Our Users Format Their Visuals?

We wanted to know how our users format the visuals in their reports, what are the steps that they take to acheive desired formatting, what are their top settings and properties that usually use. We ran a survery and we found these:

Majority of users (94%) mentioned this order:

  • Choose a visual type from the visual gallery
  • Add fields from the fields pane
  • Move fields around in the field wells of the visual pane
  • Switch to format pane to style the visual

Many users mentioned getting the data right (steps 1-3) before start formatting visual. This was one the reason for one of the design decisions that I made later.

We also wanted to know how our users try to format their report, what are their top settings and properties that usually use. This chart shows what settings and properties they usually use to format their visuals:





Data Labels












Visual Size


We also asked them what are most pain points that they have during formatting their visuals and these were their answer:

Hate double scrollbars

Search is not useful

Toggle switch look like sliders

Hard to find some settings

Hard to find formatting options

Need to resize pane because of truncated titles

What Were Our Design Principles?

Before beginning the designs, our team established a set of principles to guide our work moving forward.

Have consistent, convenient IA patterns and behavior

Industry standard and friendly naming conventions

Improve standability and search functionality

No hidden properties or settings

Let's Start Designing

Some Of The Early Concepts

After conducting a user survey, collecting feedback, and performing an audit of the formatting pane, I have developed several potential solutions to address the identified issues.

The main design changes that I aimed to test were:

  • As a result of the majority of our users indicating that they begin formatting only after finishing building, I removed the visuals picker from the formatting view. This decision created additional space for formatting options.
  • I relocated the pivots to the top of the pane and revised the icons' style to better reflect their respective functions.
  • Following my audit, it became apparent that certain properties of visuals are always shared among others, while some are unique to each visual. With this in mind, I suggested the idea of incorporating two tabs: one for general and shared properties, and the other for unique properties. By doing this, users will be able to quickly locate shared properties without having to sift through a long list of them.
Some Of The Early Concepts
Some Of The Early Concepts

We conducted another round of user research with 20 participants (10 current Power BI users and 10 new users) and asked them which concepts do they prefer. Here are the results:

Pivots At Top





Grouped Properties





Drop Down Picker





Here are some of the feedback that we got from this study:

“I like the clear design of the two tabs for formatting. It helps the user narrow down his options in order to determine what he is looking for.”

“It looks cleaner, and I prefer it because it is simply for formatting.”

“This saves time instead of having to look down a long, general list as in the first option, or the drop down of the third option.”

“I feel users might be looking for the chart info and the parameters to be included in the chart, not understanding the dropdown option.”

More Iterations

Improving The Grouped Properties Concept

Once I became confident that the grouped version was the best solution, I began exploring various ways to group properties in our formatting pane. I iterated through multiple options, seeking to find the most efficient and intuitive grouping scheme possible:

Iterations On Grouped Properties Design
Iterations On Grouped Properties Design

To understand user preferences on these concepts, we conducted another round of user research. Based on our findings, here are the results:

Research Results Of Grouped Properties Concepts
Research Results Of Grouped Properties Concepts
Almost There

Changes And Design Guidelines

After multiple rounds of iteration, research, and collaboration with various team members, we have confirmed a list of changes and guidelines. The following outlines our findings and decisions:

Initial Changes And Guidelines Of New Formatting Pane Structure
Initial Changes And Guidelines Of New Formatting Pane Structure

And here is the updated structure of the format pane and you can see what has changed compared to old version:

  • Pane now has a unique name when they switch to formatting
  • Icons are now more clear and related to the state that users are in
  • Two settings categories to differentiate between shared and unique properties
  • Added subcategories which improve readability and navigation with less visual clutter
  • Overhauled all UI controls and updated them to match newest Fluent guidelines
Updated Format Pane Structure
Updated Format Pane Structure VS Old Structure



I tested couple of different tasks in old and new UI and in some cases I see 50% improvement in finishing those tasks.

Here is a sample of same task that I showed in the beginning of this case study:

Updated Format Pane Structure
Changing Gridline Color In Old UI: 14 Seconds
Updated Format Pane Structure
Changing Gridline Color In New UI: 7 Seconds
Project Summary

What Did I Do And Deliver?

  • Responsible for end to end experience
  • Stakeholder interviews and collaborating with other teams
  • Gathering and documenting current issues
  • Brainstorming and ideation with team members
  • Collaborating with research team and preparing research materials
  • Finalizing designs and style guide
  • Defining guidelines and principles
  • Creating accessibility guidelines

Restructured and converted all visual properties and settings based on our guidelines into new design framework with side by side comparison to old UI for engineers to be able to compare to previous version if necessary. It took between 3-4 design iterations for each visual to finallize the new structure and property order.

Converting All Formatting Options Into New UI
Converting All Formatting Options Into New UI

Created fully dynamic component library in Figma where anyone can start making new settings for any new and upcoming visuals

Demonstration Of All UI Elements In Figma
Demonstration Of All UI Elements In Figma

Created a document that contains best practices and guidelines on how use this new framework. Here is a sample snippet of that document:

Sample Of Best Practices
Sample Of Best Practices

Created detailed redlines for engineering team with accessibility guidelines, here is a sample snippet of that document:

Sample Of Redlines And Accessibility Guide
Sample Of Redlines And Accessibility Guide
The Intro Animation

How Do We Introduce This To Users?

We wanted to show our users what has changed in formatting pane with a simple intro animation, I collaborated with our animation team to develop a concise yet impactful introduction animation that effectively communicates the key changes to our users.

Introduction Animation For Releasing This New Feature In Power BI
The Amazing Users Reactions

We Could'nt Believe These Positive Feedback!

In Power BI Desktop, usually when we release a new feature there is an option to opt-in for early preview of that feature and users can turn it on or off, When we shipped the preview in March, only 2% of people turned it off (some veteran users took a while to adjust to the change). We’ve had more than 30% increase in usage since we launched this re-design publicly in June 2022. Here are some of the users reactions from Twitter:

Users Reactions On Twitter When We Released This Update
Users Reactions On Twitter When We Released This Update
It's Not Done Yet

More Ideas To Improve Overall Experience Of Formatting

Our team's significant project efforts have resulted in making numerous user tasks significantly more efficient. However, we're not stopping there. My next objective is to incorporate object formatting capabilities into Power BI desktop.

During a week-long hackathon project at Microsoft, I collaborated with an engineer to create a prototype of my idea. As a result, users will be able to customize pane size, position, and visibility, as well as stack them together to create additional workspace if necessary.

Future Improvments In Power BI Formatting Prototype
Future Improvments In Power BI Formatting Prototype
The End