PowerBI UI Kit
Designing PowerBI dashboard mockups in a few minutes without the hassle of starting from scratch.
*Specially designed for the designers in Deloitte's Insight Studio.*
OVERVIEW
An idea by a group of designers was executed for the rest of the designers in the studio. PowerBI UI Kit was an internal project designed after developing multiple enterprise dashboards and figuring out a need to rework similar dashboard components for different clients. We wanted to create a single-stop shop for designing any PowerBI dashboard.
DURATION
1 months (July 2021- Aug 2021)
MY ROLE
As a Designer, I was responsible for brainstorming the necessary components for the UI Kit. I also designed the layout of the UI Kit. In addition, I assisted in creating all the components required for the dashboard design.
TEAM
Designer and Collaborator along with 3 designers
WHY do we need a UI Kit?
At Deloitte's Insight Studio, designers work extensively on enterprise-level products like designing dashboards for B2B for both web and mobile interfaces. As a result, designers create multiple design files with similar dashboard components for different clients.
Hence, the need to concoct a PowerBI UI kit with reusable and auto-layout components arose to save a tremendous amount of time that designers invest in creating similar dashboards.
But, first WHAT were the problems?
1
Instilling a chunk of time in creating similar components for different dashboards for different clients
2
Manually resizing and redesigning components for the dashboards with different screen size
3
Redesigning multiple versions of low fidelity and high fidelity designs from scratch
HOW did we create a UI Kit?
I started by researching the essential components required for designing a PowerBI dashboard and then made a list of all those components that we need to add to the UI Kit. I also researched other UI Kits to get inspiration and ideas on how we can deliver a well- flourished UI Kit that will be beneficial for our designers.
The UI kit will eventually help the designers preview and interact with some baseline components, styles, and chart components essential for designing any Power BI-related dashboard.
Our team also incorporated extended features available in Figma to simplify the designers' designing process as much as possible. We used the "Variant" feature in Figma to create different component states or types that the designers can change quickly. Where applicable, the team designed the component variants to account for both low and high fidelity to streamline the process of transitioning from low fidelity to high fidelity wireframes.
We added a section with the default colors and typography set up in Power BI application for its general interface and data visualizations. Additionally, we added customized color styles palettes used in the data visualizations - Customized Diverging Colors and Customized Categorical Colors.
Basic components like the menu bar, filter pane, feature bar, page header, page footer, navigation, and KPI components are also included to build up a standard structure of the powerBI dashboard.
Component Variant
An example of how we have implemented the component variant feature in the UI Kit and how it can be used by the designers.
Auto Layout
We made sure to design most of the components available in the UI kit to support the Auto Layout feature. This means that they grow or shrink as you change a component—an example of how one can resize the components to reutilize them for different screen sizes.
