Ariba
From 2000-2004, I worked at Ariba Corp - one of the early pioneers of B2B software. I worked on a variety of projects, but for most of the time there I was lead designer of Ariba Enterprise Sourcing (Versions 3, 4, and 5) - A product for conducting Sourcing Events (e.g. RFIs, RFQs, Negotiations, etc.) over the Internet.
Below is a screen capture from the prototype for Ariba Enterprise Sourcing. It shows the dashboard for an online Request For Quote (RFQ). An RFQ is essentially a reverse auction where the buyer tries to get the best price and terms from potential suppliers.
From the dashboard, the initiator of the auction can monitor the event, and see the progression of savings over time. All major areas of the product were prototyped. JavaScript was used to simulate the interactive behavior of the product. The prototype was iterated on many times before arriving at a final design. Once the design was agreed on, the prototype code was used as a base for implementation of the real product.

The prototype for Ariba Sourcing served many purposes. It was used in early customer walkthroughs, and in usability testing. Development used it as a specification for the user interface. Quality Engineering used it to understand the correct behavior of the product and to create test cases. The prototype was used to create marketing material and was shown in sales engagements. It was also used by Publications, Training, and Customer Support to create support material for the product.
The next example shows the supplier user interface. This is where suppliers answer questions and “bid” the price they will charge for the goods or services asked for in the RFQ. An RFQ may be very short or very long (dozens of questions and perhaps hundreds of line items). The user interface had to accommodate both extremes and everything in between. The supplier also had to be able to monitor the progress of the auction and revise their bid when necessary.

The next example from Ariba Sourcing is a cost model. Here the buyer can compare different alternatives and determine which one is he most advantageous.

Every medium has its own strengths and weaknesses. An artist working in oils can do things that one sketching in pencil cannot, and visa versa. If an artist tried to use pencil-sketching techniques while working in oil, chances are the results wouldn’t turn out very well. Just like an artist, the designer must understand the medium - i.e. the client technology that will be used in the product. The capabilities of Visual Basic are very different from those of HTML, which, in turn, are very different than those of Flash. When a designer understands the client technology, they can exploit it. This is why it is important that prototypes be constructed using the same client technology as the product.
Below is a simple example of using recent advancements in web technology to simplify the user experience. There are times during a sourcing event when the supplier needs to send a message to the buyer. In a traditional Web 1.0 product the user would click “Msg Buyer” and be taken to a different page where they would compose the message. Here a DHTML window is opened that overlays the window, making the whole experience much less disruptive to the user.

Ariba Enterprise Sourcing 3.0 is what is popularly referred to as a Web 2.0 product. The user selects actions using DHTML popup menus. New information is presented by dynamically updating regions of the page whenever possible (as opposed to navigating the user to a new page). Information presented in tables is dynamically loaded as the user scrolls using AJAX techniques (there is no pagination).
February 15th, 2004