GR2 - Designs

Scenario

It's Sunday night, and Ichigo Kurosake logs in on the Midnight Exchange to* look at his assigned midnights for the week*. He notes that he has Pots on Thursday night, but he has a really important nanoquiz in 6.813 on Friday, which he really needs to study for. He then* looks at the current market for Thursday Pots*. He thinks the current Ask price is too high, so he* places a new Buy Order* on the market. He goes to his Current Trades to double check and notes that he has a pending Thursday Pots order.

Later that night, Jorge Daniels logs into the Exchange. He's taking a pretty light schedule this term and is trying to make some money. He* looks through the current market* looking for some way to make money. He sees Ichigo's order for Thursday Pots labor and decides to sell it, thinking the price will go down later on in the week. He* adds Thursday Pots to his Watch List*, so he can come back and easily check the prices later.

On Monday, Ichigo logs back into the Exchange. He views his Current Trades and notices that Jorge has sold him Thursday Pots. He breathes a sigh of relief and logs out to continue with his studies.

Jorge logs back in every day that week to check the current price of Thursday Pots on his Watch List. On Wednesday, he sees the price has gone down below the price he originally sold it for, and goes to buy Thursday Pots labor.

Designs

Design #1

Storyboard

Home Page

Upon logging-in, users are brought to the home page, which displays a search bar, the current assignments for Midnights, a watch list, and a portfolio. The search bar is displayed at the top of the page along with the current date. The Midnight table is the first information widget and appears directly under the search bar. While the initial table of assigned midnights is determined by the Midnight Maker algorithm, it dynamically updates as trades are made. In addition, the midnights assigned to the authenticated user will be highlighted in color for readability. The watch list and portfolio tables both display quote information to the user. In the watch list, the user can add or delete Midnights in which he is interested in tracking. When adding a midnight, the user selects from two drop-down menus that indicate Midnight type and date. When deleting, the user ticks the check-box and hits the delete button. The portfolio indicates all active and completed trades made by the user, and thus cannot be edited.

In Ichigo's case, he would immediately see from Current Midnights that he has Pots on Thurday night as indicated by his Athena username, tttpeng. User's can search for quotes for Midnight labor by using the search bar at the top of the page. For example, Ichigo would type "Pots" in the text field and hit enter (or click on the Get Quotes button). He would then be brought to a quote page which displays information on Pots.

Quotes Page

The header, including the search bar does not change in navigation. Since the user should be able to search for a quote from any page, it remains at the top throughout the user experience. The new components to this page include the left-side navigation and the main content. The left-side navigation links pertain specifically to the quote that was searched. Description displays the basic checklist for the work that is expected to be done for the Midnight. Quotes displays all price information on buying and selling of the particular Midnight. Finally, the summary page displays key statistics such as Highs and Lows. Although all content is displayed in the picture, the squiggly lines indicate that they are different and only appear when navigated to. The default page is the Quotes page.

Ichigo clicks on the date link in the Quotes table to invoke the Trade menu, which darkens the screen and displays a large JavaScript popup menu. 

Trade Menu

The Trade Menu displays the price information for the selected Midnight. It will update as the market price changes so that the user has up-to-date knowledge on how the Midnight is trading while filling in the trade. The user selects the trade mode using a drop-down menu. If market is selected, the trade will execute at the highest bid price on the market. If limit is selected, the user will have the option of inputing the highest price he is willing to buy labor at. Pressing Place Order will bring the user to a confirmation menu. Pressing Confirm will place the order and display a confirmation. A user can change the order at the confirmation page by pressing change. Once the confirmation page is displayed, the user can click outside of the menu or X-out to return to the Quotes page. Ichigo would follow the process outlined above to buy Midnight labor for Pots on Wednesday, by executing a Buy Limit at $20.50.

Other

Jorge Daniels would follow a similar process to sell his labor or exploit arbitrage opportunities. When he logs-in, his assigned Midnights will be highlighted in color. After nagivating to the Quotes page, he will choose to execute a Sell Limit, instead of Buy Limit. Since Jorge is also interested in watching for potentially high ask prices, he populates his watch list with Pots for all days of the week. Rather than submitting 5 requests, Jorge simply leaves the Date field blank while indicating Pots for Labor type. His watch list now displays 5 rows for Pots - one for each day of the work week. If at a later date, the price for Pots labor on Wednesday falls, he can simply buy it back at a profit.

