Rethinking the online trading user experience

The problem

The abundance and complexity of 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 obstacles 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 BNL customers profiling. From this activity two personas emerged with different behaviours and needs:

  • a “power trader” with higher financial budget and investments 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 some major painpoints:

  1. Navigation links not accurately highlighted
  2. Lack of focus on the content
  3. Main services (Search, Portfolio, Orders) not in evidence
  4. There is no overview of personal assets
  5. The site layout is not responsive and texts are not well readable
  6. Interaction is hampered by the inconsistency of UI components and the lack of clear and timely feedback
  7. Excessive use of complex charts and tables does not facilitate data interpretation
  8. Online guides and tutorials are not adequately highlighted

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, the information architecture was revised and to validated with a tree testing. The lower percentages of completion for some activities – stock negotiation and news consultation – suggested a different terminology and articulation of these 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.

  • Navigation menu
    Main services are accessible from a sidebar with a focus on content.
    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 are updated according to the user’s 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.