Chase Data Viz

Purpose

Data is critical to provide users with accurate financial information. This needs to be explained intuitively and made easy to understand. In addition, the aesthetics were improved following Chase's design, North Star. Our goal is to deliver a premium user experience through enhanced data visualization. 
To create that experience, the tile or contextual layout of the data visualization must be considered to enhance visual hierarchy, clarity and legibility.

Challenges

All design elements had to be tokenized and easily applicable to Chase's various brand colors. All elements were minimized to achieve this, but design details were added to create Chase's unique data visual.

Our design principles

Design direction 

We created a data visualization using gradient, a design element of Chase Plus, Chase's design direction. The movement of data is expressed in the direction of the gradient, and the data can be easily and quickly recognized through bright colors and bold shapes. This design direction harmonizes well with Chase's future direction and enhances the completeness of the digital platform.

Final Design

Before

After

Can data be more glanceable?

Skim Charts

Levels of data density

Usage

Skim charts are simplified visual representations of the the full chart experience. A skim chart entry point means a single tap can reveal comprehensive information, allowing quicker data discovery, scanning and comprehension.

Types of skim charts

1. Time-series relationship

A time series relationship is a type of data visualization that displays how one ore more variables change over time. To identify trends, patterns, or relationships between the variables, use charts from this category.
Default designs can be customized by adding elements including average lines, x-axis or y-axis based on product needs.

2. Part-to-whole relationship

Part-to-whole relationship charts are designed to show how individual components contribute to a total or whole. These charts help users understand the proportion or percentage of each part relative to the entire dataset.
Default designs can be customized by adding elements including left, right, or center labels based on product needs.

3. Performance indicator

Use performance indicators for monitoring, evaluating, and communicating the status or progress of the variable.
Default designs can be customized by adding elements including left, right, or center labels based on product needs.

Usage Guidline

Tap the image below to open the PDF file to see details.