Analysis

• Error prevention: This design has good error prevention. There is a Confirm dialog box after making any orders, so the user can double-check the price and midnight to make sure it is correct. Additionally, it is easy to add/delete midnights to our Watch List with the Add button and Delete buttons on the same page.
• Visibility: Showing the user’s midnights in another color is good visibility, so the user can easily see what his midnights are.  The Trade Menu is also good for visibility. It shows the current bid/ask prices, so you know what range the new price should be in. One bad visibility point is how to return to the Home page once we have reached the Quotes page. The user can do this by clicking the banner at the top, though this is not very visible.
• Learnability: The Get Quotes search box is not very learnable. It’s good for experienced users who know the names of what to search for, but for inexperienced users, it may be unclear what they exactly need to type in the box. The Trade menu interface is rather learnable, with lots of information being displayed in the pop-up. Additionally, adding and deleting thing to the Watch List is also very learnable, using common widgets to accomplish these tasks.
• Efficiency: The Get Quotes search box is very efficient, since it allows users to go straight to what they are looking for. Having the Watch List on the home page is also very efficient, since the midnights that a user indicates are important to them are shown right when they log in.

Design #2

Home Page

After log-in by MIT certificate, the user arrive at the home page.  On the left-hand side is the ubiquitous navigation bar, where the user can perform several actions, that will either lead to other pages, or log-out.  On the top is the ubiquitous recently-posted-trades widget, which displays the last several trades posted to the website (that is, requests for trades, and not completed trades).  Finally, in the center of the screen is the content of the home page.  There are two objects in the main panel: a table which displays the assigned midnights for the week, and below this, a chat room that any users can post to.  Both of these objects will only appear on the main page: thus, the user will need to return here if he desires to see either of them.

The table of assigned midnights will be color-coded such that any assigned to the user will be clearly differentiated from those assigned to anyone else.  The table will update as contracts are made and midnight labor bought/sold.  The recently-posted-trades widget is only for display, and cannot be interacted with.

Current Trades Page

The user can view all of the current open trades on the market by clicking on the "Current Trades" button on the left-hand side navigation bar.  Open trades are organized by day; all open trades with regards to a certain day are kept in a compressible menu in most-recent to least-recent order.  They are formatted as a tuple: USER, BUYING/SELLING MIDNIGHT @ PRICE.  A user can make an offer on a trade by clicking on the underlined MIDNIGHT @ PRICE.  This will make a pop-up window that allows the user to either bid (if the trade is an ask) or ask (if the trade is a bid) at a price that he selects.  Then, the user can either click on the check-mark button to approve the proposition, or cancel.  If the user approves his proposition, both parties are notified via e-mail.

My Midnights Page

The user can view all of his midnights for the week on this page.  The user can choose to sort by day or by type.  The third column contains any trades that the user has put in the market with regards to his midnights.  In the picture below, the user has offered to buy KITCHENS labor at $20, and to buy WAITINGS labor at $5.  The user has a choice to put a trade on the market for a midnight that does not already have an existing trade, or change an already-existing trade.  He will do this by clicking on the appropriate entry in the "Change" column; this will lead to a pop-up, containing a text-field where the user enters his new price.  The user must then either accept, or cancel, his changes.

My Contracts

