Objective

Background

A major financial services data and analytics provider acquired a Foreign Exchange trade technology product company. The project scope proved to be both a product transformation and rebranding effort – taking the platform from a Tier 3 solutions provider to a Tier 1 competitor. We were tasked with providing a proof of concept that could be used in roadshows to test market appetite for a white label modernized platform design. FXL’s aim was to target the largest investment banks as a premier full lifecycle forex solution.

Solution

Proof of concept: web-based responsive desktop application and mobile app.

My Role 

UX Designer

Project Deliverables

• Personas / User Journeys
• Feature priority & requirements
• Annotated wireframes
• Interactive prototype (HTML)
• Visual design & style guide

About the FXL framework

FXL’s desktop client portal provide a highly reliable, configurable solution that handles high volumes of aggregated trade transactions via multi-tiered trade blotter views. The data is displayed in real time and offers straight-through-processing with front-to-back office integration.

The platform is also a highly customizable white label web portal. The current design is a series of outdated winforms components that require a better user experience, updated graphics and web technology. It has become difficult for end users to navigate, challenging to configure and enhance; and provides limited ability to support ad-hoc selection, summarization, analysis and visualization of data across entities (products, clients, etc.). 

Design engagement

Team approach

Using an agile methodology, the Design portion was broken into several 6-8 week phases. Each phase was further broken into 2 week sprints. The design is a result of a very hands on, intense, collaborative process between all talented team members. During this project, I worked as UX Designer under the guidance of the UX Practice Director and the Senior UX Architect. I also assisted the Lead Visual Designer.

Design approach

Design Approach.png
 

Distilling Phase 1 priorities

Forex trading is highly technical in nature and sales traders can be notoriously difficult to source for UX research and discovery needs. We relied heavily on a well versed SME internal to the consultancy as well as a couple of external Sales Traders at large financial institutions to help inform our analysis and scenarios.

Initial UX analysis for FXL client portal uncovered the following needs:

  • Improved usability and customer experience, in particular for users of the existing web user interface.

  • Quicker access to alerts and notifications by providing users with mobile access for both iOS and Android devices.

  • Increased flexibility for end clients to customize their digital experience.

  • Redesign the desktop application to be responsive to support varying screen sizes.

  • Apply best-in-class interaction design and highlight consistency where applicable.

  • Prioritize sales traders customer experience for proof of concept.

 

Identifying sales trade journeys

Users & Journeys:

  • 6 users identified across 4 major customer journeys (including sales traders, position traders, hedge fund mangers, analysts, and brokerage sales)

Journeys include:

  • Executing a block trade

  • Executing a spot trade

  • Automated RFQ Trade

  • Automated Trade

 

Key insight

“Sales traders need to be able to summon summaries of different types of information (margin numbers, position numbers, P/L numbers) quickly and in the same view while they have their clients on the phone. Sales traders also need the ability to display their data in different sizes: full screen on a desktop and as small windows on a desktop. Mobile when they’re on the go.”
— Sales Trader at a Tier 1 Firm

Branding & visual direction

We partnered with an art director and visual designer to help drive the look and feel of the UI redesign. She drove client workshops to help distill where FXL fit within the competitor landscape. In addition, she was responsible for crafting a scalable design language and system for the portal. The client wanted to position FXL as both a highly customizable solution (akin to Barracuda) with a sleek UI design (UBS Neo).

FXL Brand target:

Trustworthy, approachable and dynamic

 

Solution: customizable screens & components

During the concept phase, we had sales and position traders walk us through the existing FXL winforms interface. Based on our sales trader journeys and direct feedback on the current experience, we brainstormed ideas with our SME, business analyst and key stakeholders. The solution netted on a Desktop first application that is anchored by a customizable launchpad. Components are visual trade data sets (P/L, Trade Volume, Trade Activity, etc.) and are the building blocks of the system. Screens are collections of components. Based on role and preference, traders can view data at a deeper level by component or at a summary level by screen.

*Data and bank information are placeholder only

Launchpad:

  • Greets user on login

  • Launches screens and components

  • Holds utilities like alerts and settings

  • Can be minimized when not in use

  • Can be customized by role

 

Client Screen:

  • Collection of components

  • Filters data for all displayed components simultaneously

  • Ability to switch components’ state all at once (eg. Graph to Table view)

  • Organized according to role

  • Designed to display at full screen

Components:

  • Basic building block of the system

  • Launched from the Client Screen or Launchpad

  • Queries a specific data set

  • Displays the same data in different ways (eg. Graph, Table or split views)

  • When viewed as a stand alone, components have a separate navigation

Mobile interface: Alerts

In addition to providing a desktop solution, our team also introduced the concept of slimmed down native mobile version of the FXL platform.

Shown are mobile screens illustrating a scenario where a submitted client trade triggers an alert for nearing margin limit. A sales trader, on the go, would be served a mobile notification to log in and view alert details on the trade. They would then be able to expand the alert, view details, respond to the position trader, or contact the client via phone or email. This alerts experience is optimized for mobile and compliments the desktop alerts experience.