Nomura ChartViewer

ChartViewer is Nomura’s intuitive data and analytics discovery tool with charting capabilities for web, desktop and mobile.

Objective
  • New, responsive UI to build in both English and Japanese.
  • The app performance to enhance via supporting of modern browsers and removing dependency on obsolescent plugins.
  • Navigation and search functionality to review.

    The menu structure is too nested, too easy to slip and lose the navigation to date. It’s not easy to find what end-users wants.

    Old Add Series menu structure.
A. Home Screen
ChartViewer as Fixed Income Portal component, old design.

New version has essentially become a PoC for HighCharts®.

ChartViewer, new design created with Adobe® Illustrator CC.

With new Expand/Collapse A1.7 and Resize A2.1 UI controls, the chart can utilize the real estate screen available to the app for better readability.

ChartViewer, default and expanded scenarios in HTML prototype.
A1. Toolbar

A1.1 calls the Add dialog. The Recent dropdown A1.2 provides an access to 10 recently built charts.

A1.4 Reset chart to default.

A1.5 calls the Opendialog.

A1.6 calls the Save As dialog.

A1.7 switches chart component to full screen mode.

A2. Central Chart

The chart is built with HighCharts® that displays the defined curve term structure, such as:

  • Time period,
  • Display configuration,
  • Zoom in/out.
A3. Chart Settings
Expressions Tab

Table rows can be in focused A3.2, selected A3.3 or disabled A3.4 states.

The toggle A3.1 collapses/expands Chart Settings panel to provide maximum room to the chart.

Collapsed scenario for Chart Settings panel.

Zero scenario is used when the chart has got no series.

Zero scenario for Chart Settings panel.
Format Tab
B. Add Dialog

Instruments, series and formulas, can be either searched or navigated through with the Add dialog.

The dialog can be dragged by end-user off the central chart, and is appeared centrally aligned without a backgrop. This feature is useful when more than one instrument is added without closing the dialog.

Start Over button resets the central chart without closing the dialog.

Series
Add Series as a list.
Add Series as a tree.
Formula
Add Formula as a tree.
C. Save As Dialog
Save As.
Success

Business received a handful of hi-fi mock-ups.

The app has been delivered as an interactive HTML prototype, ready to be picked on SVN by developers for further implementation.