Bids

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

The drawings shown are 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 mockup, 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 delving into 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

The 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 Stackexchange Answer that referenced this question

VPM - Programs

This component 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 also organizing the data. There was an existing paradigm that experienced users were accustomed 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. There were 18 programs and over 40 different fields. The solution to organizing the information was to list all the screens and fields in Excel. 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.

VPM - Program Lines

These were explorations on a theme. Some information was redacted but the main idea 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. The user then acts on these choices. Among the choices is revealing another panel which gives him further information regarding the line.

VPC - Lines

These are idea sketches. I was 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.

The 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.

The second image shows a high-level mockup. At this stage we're not concerned about perfect placement of objects and labels, we're still at the stage of determining if we have all the required data and if there is enough information on the screen for the user to know what to do next.

Analysis of Existing Screens

This is a part of an app allowing buyers and managers to analyze sales and industrial rebates.

The nformation is displayed in SalesForce and in Informix 4GL screens. Users would view both screens at the same time. See the first 4 sets of screenshots.

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

APPLICATION LARGELY REDACTED.

Employee Contact Info

The first image displays all the information requested by users along with their suggestions.

Upon further needs gathering it was clear that seeing the email address wasn’t needed. Selecting the employee name would launch the internal email client. In the few times it might be necessary to view the email address, the user could click on the portrait icon to go to the employee detail page and see the information. I added a tool tip to display the email address when hovering over the name. This satisfied those individuals still requesting that the email address be top-level information.

Business users envisioned that the calendar would be on every line; along with a "red dot" showing today's date and the approved days off highlighted on the calendar.

After discussion, and user testing the mockups, business agreed to show the calendar only if the vacation is scheduled within 30 days. This would make the exception days stand out. I also removed red dot indicating current day. Selecting the calendar would take the user directly to the vacation schedule.

This mockup displays employees who are at work; who are scheduled but absent (sick, etc...) and employees who are not scheduled to work that day. The application included a filter to display desired employees.

To Do List, Buyers

Users can ask colleagues questions. This list of names (initials) are on a to do list and displays colleagues to whom one may ask questions regarding the <redacted>.

It shows people who've been asked and answered questions, people with questions left unanswered, questions that are late in being answered (time constraints can be placed on the question), colleagues who are unavailable to answer questions pertaining to their product line are among some of the available options. All the options are not displayed here - nor do the samples display the same options.

This example shows the two "finalists" - the "underline" version and the "icon".