Rethinking the online trading: a UX case study
UX Research // UI Design
The design challenge
Several home banking services allow customers with a financial portfolio to buy and sell stocks on the market without an advisory support.
From a user perspective, the benefits of having the same freedom of a dedicated trading platform are challenged by the complexity of data and the technical and regulatory constraints required by financial negotiations.
Approach and activities
Inside the Agile team of BNL, the Italian branch of BNP Paribas Group, I was in charge of carrying out a UX analysis of the online platform and to come out with a redesign proposal that could improve the overall user experience.
- Workshop
- User persona
- Usability analysis
- Information Architecture
- Wireframe
- UI Design
Team workshop
In the discovery phase, I joined a team of product owners, developers and project managers to share ideas and solutions for a new online trading platform.
Main findings:
- For a retail bank like BNL, the online trading is a secondary source of revenues since most negotiations are managed by financial advisory services.
- Traders with large financial assets, although a minority, were the main target as being the most active users in online negotiations.
- Dedicated platforms rather than direct competitors were considered as the benchmark for their expertise and extensive user base.
- Trust and accountability are strategic values for a financial service like the online trading.
Personas
During the workshop we were able to identify two personas, based on BNL customers profilation.
- a “power trader”: 50 years old • income above 50,000 EUR •high risk profile •uses more than one trading platform •market expert •works independently •connects daily or weekly •places at least 100 orders a year •moves large numbers •focused heavily on service reliability •regular user of alerts and notifications.
- a “basic trader”: 45 years old •average income •low risk profile • traditionally prefer to contact investment consultants •connects at least once a month •places no more than five orders a year •interested in checking latest operations •securities portfolio and reading market news.
Usability analysis
Most critical issues were already spotted by customer feedback and previous usability analysis but some more task specific insights were missing.
Through a cognitive walkthrough I was able to test the platform against best competitors by performing most common activities like booking and selling a security, monitoring top/flop titles, checking portfolio losses and gains.
Insights:
- Main services (Search, Portfolio, Orders) were not in evidence or partially hidden.
- The UX was compromised by design inconsistencies (e.g., form fields position and shape) and the lack of visual aids and / or of clear and timely feedback.
- There was an abundance and duplication of data and widgets (charts, indicators, ect.).
- Navigation was compromised by a non-responsive interface, multiple iframes and nested links.
Data analytics
Besides the home page, the most visited pages were the financial portfolio and the watchlist: their highest bounce rate was a signal that the user could not always find all the information required. Indeed, looking at the exit paths, there was a direct correlation with the portfolio and the login page, confirming some critical issues:
- Main services (Search, Portfolio, Orders) not clearly highlighted.
- Technical issues (e.g., idle sessions) forced the user to repeated login sessions.
Information architecture
Since accessibility and findability were quite critical, we reviewed the content organization in order to remove main navigation issues:
- Duplicated or unnecessary datas
- Terminology not intuitive and / or content-related
- Excessive nested navigation
In the tree test, tasks that were easier to perform but resulted in lowest success score (e.g., sell a portfolio asset and read market news) suggested us to use a different labeling.
Wireframes
After several iterations, we built the wireframes to be used as blueprint for the UI. We opted for high fidelity wireframes to better deal with some UX constraints:
- the information complexity (data tables, charts and performance indicators).
- some UI components not easy to represent in a paper based version and/or requiring additional steps (accordion, toolbar, contextual menus, etc.).
- the need to build a prototype that was as realistic as possible for stakeholders.
User Interface
The proposed design incorporated our solutions to the issues found in the discovery phase:
- The dashboard gives an updated overview of main services (assets, investiments and latest orders) and quick access to orders negotiations.
- Expandable accordions and sidebars helps to reduce the levels of navigation.
- Alerts, banners and notifications as well as a step by step tutorial support the user and provide an updated status of the platform.
- Search engine advanced filters facilitate content retrieval.
- A collapsable, non obtrusive toolbar helps to aggregate market indicators and performances.
- A fluid and responsive layout removes major navigation issues.
- A revised UI language grants consistency with web standards and brand style guides.
Takeways
The UX of a financial platform requires a particular attention to the content hierarchy — given the large amount of datas — and to visual hints and alerts that inform the user when performing an action.
In some circumstances (e.g., no direct access to potential users or when main user insights are available), methods like the cognitive walkthrough and the tree testing are good ways to isolate specific issues from a user perspective.
Working side by side with the product team and the developers helped me to understand the technical and legal constraints of designing a financial service.
