Rethinking the online trading user experience

The problem

The abundance and diversity of market and financial data present in a online trading platform requires an accurate information architecture. At the same time, technical constraints and regulations should not compromise the fluidity and ease of navigation:  users expect to consult their financial position and to convert quickly and safely. 

Within the BNL banking offer, the trading platform has undergone a restyiling work, aimed to removing the criticalities and inefficiencies of UX and providing an optimized user interface.

Client

BNL – Gruppo BNP Paribas (Italy)

Activities

  • User persona
  • User flow
  • Information architecture
  • Hi-fi wireframes and prototype
  • User interface

Tools

Sketch  Principle

Approach & solution

In the first step of the project, we tried to identify the user profile: direct interviews were conducted together with the analysis of the profiling data of BNL customers. From this activity two personas emerged with different behaviours and needs:

  • a “power trader” with higher financial budget and risk propension, interested in receiving timely replies and updates on his operations;
  • a “basic trader”, less active in negotiating and more interested in his financial position and market trends.

The users feedback together with the usability analysis and cognitive walkthrough, revealed a series of critical painpoints:

  1. Navigation links are not properly highlighted
  2. The focus on the content is lost when scrolling
  3. Main services (Search, Portfolio, Orders) are not in evidence
  4. A summary of required order data is missing
  5. There is no overview of personal assets
  6. Inactivity sessions force repeated authentications
  7. Content is not always visible and accessible due to the presence of multiple iframes and nested links
  8. The site is not responsive and texts are not well readable
  9. The interaction is compromised by the fixed layout and the inconsistency of ui components (fields, titles and buttons) as well as the lack of a clear and real time feedback in case of errors
  10. The excessive use of charts and complex tables makes difficult data interpretation
  11. Banners and alerts are not updated
  12. An online tutorial is missing

To find a quantitative matching with these findings, the main indicators of use of the platform were analyzed, i.e. the most visited pages, the bouncing rate and the exit paths. This confirmed some user needs and painpoints like the difficulty to access main services (Search, Financial Position and Order List) and the absence of a preview of personal investments.

Through interviews and team brainstorming sessions with the product owners, the business requirements and the respective performance indicators were isolated so to evaluate the effectiveness of the proposed solution.

Since one of the main critical issues concerned the content organization and findability, it was decided to modify the information architecture and to validate it with a tree testing. The lower percentages of completion of some activities – stock negotiation and news – suggested a different terminology and articulation of the related sections in the navigation menu.

The empirical data so far emerged served to create the high definition wireframes which, after various iterations, were approved by the product owners and stakeholders.

 

Key points

The redesign proposal is based on a fluid and responsive layout to be adapted to different resolutions. Content was reorganized and simplified without iframes to facilitate access to data and eliminate the problem of synchronization and adherence to the layout.

  • Navigation menu
    Main services are accessible from a sidebar to give focus to page contents.
    Links to each section are always visible and highlighted.
  • Dashboard
    The user has an updated overview of his position (assets, investments, securities portfolio, watchlist, orders) and market trends.
    Data refer to the user financial profile while a contextual menu allows access to the security detail or the order mask. Alert, banners and notifications are integrated in the dashboard.
    A tutorial guides the user to main features.
  • Toolbar and search engine
    The internal search engine is persistent on page scrolling with suggested results sorted by typology.
    Main market indicators are displayed in a fixed expandable toolbar. Data are updated in real time and filtered by type.
  • Portfolio
    The user has a summary of his position and performance.
    For each security, main data and trends are highlighted.
    A panel navigation allows a quick view to details.
  • Order form
    It is possible to view the balance and the availability of each securities deposit.
    The UI components have been redesigned and customized to guarantee consistency and affordability.
    Contextual visual aids prevent errors and delays in the order completion.