The user can view his pending and completed trades on this page.  Trades are stored according to whether or not they are pending, then in order from most-recent counter-bid to least-recent counter-bid.  They are displayed as BUYING/SELLING MIDNIGHT @ $PRICE(#NUM OFFERS), DAY.  Clicking on the (#NUM OFFERS) link corresponding to a certain trade will open a pop-up window that contains a table with counter-proposals to the trade.  There are three columns: the identity of the counter-party, the proposed price, and a radio-button.  The user can choose to either close the pop-up or accept exactly one of the offers (hence the radio-button).  Accepting an offer will lead to another pop-up window for confirmation.

Midnights Watchlist

The user can keep track of historical bid/ask prices for any midnight using the "Midnights Watchlist" page.  The main panel contains one table, which has information regarding changes in bid/ask prices for any midnights the user is interested in.  There are six columns: the first column is the midnight, and the second is the day.  The table can be sorted by these two columns.  The next four columns are the last known bid/ask price, and change between the last and second-to-last bid/ask prices.

Analysis

This UI design takes a traditional auction approach rather than a market approach, which may be easier to learn for non-expert users. As shown in the Current Trades oage, a Midnight is being represented as a object for sale, with a listed price. Naturally, this is more intuitive than displaying a bid/ask price for units of labor. From our experience, even users who have market experience sometimes get confused that sellers of midnights are actually buyers of labor. In this respect, it is clearly advantageous to avoid securitizing a Midnight.

However, at the same time, the auction approach is not as efficient. Suppose a user offers to buy Monday Pots at $20.00 as shown in the picture under Current Trades. Another user is able to click on the link to submit a ask price. The ask price will always be higher than $20.00 (which in a sense is the bid price). The buyer now gets notified via email for every ask above $20.00 and these offers also become available under My Contracts. In order for the buyer to complete the trade, he would navigate to his contracts and select one (or none) of his offers. In most if not all cases, the buyer should choose to buy from the lowest ask price available. Yet the UI forces the user to complete this task even though it is clear which offer he should accept. This step could be eliminated entirely.

Arguably, visibility is also impacted. Since no bid/ask prices are available except to the buyer, users have a hard time gauging the value of the labor market as a whole. In many cases, users offer their labor based relatively on what others offer. For example, if the lowest ask price for labor was $40.00 (visible only to the buyer), then another potential seller could ask for $30.00 rather than $21.00 and reasonably expect his ask to be accepted. It could also be potentially frustrating to the buyer, who cannot see the ask prices for similar labor on other days as a comparison. There is no public visibility of transactions in this auction system, which has its negative impacts on efficient Midnight markets.

Design #3

Storyboard

Ichigo logs into the Midnight Exchange with his MIT certificate. The default page is 'My Midnights.' It displays everyone's midnights for the week, and Ichigo's are shown in bold

.
After seeing that he has Thursday pots, Ichigo clicks on the By Day link in the left sidebar and clicks on the Thursday tab. He can see the Bid/Ask/Last prices on there.
 
He clicks the 'New Bid' button and types $15 in the box. He then clicks 'Bid' and 'Confirm' to place his order.

Ichigo goes back to the left sidebar and clicks the My Contracts link. He notices that he has a Pending Order for Thursday Pots. He then logs out.

Jorge logs in, and clicks the By Midnight link on the left sidebar, and looks through the tabs at the current prices on the market. He sees Ichigo's bid for $15 and clicks on the $15.

The Confirm Order pop-up shows up. He clicks to confirm his order (shown above). He then clicks the 'Watch' button next to Thursday Pots to add it to his Watch List, and then he logs out.

Ichigo goes back and clicks the My Contracts link (shown above). He notes that his previous Pending Order has been moved to a Complete order and that he bought from Jorge. He logs out.

Jorge comes back and clicks on the My Watch List link. He can see the current Bid/Ask prices.

When the Ask price goes below $15, he goes to the 'By Day' page and clicks on the Thursday tab, and clicks the Ask price to buy the order, and confirms it (shown above).

Analysis

Design #3

Pros

• Learnability: The UI is self-explanatory and easily learnable.  Labels/links are concise, and the UI does not use terms that the typical user would fine unfamiliar.  The interface is consistent across pages, and pages are organized into tabs intuitively.
• Visiblity: The UI shows data that is either public, or private and relevant to the currently-logged-in user.  There is little irrelevant information.
• Efficiency: Every action can be done using just a few clicks from the home page.  Information is presented in a straightforward manner, so the user does not have to scroll far up or down to find the appropriate buttons.
• Error Prevention: Any actions that the user can take that can have negative consequences require confirmation through a pop-up.
  

Cons

• Learnability: There are noexplicit instructions on how to use the UI.  The UI assumes the user has some idea about how a market works.
• Visiblity: Users can only find out if a counterparty has proposed a trade by visiting the correct page on the website.
• Efficiency: Actions are entries in the table, and can be hard to click on if the user has small magnification selected in the website.
• Error Prevention: The user can easily become accustomed to the pop-up.  Since this is the only form of error prevention, an experienced user might automatically confirm without actually making sure his numbers are correct.