DATA VISUALIZATION
Hg Mercury CRM is a leader in providing real-world predictive power to intelligently target and engage patients throughout their healthcare journey.
CRM provides a number of dashboards and reports that offer users the ability to track, analyze and optimize campaigns and aid in proving marketing ROI to C Suite. In order to offer high performing dashboards and reports, we had to establish a set of data visualization patterns and guidelines to help users tell accurate and convincing stories around data that are both beautiful and accessible.
The goal was to create a set of patterns and guidelines for the UX and Business Intelligence teams at Healthgrades.
User and Business Value
By creating a set of guidelines we have been able to create consistency across HG Mercury platforms (CRM, MPI, and PNI) and reduce time to market, by leveraging reductions in design, development, and testing time.
Challenge
We broke the challenge down into three different objectives. These ‘how might we’ questions drove exploration, experimentation and ultimately our solution.
COLOR PALETTE
HOW MIGHT WE use the HG Mercury Brand and ensure it complies with web accessibility guidelines?
CHART TYPE
HOW MIGHT WE create a library of charts by identifying the purpose of the data?
SHARE + ADOPT
HOW MIGHT WE share these guidelines and establish user adoption?
COLOR PALETTE
The HG Mercury platform uses the Electric Blue as a primary accent within the light UI. We had an opportunity to use other colors in the design system to help elevate the Healthgrades brand within the products.
Using color effectively is one of the most important methods for creating useful visualizations. By conducting an audit of our dashboards, we found the need for the following color palette types: Categorical, Sequential, and Diverging.
Categorical
Categorical colors aid users to distinguish non-numeric meaning to objects in a visualization. These are designed to be visually distinct from one another.
HG Mercury supports 5 categorical palettes
Sequential
Sequential colors aid users to distinguish numeric meaning in a visualization. These are a gradation of colors that go from light to dark.
HG Mercury supports 3 sequential palettes
Divergent
Divergent colors aid users to distinguish numeric meaning also. They’re useful when dealing with a range of two extreme with a baseline. (Ex. Negative to Positive Values)
HG Mercury supports 3 divergent palettes
USAGE GUIDELINES
Use categorical colors sparingly
Use with non-numerical data and sparingly - instead of giving each item a color, provide it with another dimension.
These colors are best to distinguish between categories quickly, especially when paired with other charts for the same items.
Use up to 7 categorical colors
Although HG Mercury has a palette up to 12, best practice is to use no more than 7. Using more than 7 colors can make the visual overwhelming and unclear.
Use darker colors for larger numbers
Dark colors often represent larger density to the subconscious. Take for instance, a body of water: the more depth, the darker the water appears.
Be consistent across charts
Charts that use the same dimensions in a different view should use the same colors to be consistent to help the user see the relationship.
ACCESSIBILITY
The HG Mercury Color palettes strives to be inclusive and achieves supporting individuals with color vision deficiency including Protanopia, Dueteranpia, Trianopia.
Additionally text paired with visuals should follow WCAG 2.0 AA contrast guidelines that are provided:
Chart Type
When selecting a chart type, it is important to understand the purpose of the data and how your users may want to view it. As the HG Mercury platform has multiple dashboards, we conducted an audit to create a helpful guide to picking a chart type based on user and business goals.
Comparison
Comparison charts draw a comparison between two or more items on different parameters. You can either show both of these items on one group bar and bubble chart or in a side-by-side view of two single bar.
Trends
Trend charts show trends of an item over time. Displaying data over time increases understanding of the real performance of a process, particularly with regard to an established target or goal.
Part-To-Whole
Part-To-Whole charts show part (or parts) of an item to it's total. Often used to show how something is divided up.
Geospatial
Geospatial charts show differences in item values across a geographical map. This is particularly helpful when understanding population density for a given set of dimensions.
Use the interactive prototype to discover the different HG Mercury chart types:
SHARE + ADOPT
Our guide would not be helpful to the process unless there is user adoption.
In order to have user adoption, we needed department buy-in from the Business Intelligence (BI) team. Although our Data Visual design guide was bullet-proof and the BI team found it helpful, they did not feel this artifact aided in their process and limiting development time. So we find ways that could help with the development:
Created a .tps file to reference all HG Mercury color palettes for Tableau so all developers would have access to palettes and apply to charts in a matter of seconds.
Worked with the BI Team to establish data visual best practices and technical doc that would be shared amongst developers via Confluence.
REFLECTION
By creating the data visualization style guide, we have been able to on average decrease development time by 25% with creating the .TPS color reference file, in addition to the foundational templates (axis line color, label color, title color, tooltip style).
The design team has been able to streamline charts across our 6 dashboards that has created consistency across the products while promoting brand identity with the new HG Mercury Color Palette.