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.
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:
Filters allow the user to easily navigate through the dataset, restrict results by timeframe, and constrain results by column values.
The column picker allows the user to hide, show, and dynamically load extra columns. The grid also features drag-and-drop column re-ordering.
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.
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.