Power BI x Halo Visual Style Guide
Objective:
Generate a company branded visual style guide and JSON theme to apply to existing Power BI reports. These reports will later be published in Jira for employees to view as needed.
Note: Company names and logos have been altered for privacy and security purposes.
Role:
Duration:
Tools:
UX Designer & CSS Developer
6 weeks
Power BI, Figma, Notepad, POINT
Impact
1. Brand Consistency: Applying a Halo-specific visual style will ensure all reports have a consistent look and feel, strengthening brand recognition and trust among employees.
2. Centralized Knowledge: A style guide acts as a single source of truth for formatting rules, reducing inconsistencies and confusion.
3. Data Storytelling: Applying best practices for charts, formatting, and narrative can significantly improve how reports communicate insights and engage audiences.
Result
-
A visual guide providing detailed information about the Halo branding elements necessary to implement in the reports, as well as tips and tricks I learned while using Power BI throughout this process.
-
A complete JSON file to be applied by developers in Power BI to their Halo reports.
Process
01
Secondary research on best practices of implementing Power BI themes.
02
Power BI theme generation using an online theme generator called POINT.
03
Iteration and experimental phase of the JSON file and communication with the developer to ensure all design elements are functioning properly.
04
Creation of the visual guide as a reference for developers.
05
Final review with stakeholders for the approval to distribute the visual guide and JSON file.
CSS Development
{...}
Choosing the styles
Colors
I carefully chose the company's branded colors for the global palette applied to the Power BI reports. Ensuring visual accessibility for colorblind colleagues, I specifically opted for blue and orange due to their strong contrast, making them easily distinguishable for individuals with color vision impairment.
Dashboard Skins (Background Image)
Using Figma, I crafted the dashboard skin as an image for the reports, incorporating the company logo and name into the header. This approach serves to imprint our brand on all reports, reinforcing design consistency within Power BI. The utilization of an image as the dashboard skin enhances the loading time for report data, allowing the Power BI system to concentrate solely on data generation, as the image remains static.
Typography
I incorporated our company's brand typeface, Roboto, for all text within a Power BI report. To ensure readability across diverse age groups, I experimented with font sizes in the report and made manual adjustments in the JSON CSS File.
Generating the JSON CSS file
1
While conducting secondary research, I discovered a tool that simplifies the generation of a Power BI JSON theme file. Impressed by its user-friendly and straightforward design, I opted to utilize this tool for our Power BI theme. After defining the styles and applying them to POINT, I proceeded to experiment with the JSON CSS file in Power BI.
2
Experimentation and JSON CSS file refinement
I had numerous Power BI reports to which I applied the new theme, providing me with the opportunity to customize styles in the file according to the diverse layouts and sizes of the reports. Manually adjusting the brand typeface and sizes, hiding filter and data visual borders to maximize report real estate, and modifying table fill and font colors were part of the process. Collaborating with our developer proved beneficial, as we worked seamlessly together, maintaining regular communication to address any issues encountered within the JSON CSS file.
Challenges &Actions
Navigating the Power BI Learning Curve
During the initial phase of the project, I encountered a challenge with limited prior experience in Power BI, struggling to locate visual properties within the application. This difficulty extended the time required for experimenting with font sizes and colors in the report. To expedite the learning process, I proactively sought assistance from online resources and engaged with the Power BI community forums. Over time, this proactive approach led to increased comfort and enjoyment in exploring the diverse features offered by Power BI.
Encountering Power BI Design Constraints
The Power BI application posed challenges in visual customization, particularly with a table containing overwhelming data and limited space for another table. Despite applying styles from the JSON CSS file, customization within the table was hindered by the data set's rigidity. Extensive secondary research and consultation with my developer was conducted to find a solution within the available skill and time constraints, but unfortunately, none was found. This experience highlighted the need to enhance knowledge of the underlying data and maintain focus on the primary objective of generating and applying styles.
Navigating the CSS Learning Curve
Similar to my experience with Power BI, my proficiency in coding CSS was limited at the project's outset. While the POINT generator provided a foundation for the theme file, numerous adjustments were required. The initial struggle involved locating specific elements such as typefaces and color styles within data visuals.
Overcoming this hurdle involved manually inspecting the code line by line until the discovery of the efficiency provided by the Notepad application's control + F function. The misconception of CSS complexity was rectified within a week, leading to increased confidence in working with the file. To further enhance my skills, I took the initiative to enroll in a front-end development course, aiming to delve deeper into the backend of visual web design styles.
