Making Data More Consumable

Project
Sterling OMS Order Hub and Inventory Management

Role
UX & Visual Designer

Responsibilities
Evaluation, ideation, and design for addressing information density and hierarchy issues

Order Hub and Inventory Visibility are offerings that fulfillment and order management professionals use to manage their fulfillment network and inventory. Users are heavily reliant on the quick understanding of key performance metrics and extensive details around nodes, orders, and shipments across their network. 

Challenge

Order Hub is information-heavy, and our design systems promote white space. Key business and IT users looking to leverage data from our offerings want to scroll, click, and double click as little as possible. For them, getting as much of if not all the data they need in one screen is critical to their everyday jobs. The way certain information is currently displayed may detract from ease of understanding. 

Goal

Prioritize information and increase ease of consumption and information density to allow users to understand the primary information they need before needing to scroll. 

Process

  • Consistency audit

    This work stemmed from a suite-wide audit I performed to identify consistency issues and opportunities for alignment.

  • Evaluation

    Identify common, repeating, and/or high severity issues within important workflows as focus areas for improvement.

  • Ideation

    Work closely with product management, sales, development, and fellow designers to explore solutions.

Consistency audit

I had completed a large, product-wide consistency audit to identify areas where pattern alignments and visual improvements could be made. One issue that came up frequently was excess white space and scrolling. Upon reviewing with the wider team, we discovered that this was actually a very serious issue for our users, so it quickly emerged as a primary area of focus.

Evaluation

  1. Summary information is supplementary and usually not the most important information to customers, yet it appears first on the page and takes up a significant amount of vertical space.

  2. Spacing and field heights are inconsistent throughout.

  1. Excessive white space throughout the node details page limits the amount of KPI data visible.

  2. Customers are missing the detailed values that allow the calculation of utilization and fill rates.

Ideation

I used Mural to explore several different ways to address information hierarchy and density across all areas of our product.

I also explored ways to increase the ease of consuming and understanding node performance and capacity data on our node details page. Key opportunities were in improving the data visualization of main KPIs, and adding important missing information to help further explain metrics.

Final designs

Improved layout, density, and information hierarchy

The summary panel was moved to the right, saving approximately the first half of the vertical space on the page for more pertinent information.

Field and table heights and spacing were standardized and condensed.

❌ Before

✅ After

Valuable node KPIs added and charted intuitively 

I designed a more robust view of the nodes dashboard, complete with a clear explanation of the formula and values used to calculate utilization and fill rates.

Additional KPIs were added.

❌ Before

✅ After

Outcome

Approximately 40% more information is now visible before scrolling

Information hierarchy now properly reflects importance

Increased visual cohesion by standardizing the use of compact field sizes and spacing

All UIs © International Business Machines Corp. This material is not for redistribution or modification without consent from IBM.