Arena Bond TraderCiti
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.
The stakeholders asked for 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.
– 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.
After 3 hours of brainstorming and task mapping
Out of the task analysis, it became clear that the activities could be classified into three main areas of interest:
- Risk, in which the trader would spend most of the time, marking bond prices, analyzing its profit and loss (PnL) and settings axes - discounts.
- E-Trading, an area to manage all e-trading settings for automatic, low-amount, risk-reducing trades.
- 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
In the 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.
Left – Single Bond Side Panel
Right – Book Summary Side Panel
Left – eTrading Rules Side Panel
Right – Custom e-Trading Side Panel
Spec (1) – Filters
Spec (2) – Column Controls
Dialogs and Errors