The Devil is in the Details
This wireframe was a living document that was continually updated to be the main source of truth for business stakeholders, engineers, and QA. We started with a very table-centric layout and eventually settled on this design that relied on sticky headers. I created the wireframe to illustrate and describe all of the interactions and visual design for the entire application.
One of the unique design challenges was to be able to compare similar tabular data, between two different tables, on the same page. If the user selects a row in a table, as she scrolls, the row sticks to the top of the page. This allows the user to select a territory, scroll down the page, select a merchant, and still maintain the territory's metrics. By scrolling up and down the page and selecting and deselecting rows, business can quickly analyze the data and take action.
This wireframe includes flowcharts and story charts. Each slide contains annotations that are color coordinated with the flowcharts. The value of this wireframe vs. a prototype, is that you can see what changes in the UI based on the logic documented in the decision points (e.g. Is it Week 1 of the current quarter?)The original wireframe is 40 pages long. This presentation has been significantly edited for your convenience.
