DYNAMIC CHARTS
Existing patterns for chart in the industry are broken. They are not only hard to interact with but also not scaling well across diverse dimensions of form factors, especially for small devices like watch and mobile.
We created chart guidelines and framework that are highly scalable, responsive yet super interactive so it is easy to explore (slice & dice) the data, answer the questions, and finally take actions for insights on any devices.
Responsibilities:
- Design Lead
- Interaction Flow
- Visual Design & Specs
- Multiple Screen Layout
- Truncation Specs
Chart Layout: There are multiple factors and dimensions to consider - components displaying level of graduality of data, query, legends, tooltip to show selected values/labels, and contextual actions. This shows how each component is translated in module format across different screen size.
Example for Horizontal Bar: The X-axis, Y-axis, labels, etc are dynamically adapted and displayed for its size.
Bar Chart Scaling: Bar is one of the most common chart types in the industry but still just accessing values and labels are cumbersome. I wanted to solve the problems by levering intuitieve gesture interface. Users can easily zoom in/out to see the same data in diverse scale of chart - micro and macro level.
Line Chart Scaling: Line chart is commonly used to capture the trend over time. For example, it is useful to see the amount over certain time period - days, months, quarters, years etc in sales use cases. The challenge was when there are multiple data point with multiple groups it is very hard to interact with chart to access the details of data.
Solutions: Users can easily zoom in/out to see the same data in diverse scale of chart - micro level (sparklines) and macro level. X-axis and Y-axis would be corresponding to it per data point and scale of the chart.
Scatter Plot Scaling: Consistent concept applied to here. Users zoom in/out to see the different level of granularities of data on chart.
Trellis Chart Scaling: Specific to the trellis, there are some constraints. One, not being able to zoom into trellis to view a particular chart in it. Second, all charts have their own axis which leads to noise in the trellis. Thirdly, trellis grid depends on the chart size.
Solutions: The design approaches are one, Pinch to zoom in on trellis to view single chart. Second, Calculate min and max measure axis value for each chart and show a single axis that applies to all chart types instead of repeating axis in every chart. Third, trellis grid resizes based on the largest chart and other chart autofit within the available space
Patents: US D768154 S1, US D768673 S1, US 20160103581 A1, US 20160104305 A1, US D768,154 S, US D768,673 S,