Foreign Exchange Centre
Project Management, User Experience
Bringing legacy applications up to speed so that Standard Chartered’s corporate clients can trade foreign currencies with ease.
We don’t want them paying fees and getting punished because they booked their foreign currencies in advance.
— Gaurav Nagesh Kawale, product owner
Standard Chartered’s corporate clients are missing out on using their pre-booked foreign exchange trades and end up paying late fees for double-booked foreign exchange. This was due to two things: a lack of system feedback in the current experience and multiple users having to action a single transaction.
Product brief for FX Centre
Product goals
Encourage users to use already booked foreign currency
We don’t want our users to have to pay booking fees due to our system’s lack of error prevention and end up double-booking their FX. We want to reduce frustration with the product and the bank.
Merge two legacy apps: Flowbanker and Straight2Bank
The functionalities of these 2 platforms must bleed into each other without the user having to be aware of it. In the backend, the trade flows from one system to the other.
Visually update the designs: Use components from the Unified DS
The FX Centre has to get with the times and be created with the new, unified design system in place so that it looks updated like the rest of the other Straight2Bank products.
Make it easier to keep track of foreign currencies
We will ensure users are aware of their payments, foreign exchange trades, and the linkages between these two segments. They must know they need to trade currencies before making some payments.
Design notes about the FX experiences for other banks
Research
Landscape analysis
It all began with looking at the experiences that other big banks provided. In essence, it was similar to what Standard Chartered wanted to achieve.
Banks like DBS were ahead of the curve by providing guides for their clients on their main site. A step-by-step breakdown on how to execute foreign currency trades. Meanwhile, Barclays simplified their FX form to just 3 inputs.
Most of the experiences had steppers. This simple component guided the user from one action to the next, keeping them focused, and less likely to be lost or confused. The language used was plain and understandable.
Landscape analysis of similar products
What did our design team learn?
Designing guides would be nice but it wasn’t a priority for this first design phase. There were a few things I wanted us to use for our first iteration.
Reduce the number of inputs. I worked on this with product owner to make sure we’re only asking for necessary information.
Consider using steppers to break up the journey into manageable chunks.
Rewrite calls to action to be more casual and in plain language.
Design error prevention message boxes to warn users about foreign currency that is already in their account.
Understanding how the transaction flows from one system to another using block frames
Design process
Starting with block frames
Since this product was complex with multiple personas involved, I started with mapping out the whole ecosystem so that the team had a clear view of how the journeys start and finish. Only once this map was approved by the leads did I move onto wireframes.
Moving onto wireframes
To streamline the process, not every journey was converted into wireframes. We only focused on a few main journeys. I ran these journeys with the product owner before moving onto the next step.
Quick wireframes presented to stakeholders
Prototypes and high fidelity
After a successful usability test and round of stakeholder presentations and approvals, we quickly got to briefing the development team on the upcoming book of work for this FX Centre.