Subtle glow at the top of the page

Data visualization

During my time at Expedia Group, I have helped establish data visualization best practices in both B2B and traveler shopping experiences.

My role

In addition to setting up general guidelines that anyone in the organization can follow, I led an effort to establish fundamental data visualization styles for a supplier-facing design system (discussed in another portfolio entry). In order to demonstrate what those guidelines looked like without showing the actual documentation, which is considered proprietary, I have recreated a version that suits the styles found here in my website. The hypothetical situation here is if wanted to show a series of charts that all looked and felt the same, while also adhering to ethical standards, keeping the data free from any bias. These are examples that might guide a team creating the charts.

Very basic line chart being shown as an introductory image to the project

Focused on clarity

I believe the best guidance we could give teams looking to visualize data is on how to do so without misleading or obfuscating. This means leaving out unnecessary embellishments, being careful to follow established norms regarding the zero line and negative values, how to crop in on a portion of the full scale, focusing in on exactly what you want to show and not combining multiple jobs, things like that. You could write a book covering all this, and of course, people have. My job was to distill the information into guidelines that didn’t take weeks to read while still conveying the most crucial information.

Following are examples of the information covered.

Example of emphasizing the zero line in a line chart
Example of a line chart that doesn't show the zero line
Example of a horizontal bar chart

Accessibility and color

The color system developed for data visualization might be just as complicated as a design system’s foundational color set. This is primarily because, while color can be a great aid in understanding a chart, not all people see colors the same. In order to deliver a chart that all viewers can see equally, contrasting brightness values are more important, functionally, than hues.

Example of multiple entities being charted in the same line chart
Example of a bar chart with an estimated value
Example of multiple entities being charted in a bar chart
Example of how to highlight a line other than zero in a line chart

Even something as seemingly black and white as data charts can be manipulated and used—either intentionally or unintentionally—to mislead rather than inform. This is why guidelines such as these are so important.