Microsoft Power BI

Over the year and a half that I spent at Microsoft I had the opportunity to work on a variety of projects that included a multitude of skillsets from a complete overhaul of the mobile experience of Power BI to building out an entire set of product icons. That said, within this case study I plan to focus a few of my favorite projects during my time at Microsoft.

I can dive deeper into the details of each, but for now I want to show more of how our team came together and really broke out of the typical Microsoft design language and built a product that yielded some impressive results. This rogue approach to design within Cloud and Enterprise really peaked an interest throughout the organization and now you will find that the Power Suite products have adopted this design language that our team built out over the past two years.


Conceptual Model

Within the first two months of being at Microsoft a team of four including myself help spearhead what we called the "Conceptual Model" – an entire UX/UI overhaul of Power BI. Working on this in more of a stealth mode than anything we were able to reimagine the entire experience from connecting or uploading your data, creating data visualizations, developing an organizational structure that made sense all the way down to drilling into very specific details with a user's data visualizations.

Below you'll find some early iterations and documentation of whiteboarding sessions that we conducted as a team in order to better understand the current environment of the product. Our goal was to develop a more streamlined process for uploading data, creating visualizations, and asking questions about your data.


Conceptual Model

While still in stealth mode, I had the opportunity to quickly crank out some UI interaction animations inside of After Effects to then show to our prototyping team in order to build these out. Only a select few of these interactions ever made it into the actual product but it was great being able to quickly think, design, and build these with such an agile prototyping team.

Below are a few more UI interaction animations that did actually make it into the marketing site – I really enjoy working on things like this, not only does it add a sense of delight to the product but it also enhances the user's experience.


Power BI Design Language

As the Power BI team began to grow, the product became even more of a staple in Microsoft's Cloud and Enterprise division. That said, I had the opportunity to work with my good friend Bethany Heck on building out the marketing site, developing spot illustrations, and interactions for the marketing site of Power BI. Throughout this process I worked with our prototyping team to work on displaying the core features of Power BI in different way other than a one page scroller.

In addition to building out interaction prototypes in After Effects, I also was able to build out some illustrations that became the Power BI and eventually the Cloud and Enterprise illustration style which can be seen on Microsoft Azure, Cortana Intelligence Platform, and Microsoft's PowerApps.


Visual Design & Iconography

With a product that creates data visualizations of all sorts, one can only imagine how many icons are needed in different size resolutions. That said, I was solely responsible for creating and managing an icon repository over 2,000 icons – the visual style of the icons were inherent of early Office icons and therefore had very little room to change aesthetically. From time to time though, when new icons were being introduced we began to introduce new iconography as we moved forward as you will see below.

[unex_ce_button id="content_hlrkogrif" button_text_color="#ffffff" button_font="regular" button_font_size="36px" button_width="full_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#000000" button_padding="100px 0px 100px 0px" button_border_width="" button_border_color="transparent" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#0008ff" button_border_hover_color="transparent" button_link="" button_link_type="url" button_link_target="_self" has_container="" in_column=""]View More →[/ce_button]