David Gee

Interactive Design & Development

Spend Analysis

The CX4 Spend Analysis module provides full enterprise visibility into a company’s purchased goods and services. The module enables tracking and reporting of key performance indicators such as savings forecast variance, progress against cost reduction targets, contract pricing and compliance, and other goals set by sourcing and finance management.

The Spend Analysis interface
Powerful filtering tools enable deep insights into supply chain spend
Navigation tools enable intuitive context switching
Analysis results can easily be used to create sourcing projects

Design Process

Initially, I worked closely with our CTO and systems architects to define rough functional requirements and iterate on the design. Utilizing competitive intelligence & offline work samples (mostly macro-driven Excel spreadsheets), we conducted some informal brainstorming and whiteboard sessions to gain agreement on the high-level goals for the module. From this, I created a few wireframe mockups of the interface structure, and then immediately started work on the high-fidelity HTML prototype.

The prototype allowed users to play with the various selection and filtering controls, and we set up some time for our internal market-making team to test out the concept. We gained valuable insight from these sessions, and rapidly iterated on the design until we’d reached internal consensus. With most of the functionality now in place, we presented the prototype to an existing customer for beta-testing and an additional round of iterations.

At this point, we had stabilized on our design and functional goals for the module. Unneeded functionality had been pruned and the proposed feature set provided valuable insights into our customers’ supply chain. We spent a few sessions with product management to prioritize deliverables, and then handed the prototype over to our development team to create the initial version of the app.

Front-End Engineering

The Spend Analysis module was created before we integrated jQuery into the app. I built various Javascript controls to facilitate the interaction flow, such as:

  • Grid Control

    I built a custom grid control with powerful tools to allow users to manipulate large datasets, which we later integrated into other parts of the app. Features included:

    • Client-Side Filters

      Filters allow the user to easily navigate through the dataset, restrict results by timeframe, and constrain results by column values.

    • Column Picker

      The column picker allows the user to hide, show, and dynamically load extra columns. The grid also features drag-and-drop column re-ordering.

    • Fixed Columns

      The primary column is fixed on the screen, allowing the user to maintain context while scrolling horizontally across a potentially large number of data columns.

    • Context Switcher

      Hovering over the primary column pops up a control allowing the user to switch the grid context - for example, a user can drill down through an organizational hierarchy to a selected department, switch to view all buyers in that department, and then switch to see all suppliers that a specific buyer works with.

  • Dimension Selection Accordion Control

    The left sidebar allows the user to select from a number of hierarchical tree dimensions to filter the analysis view. I built the accordion control, as well as the ability to toggle between the hierarchical tree picker and the currently selected view. Each dimension also shows the number of selected nodes, which is read from the ActiveX tree control.