Whiteboarding / Sketching

What follows are examples
of the thought process leading up to the final product.


Sketching out ideas for internal pricing tool. Information was organized into Cost Info, Sell Price Info, Inventory Info, etc allowed users to base their price per item based upon Booknet, Avg Cost, and other parameters.

The drawings shown are but a few sketches (out of hundreds of use cases) drawn after conversations with business users and reviewing use cases.

The next image (The Black and White image with the red warning) shows the first attempt at truly prioritizing the information; deciding which information MUST be seen at first glance and which information could be displayed when selected.

By this point much of the design had been decided - for instance users needed to be able to scan through items, which made a card display unwieldy, and users wanted to be able to view at least 4 items per page if not more. This set height constraints for displaying the items as well as requiring the information to be in a columnar display in order to increase scannability.

The following image (Fitbit) shows the final version. By this point all the information has been organized and prioritized and we're dealing with the details. Among the details that needed to be worked out was the font used for the "History" section. What worked well in a Photoshop mockup did not translate well to a high-fidelity HTML prototype as the font (Georgia) interfered with the scannability of the information.




VPM - Toggle Solution

Original implementation used a drop-down for users to select a warehouse. More than one warehouse could be selected. The complication was that the list included combinations of previously used terms. (See first image)

A new warehouse was added now making the drop-down even more complicated.

The solution was to go against what the users specifically asked for and provide a solution to the underlining problem.

This problem quickly became a part of my interview questions for prospective team members.
See a detail view

See a Stackexchange Answer that referenced this question


VPM - Programs

This was part of a much larger project. Managers were migrating from Informix 4GL Form Fields to a web-based interface. The problem was not simply having too much information in a limited amount of space but organizing the data. There was an existing paradigm that experienced users were married to. The new organization of the data had to be so usable as to mitigate resistance to moving to a new schema.

The first screen shows a blurred out 4GL tab. Users would need to navigate through dozens of these screens using keyboard shortcuts. It was incredibly fast for experienced users to use but took months of training to ramp up.

The second screen shows a list of fields arranged by BAs (purposefully blurred out). There were 18 programs and over 40 different fields. Trying to make heads or tails from the data was impossible.

The solution was to list all the screens and fields in Excel. (See the third image). At that point useful patterns were revealed.

The last two screens screen shows the fields organized and placed into different sections with visual hierarchies set. At this point the project was passed to a junior UX person to complete.

Notice, at this stage of the design, the drop-down to toggle button discussion had not yet taken place.


VPM - Program Lines

Explorations on a theme. Some information was redacted but the gist of the design is there.

There are a series of lines each of which can be edited. Upon selection the line is highlighted and the text entry boxes / select-boxes displayed. User then acts on these choices. Among the choices is revealing another panel which gives him further information regarding the line.




VPC - Lines

Sketching out various ideas. Primarily trying to find out if this design idea would show the necessary amount of 'buyers'. There were numerous detail screens. One of them is displayed to the left.

At issue was, how to progressively disclose more and more information. Users would have to drill down multiple levels (Program Groups, Programs, Lines, Individual Line). At each stage the user needed to have information allowing him to compare one group, program or line with another.

At this stage we're not concerned about perfect placement of objects and labels - simply do we have the required data and is there enough indication for the user to know what to do next.


Analysis of Existing Screens

A part of an app allowing buyers and managers to analyze sales and industrial rebates.

Information is displayed in SalesForce and in Informix 4GL screens. Users view both screens at the same time. See the first 4 sets of screenshots. (For reasons lost over time the Informix 4GL screens are called "Unix" screens.)

All the information was categorized and prioritized for progressive disclosure; and then mocked-up. Examples of the various screens are displayed.


See Additional Examples of: