Nati Asher

Arena Bonds Trading


UX Design




May 2017


Desktop App

Redesign of Citi’s corporate bonds trading app. The system is used by traders every day – all day, in order to keep tabs on their profit and loss, marking bond prices and publishing prices to the sales team and clients.

The redesign goal was to add robustness and flexibility to help traders perform better and faster with easier decision-making.

Our challenge was to make a redesign that would allow a faster sales cycle and handling of bigger loads of bonds, increasing the business volume of the Credit Desk and preparing the desk for the challenges of the future. Also, I was asked to provide ways to show more information about the entire book and a single bond, to allow better decision making.

My Tasks

– Planning and Scope Definition
I defined the product together with the product manager, taking ownership features across the whole process. I balanced between user needs and business goals.

– Experience Strategy and Vision
I created prototypes to share the vision, design principles and content strategy. This helped evangelising ideas, gain alignment and drive decision making.

– Interactive Prototyping and Specs
I executed user journeys, wireframes, prototypes and design specs.

– Supervising of Visual Design Mockups
I supervised UI designers on the creation of final, pixel perfect mockups and handling to dev team.

Trader’s Task Analysis

After 3 hours of team brainstorming and task mapping…

Out of the task analysis, it became clear that the activities could be classified into three main areas of interest:

  1. 1) Risk, in which the trader would spend most of the time, marking bond prices, analysing its profit and loss (PnL) and settings axes – discounts.
  2. 2) E-Trading, an area to manage all e-trading settings for automatic, low-amount, risk-reducing trades.
  3. 3) Runs, for the management of price publishing across sales and clients. By auto-scheduling most of the runs, this would be seamless to the trader and free time for more important tasks.

This early architectural decision was the first building block of the new operational model and would condition all tasks coming next.

Early Ideation Wireframes

The first sketches included three areas, with a side on the left to quickly switch between different books, and a right side to show relevant information according to crossed data. Also, a notifications module was planned, as an aid for the trader to keep up with developments during the day.

Presenting to the team different interaction models for eTrading tab

Detailed Wireframes

In the detailed wireframes I polished every detail of the overall frame and also the right side of charts and bond data.

The left side, for selecting different books, was moved to the bottom in order to allow more visible columns in the grid.

The following are samples from the full spec created over a year of work.

Risk Tab

Left: Single Bond Side Panel

Right: Book Summary Side Panel

eTrading Tab

Left: eTrading Rules Side Panel

Right: Custom e-Trading Side Panel

Spec (1) – Filters

Spec (2) – Column Controls

Dialogs and Errors

Bottom Bar

Notifications Panel

Rule Editor