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