SPIDER BNP Paribas
Spider is a platform for all financial analysts. It is a tailor made and customizable data visualisation tool.
Product overview.
Spider is an application built in collaboration with credit officers, risk analysts and senior financial management to assess and compare counterparts through different lenses.
If you are in the financial industry they are the following: Market VaR, Stressed VaR, Potential total collateral, Notional, Net Exposure, Counterparty Liquidity Risk.
As Counterparty Risk is measured through time, when using the application, analysts should be able to chose a date and search a party in the first place through a type ahead dropdown, to secondly compare it to other parties.
Initial sketch, outlining the user journey. Search/ Explore/ Visualize/ Create, Export & Share.
Ideating and refining the explore part of the journey. Users expressed a desire to visualize each module within a wheel.
Working on a drag and drop tab to open it in a new window. Users need to see and compare a variety of graphs and a simple tab bar was too constraining for their use.
Design Challenges
For the past couple of years I have worked as a UX/ UI designer in Risk for a French investment bank and later joined one of the North American major bank. In the context of a big financial corporation I have been facing a couple of challenges.
Firstly, the product team we were working with used agile methodology. In my opinion, UX quiet does not fit the agile process as very developer focused. It is difficult to translate design into codes as design is not an exact solution. I felt under pressure to create, test, refine and deliver in very short time frames.
When I first joined I also joined a team of... TWO designers: my manager and myself. In the context of virtualisation, large financial corporations are pushing their way and are trying to make the digital transition in competition with start ups and smaller new institutions providing online banking services. To hire designers kind of look like a tick in a box for them. So one of our biggest challenges was to prove the value of UX and UI design to the department we were working for.
These type of issues are not isolated and it takes time and effort to make the cultural transition. So, when the project Spider came into the picture I made it a point to be able to conduct my own design research.
I was able to conduct a design workshop with our users in Paris. I only had a day and decided to involve a small number of people but very diverse: from the young and fresh intern to a senior analyst. I prepared the workshop weeks in advance by involving the stakeholder before we could meet in order to get as much income as possible from that day. I asked them to bring images, to complete individual short pieces of work to gain time on the day, etc.
We kicked off the workshop by a short presentation to make sure the users understood how important their participation was to the end product to be delivered.
We later moved to define our user personas and intersect them into our business goals, ask ourselves the dos and don'ts, drew and made mock ups of ideal dashboards, etc. To end the day we decided to show users a first prototype of the interface we had imagine before the workshop. We gathered feedback and critics to understand where the product should be improved.
Photo workshop
Looking at the first prototypes with the users to collect their first impressions and feedback.
The wheel designed by a team of users during a sketching exercise.
Graphic explorations on... graphics.
Inspiration moodboard.
Design Solutions
I created a palette using neutral colours to allow brighter colours to stand out on graphics. A graphic can display more than 10 lines in some case and there should be easily identifiable.
The main green is a variation of the BNP Paribas brand's one to maintain consistency with the company.
Branding - simple and bold typography. Neutral colours for the background and bright, plain and gender neutral colours for details.
It is an easy tool to use, very straight forward. In just a few clicks and information entered on their request users filter the wheel. It is used here as a menu displaying a graph by the center to give an overview of each module. When clicking on a piece of the wheel, users can drill down into graphs and charts related to the module. Each graph is scalable through time and details are display on hover. The information is very clear and easily spotted. Users can compare counterparties, export, create a new page and drag and drop the visual they want to share or print them.
Design Details - Graphs
Design Details - Drag and drop tab to open a new window.