UI / UX Design process for PowerBI

[dbuchter]

Because I don't come across many UX/UI designers working in Power BI, I thought I'd share my process for anyone wondering how to approach it.

I work for a pretty large enterprise with UX and design teams scattered throughout the organization, but I am the entire UX team for sales, finance and analytics. Among my other responsibilities, I commonly create wireframes and prototypes before working with developers on building PBI Reports (we call Power BI reports "dashboards" - we do not use the actual dashboard function in PBI). I have a work process that provides that initial prototype for stakeholders to review before we actually gather data sources and build dashboards. This workflow isn't really for one-off reports, but more for enterprise-wide dashboards that many people will use (internally) for sales reporting or client revenue, etc. A lot of these dashboards are emberrded directly into salesforce pages.

Back to my design process - I will typically meet with stakeholders about business requests and sort of sketch out what the request is. I then refine that sketch into a wireframe (I use Axure RP) or, more likely, a high-fidelity prototype of what I think the dashboard should look like. We then go through a few rounds of discussions with stakeholders and developers to refine the prototype until we all agree it meets everyone's needs. The advantage of the high-fidelity prototype is that it looks real, so stakeholders really understand it (wireframes and their low-fidelity can sometimes be confusing to business leaders), also when I hand it over to the developers, they know exactly how to make the PBI dashboard. I also provide specs that include colors of all the elements, font sizes, pixel spacing, etc. It's a pretty good process. As I mentioned earlier, I use a prototyping tool called Axure RP, but there are many others. One key feature (of pretty much any of these tools) is the ability to design and build a library of UI elements in the prototyping tool that mimic the power BI elements. This makes it much quicker to create new dashboard designs.

For the designers out there wondering about the design capabilites of Power BI, I can say from my two years of experience that it is limited! I've been working via trial-by-error and constantly run into design and interaction roadblocks. Some have gotten better over time as the PBI dev team makes improvements, but make no mistake, if you are expecting the same creative control as your prototyping or design tools, you will be dissapointed. You will also find little documentation on design-related solutionsand you may come away feeling that the app is half-baked, which it is, from a designer or even a CSS developer POV.

I hope some other designers can share their own thoughts and processes - would be great to connect.

[AnalyticsWizard]

I'd say that working with prototypes or sample data is tricky. There are certain visuals that can look great as mock-up, but when you feed it with the actual data it may come up that this visual is not the best one. It depends on the actual names (for example Client names that can be lengthy) or the distribution of the values (we expected 3 categories in the scattered chart but actually there are 10), etc.

What I'm wondering is if you have any formal process for approving the mock up by stakeholders?  

[dbuchter]

We don't really have formal sign-off process, but that's because we are mostly focused on enterprise reports/dashboards, which don't get modified that often. So, we whent through a round of creating all the fundamental dashboards a few years ago, and right now we are going through an enhancement to all of them, including ading a few others. We have independent groups creating their own dashboards for specific needs, and for them, we provide templates and design guidelines to follow.

As for the issues with mocking up data, I find that it's a pretty good practice to design for worst-case-scenario; Design with some really long client names, numbers, etc, just to prepare for those cases. I'm sure everyone here has run into a chart legend that is all truncated, barely legible and requires scroling - I hate those.

[Peter_Marsh]

This is really helpful for designers working in Power BI, such an exhaustive list of run downs. Love it!

Altho i feel like you coud cut down on such laborious processes with certain tools available in the market these days. Like, I use Mokkup.ai. It's been a lifesaver to create high fidelity dashboard mockups in like 10 minutes or so by dragging and dropping ellments. It also allows you to add colours to elements that align with your brand in seconds, so you don't have to spend time clogging around for it. I usually use one of the hundreds of pre built templates when I want to create a wireframe in a jiffy. 

It's helped stakeholders understand what its about and developers know exactly move ahead with the process. Give it a try. You will be saving so much time.

[Sahir_Maharaj]

Thank you for sharing your insights @dbuchter !

[Walls99]

@dbuchter  Thank you so much for sharing this heads-up! I am wondering if you can expand on this comment;

"For the designers out there wondering about the design capabilites of Power BI, I can say from my two years of experience that it is limited! I've been working via trial-by-error and constantly run into design and interaction roadblocks."

What are examples of these roadblocks?

We design in Figma and I am trying to understand if my team can use Power BI and follow our existing design system guidelines (Material UI based).

[Jocie]

Hi Walls,

I have been working on Power BI for 3 years now.  Though there are some improvements to the basic design tools of Power BI, they are still very limited and pretty basic. Like @dbuchter  mentioned, I too use layering technique and use some tweaks and hacks to get the look and feel desired in the report, but it will be just limited to the web version of the report.  Layering definitely won't work for mobile version of the report and on the Power BI dashboards too.  That is a big road block.  Also, with layering and tweaks, the basic feature like showing tooltips in web version too gets impacted.  The ability of having interaction between different visuals which are in the same page, by clicking on them also gets compromised to a certain extent depending on the design.  Sometimes we just have to depend on the filtering pane. I can list out some more when I start making the reports but those are my immediate thoughts.  Hope it helps.

