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.
– 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.
Out of the task analysis, it became clear that the activities could be classified into three main areas of interest:
This early architectural decision was the first building block of the new operational model and would condition all tasks coming next.
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.
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.