Designing for data visualization
2016 - 2019 Key Contributions:
Designed and shipped 40 charting user stories that helped SAP Analytics Cloud successfully secure International Business Communication Standards (IBCS) Certification
Granted Patent: Patent No.: US 10,810,263 B2 - User Interface for Accessing Hierarchical Data.
Problem Space
Data has become the most valuable asset in today's world. It enables the business to track metrics, validate business decisions, and most importantly, tell powerful stories. However, data tend to be extremely complex to comprehend especially for the general audience with a varying data literacy level.
My goal as a UX designer who specialized in the domain of data visualization for SAP Analytics Cloud was to design software that breaks down the complexity of data, offers good data visualization tools that enable customers to understand data at a glance.
My Role
As a UX design specialist on the SAP Analytics Cloud UX team, I worked with multiple development teams, product experts, and product management to investigate the challenges our customers are facing with using data visualization to present business data.
Process
(Due to confidential agreement, I cannot show any documentation or design that was produced before shipment. )
To start designing for data visualization, it often starts with requirements gathering, and asking the question “what story does this data visualization tell?”. For example, a horizontal line chart tells a story about a change over the course of time. It is not meant to communicate where you have spent your money, but it could tell you how much money you have spent over the year.
With the support from the product management and customer experience team, I was able to ask this question to our customers, who were able to tell me what type of data they are working with, and why they need a new data visualization to represent their data.
One of the chart types I shipped out is called Histogram. Customers needed this chart because they want to see a distribution of data over a numeric axis rather than categorical.
Through customer interviews, I was able to capture the common questions they use Histogram to answer:
What is the distribution of salaries?
What is the average distribution of monthly precipitation?
What is the distribution of marathon finishing times?
When designing for data visualization, we have to understand how charts and data can be used together to communicate the correct message.
After understanding the use case, I researched into the properties of Histogram to understand how different data structure changes the messages it communicates. One unique property of Histogram is how it displays raw data vs aggregated data. In the example below, I have illustrated how adding an aggregated dimension to a Histogram changes the bucketed values.
As the next step, I learned the foundation and the data structure needed to build a histogram which helped me to define the requirements and map out all the edge case scenarios we needed to support. For example, Histogram is similar to a stacked bar/column that supports multi-dimensions, which means that it required a chart label that dynamically switches to a color that is best contrasted with the chart or widget background. However, during that time, we only offered a static label color to our end users. To showcase these types of charting problems, I had to develop multiple prototypes using Flinto to demonstrated possible pain points our customers can run into.
After multiple validation sessions with all stakeholders, we were able to finalize the design of the histogram and quickly turn it around within months. It is now one of the most visually compelling charts that our customers use to compare quantitative data, and it was used as part of the predictive tools that helped customers uncover important business insights.