Scott Levine UX Portfolio 2013

Download Scott Levine UX Portfolio 2013

Post on 08-Mar-2016




13 download

Embed Size (px)


This portfolio covers client work from 2009 - 2012. For older work, go to


  • TradingVision User Interface Documentation Revised 3/3/2013Trade Ticket UI Vision

    Scott Levine UX Portfolio 2013

  • slevinSticky NoteThis is a deep dive into a business process selected from the dashboard.

    When we looked through the spreadsheet it was very hard for us to determine the relationships between the data feeds that traders were looking at, the business processes that those feeds belonged to, and the systems which provided the data.

    This dashboard attempts to solve that by delving into the business process that the feed belongs to and showing health metrics for the related systems.

    From this view, the user can see the status of all of the business processes, the dates of historic incidences (within a user defined timeframe), the severity of any incidents (within a user defined tolerance), and the contributing factors of the incidents.

    All data on this screen only applies to the selected systems. The user can deselect any of the contributing systems if they do not wish to see that data.

    slevinSticky NoteAll business processes are shown here with a status indicator. Indications are as follows:

    Red: Under 85% uptimeYellow: 85%-95% uptimeGreen: >95% uptime

    slevinSticky NoteSystem health indicators show the relative health of systems contributing to this business process. In this view we can see that there is an issue with system S11.

    slevinSticky NoteCompletion Trends are displayed within a user defined date range. With in that date range, the user can zoom in or out using the slider below.

    Our understanding was that the users are most interested in exceptions from normal behavior. This chart eliminates noise using a tolerance setting anything below which appears as grey. Each system is represented by a single line. The range of severity and minimum tolerance level is user define able using the slider above the chart.

    slevinSticky NoteThis chart shows the cause of each incident within the selected date range for each system.

  • slevinSticky NoteThis screen shows a take on the Incidents chart on the Trends Tab of the spreadsheet. In this view only dates within the selected time frame with incidents are shown. A bar graph is provided for Breaks, Duplicates, and Lots. This chart applies to this business process only.

  • slevinSticky NoteA rollover is provided to show the details, cause, owner, and status of any incidents which exceed the user defined tolerance.

  • slevinSticky NoteIn this view we can see that there is an issue with system S11.

    By rolling over the system status indicator, the user can see details of the issue and take the appropriate action to resolve it.

  • slevinSticky NoteA visual design of this dashboard, designed for desktop and tablet.

    This view shows the NLI Analysis.

  • slevinSticky NoteA visual design of this dashboard, designed for desktop and tablet.

    This view shows the Incidents Chart.

  • jwang2Sticky NoteThe summary gives a quick way to show how many processes are completed, running and not started.

    jwang2Sticky NoteThis is the very first wireframe we created for the TV version of the system dashboard.

    Our understanding was that traders were not looking a lot of detail from this display, so we redesigned it using big, bold tiles to give the traders a better understanding of the status of relevant data from further away.

    Each tile represents a feed. The tiles show lifecycle state, estimated or actual time of completion, or lateness if applicable.

  • jwang2Sticky NoteThis is a refinement of the previous wireframe

    All feeds are grouped by process, and the blocks are arranged in chronological order.

    Each column represents a process. The colors of the elements gradually change depending on their status.

    Grey blocks indicated processes that haven't yet started. These would fade to yellow as the process runs. As the process nears completion, it would fade to green.

    A red border shows the any delay in a process. Each block also shows the actual or estimated time of completion.

  • slevinSticky NoteThis wireframe is essentially the same as the previous one, but arranged horizontally rather than vertically

  • jwang2Sticky NoteThis wireframe emphasize the time dimension which the previous designs de-emphasized.

    The timeline runs vertically. The bottom shows the past, center shows the present, and the top shows the future. Instead of showing the actual time scale, the present and future blocks are in relative positions.

    A red border means a delayed feed. In addition to the estimated or actual time of completion, a "+" sign shows how much longer it takes than the scheduled time of completion. As before, grey blocks are not yet in process, yellow blocks are in process, and green blocks are completed.

    As time goes, the "old" feed will fade out while new feeds from the queue fade into the "not yet in process" area.

  • jwang2Sticky NoteThis is a refinement of the previous wireframe based on feedback.

    Each process is now color coded. The background color shows the past, present and future.

    This design de-emphasizes the specific scheduled time of completion in favor of showing a metric of Time to Completion (TTC) which shows how much time is left in the process.

  • slevinSticky NoteThis is a different treatment of a similar concept. In this case, completed processes float to the top. Processes which are completed are just labeled with the system name. Processes scheduled are labeled with the scheduled completion time. Processes which are in progress are labeled with the scheduled completion time, and how late they are based on their scheduled completion time. Red blocks indicate late processes.

  • slevinSticky NoteThis design breaks each business process into its own timeline. This design again de-emphasizes specific time in favor of relative completion. Processes which are complete are unlabeled, while those which are in progress or not started are labeled with their scheduled completion times as well as how delayed they are from those times. Red blocks mean severely late processes. Each block moves from right to left as the process runs.

  • slevinSticky NoteThis design attempts to add price curve information alongside the dashboard.

  • slevinSticky NoteThis is a visual design for this dashboard based on the wireframe on Page 12.

    This screen is designed for a 16x9 television screen.

  • TradingVision User Interface Documentation Revised 3/3/2013

    Cover Page 1 of 19

    TradingVision | GP Ticket UI Design

    Cover 1Buy Ticket 2Sell Ticket 3Supplementals 4Supplementals 2 5Suggestive Search 6Allocation Section 7Allocation Grid 8Allocation Validation 9Fund Selection 10Configure Groups 11Configure Groups - Adding a Group 12Settings Dialog 13Visual Design - Buy 14Visual Design - Sell 15Toolbar 16

    GP Ticket UI Design

  • TradingVision User Interface Documentation Revised 3/3/2013

    Buy Ticket Page 2 of 19

    TradingVision | GP Ticket UI Design

    TradingVision Trade Ticket


    Status: Pend

    HorizonDES (2)Delete TicketAudit Clear TicketPrint Email Security Details

    Buy NOVASC BN .22 10/13/2012


    Credit Exposure


    Alt ID

    Trade Ownership

    Trade InformationSecurity Information

    Maturity 3/18/2012


    Yield 0.14


    IV Type



    Accrual Basis



    CUSIP 64986MQV0

    Not Set Up Set Up

    DTC 64986MQV0Dealer





    Par Amount (mm)

    Trade Date

    Settlement DateDated Date




    10/22/2011 T+1


    Country Canada

    CADAI Days 0

    USD (m) CAD (m)IAM 2,511.40 2,536.75Princ 1,251,107.52 1,263,744.96AI 362.11 365.76Proc 1,251,143.62 1,263,781.44



    Fed Funds

    Trader Round Inc 10mm

    Minimum Denom 100,000

    Minimum Inc 1,000




    Credit Enhancements


    Editable if 9-digit CUSIP is not entered

    Suggestive search

    Derived from IV type ensure it is accurate for Canadian versions of securities, where the accrual basis is ACT/360 for the US version, but ACT/365 for Canadian

    Derived from Issuer and IV type

    Derived from issuer or program

    Populate STAP by default for CA trade

    If security is CAD, only show option to choose CAD portfolios

    Default to settlement date, but make it editable

    Type Short Name Issuer ID %LOC LOREM 123456 50O LOREM 123456 50

    Include credit enhancements(For ABCP only)

    Min Denom and Min Inc - Remove completely?

    No drop-down

    Gray out stuff if the security is not set up (acts as indicator that its not set up)

    Only available for CDs

    Ability to add reason code for Cancel-rebook in the confirm box?

    Launch settings dialog

    Field input masks and display formats (if any) are exactly as they are in the current ticket for these fields:

    Par AmountYieldMaturityTrade DateDated DateTrader Rounding Inc

    Note field can be expanded by the user to show more text. When this happens, the AI days content is pushed down, increasing the overall height of the tickets content area.

    The field can expand down only


    Allocation PM Order Round Robin Test ComplianceAllocate

    Ready | Market: | Trade: NONE | Compliance: NOT TESTED | Trade Source: TRADE CAPTURE | Execution Source:


    GP Funds Rated FundsTaxable MM Tier 2 Fu