Cheers,

[Walls99]

Hi! Thank you for your reply. 

Seems like a lot of these visuals come pretty pre-packaged. Do you think adding layers and over-customizing could be avoided? If I kept tool tips out and made only basic changes (placement, padding, color, corner radius, text) to meet some feel of consistancy do you think that could keep the mobile views and interactions clean?

[Jocie]

Hi Walls99,

The UX/UI designers that I work with use Adobe XD and sometimes InVision to generate the prototypes.  But in most cases, I couldn't replicate their designs 100% in Power BI because of the limited designing options it has.  I try to get the visuals close enough to match the design.

It is always good to avoid layers in Power BI as they limit the interactions.  As long as we use the pre-packaged options available within Power BI and play around the visual properties that are available, it would be good.  I haven't seen any issues in either mobile or web versions so far when I tried tweaking the visual properties to get the desired result.

Cheers,

[dbuchter]

Hi Walls99.

It has been 2 years since my forst post, so I will say that Microsoft has made some incremental improvements, but there will still be some barriers. I suggest digging into the tool and playing around. Some of you patters may be easy to replicate and some may require some alternative options. Last time I was in there (I support a broader slice of the org than I did back then), which was months ago, there was still a limited selection of typefaces. I think we looked into webfonts a while back and couldn't get that to work. The repitoire of basic design tools is there, but any sort of custom shape is not. The grid is still tricky and designing for mobile gets even more dicey for layout. "Layers" are there, but they are clunky. Generally we have been able to fake a lot of things to make them conform to our patterns, but it requires some creative thinking and plenty of googling. Your designers will end up gaining knowlege of how to minpulate data, which I think is a bonus.

[Walls99]

Thank you for your reply. We aren't using it yet but I've seen some demos. To me, it seems like the design could get close enough to our design system, but probably not perfect with the design tools as they are offered. Do your designers do all of their design in this tool or do they start in a different digital tool to mock up and then finalize in BI? 

[Anonymous]

Thanks for bringing this up. i wondered how power bi gives importance to design elements 

[Jocie]

Thank you for sharing your experiences.  There is very little information /features available in Power Bi UX related stuff and this information is very helpful.

Cheers

[dbuchter]

Glad to hear you got something out of it!

[parry2k]

@dbuchter good advice and thanks for sharing. When I work with my clients, I create a working copy with a sample dataset to show them how they are going to interact, drill up/down, drill through, cross filter/highlight, and then based on the feedback I further tweak the design. I'm not a designer by profession but working with businesses for more than 20 years, with my experience I translate their requirement to prototype and then take it from there. 

Since  I live and breath Power BI and using it since it was made available, I'm aware of its limitation and I do highlight during my discussion with the client in case they have different expectations. I found it is very helpful when I make the prototype using sample data that is based on actual data from the client. They can easily see the value when they see their sample data in action and communication becomes easier for further improvement.

Thanks for sharing the tools you use, maybe it will become handy sometime in the future. Cheers!!

[paulo_colacino]

@parry2k  (...) I create a working copy with a sample dataset (...)
Perfect. When I dont have a sample dataset, I create them in Excel spreadsheet and import to Power BI. 
Anyway, what I miss is having a tool that better documents paginations, popups, navigation buttons and other interface elements, especially for very complex dashboards.

[dbuchter]

You make an excellent point, and an important note that I left out - the design or UI only matters to a certain extent (in the stakeholders minds) until they actually see the real data visualized to determine if the dashboard is solving their problem, or answering their question about the data. Once my prototype design is handed over to the developers, we still can go through a few rounds with the stakholders once they see the actual data in the Power BI dashboard. I will jump into Power BI and make UI tweaks as necessary.

My case is unique in the sense that we have a separate resource for UI/UX (me) - not every team handling reporting does. My responsibility is to elevate the user experience among all of the tools our group interacts with, Power BI being just one part of that mix. Therefore, I'm not that interested in being an expert at data modeling and prefer to solution outside of Power BI for UI design. If Power BI were my primary resposibility, I would most certainly design and develop exclusively in the tool for exactly the reason you mention - to be working with the actual data from the get-go.

[MEFOX]

I'm looking for a UI/UX design guide. It doesn't have to be built specifically for PBI. We are trying align all of our Microsoft reporting tools around a set of design standards to create uniformity. Does anyone know a good resource for this type of guide. 

[dbuchter]

Intereting question. So you are looking for a more general type of guide or documented best-practices. I don't have any great examples, and I have looked. There are certainly dicsussions and articles in the UX/UI spere that talk about data visualization design, but I haven't seen anything in particular that inspired me personally. Take a look at Nielsen/Norman Group - a big UX community with lots of articles and best practice recommendations on digital platforms in general - search data visualizations, you might find something useful there.