Company
OANDA
Role
Lead UX/UI Design
Tenure
2018 - 2024 • 5.5 years
Redesigning our most important user flow and the catalyst for the creation of a design system
OANDA is a global leader in online multi-asset trading services (Forex, Crypto and Share CFDs), currency data, corporate payments and FX services.
My first day at OANDA I joined a sprint planning session for a feature that developers were planning to build later in the sprint. I hit the ground running. That's fine - I thrive in fast. At the same time I needed to find ways to pull out and assess the state of the existing platform holistically. This is the story of how I identified the biggest issue plaguing the platform I had inherited, tackled it directly, which formed the foundation of the future of the entire platform.
My first day at OANDA I joined a sprint planning session for a feature that developers were planning to build later in the sprint. I hit the ground running. That's fine - I thrive in fast. At the same time I needed to find ways to pull out and assess the state of the existing platform holistically. This is the story of how I identified the biggest issue plaguing the platform I had inherited, tackled it directly, which formed the foundation of the future of the entire platform.
Where we started
In 2018, I took the lead of OANDA's UX/UI division with limited knowledge of forex and CFD trading. Despite this, my history of navigating unfamiliar territories—such as online classifieds at Kijiji and VarageSale, as well as real-time live events with CoveritLive—equipped me for the challenge. Amidst ongoing initiatives, I prioritized gaining insight into trading and our platform. Conducting a heuristic evaluation revealed usability issues and served as a crucial onboarding task for future design team members.
- No cohesive design language
Major inconsistencies across all platforms - CTA'S, nomenclature, user flows, features, etc. - which led to:- user confusion
- an increase in user error
- heavy cognitive load
- customer support having multiple scripts to help users perform similar tasks depending on platform
- Lengthy design handoff
Developer handoff meant providing separate designs for iOS, Android, Web and Desktop - Designing blind
User empathy and data-informed decisions not baked into the design process
Building Empathy
Qualitative
But I needed to see actual users using our platform. I was able to secure budget for the team for user testing - and OANDA being a Global company - the most efficient way to do that first and foremost was via UserTesting. We also found time and budget to do in-person sessions with users in New York, London, Singapore and Toronto.
We tested:
- OANDA's platforms
- Our competitors platforms
- OANDA's platforms vs our competitors platforms
Quantitative
Another great resource we had access to was data via 2 sources - Amplitude and Domo.
2.5x & 4x
Unique and Total Order Executions on mobile
12x
Average Monthly User Sessions on mobile
What did we find?
information all kind of blends together
I traded SHORT when I meant to go LONG
Text seems too small
I don’t immediately know where to look. I almost don’t know what order to read the information
Leaves you second guessing yourself
no submit button?
Feels like there is another step to do next because there is no submit button
submit button should be more obvious
Oh there’s the submit button! For some reason having it up there is confusing
Cluttered!
Everything squished to the top of the screen. I couldn’t even see where to submit the order.
Other key insights:
- our order ticket wasn't flexible enough to accommodate all trading strategies
- many users didn't actually use options like Take Profit and Stop Loss, opting instead to close manually or allowing the system to stop them out (something that we had always considered was a negative)
- many users would discover opportunities on desktop, but execute on mobile
- mobile usage was ever-increasing
Looking at the data and having a better understanding of how our users were using our platform - We decided to take a mobile-first approach and tackle our biggest challenge head-on:
Reimagine the Order Ticket and use that to inform the creation of a design system to bring holistic consistency to our trading platform.
Lo-fi Prototyping
I built a prototype using Framer's extensive pre-built componoent library and wrote some basic code in CoffeeScript in order to enhance the feeling of live trading to validate a more flexible approach to allowing users to input details on the Order Ticket screen.
Hi-fi Design Iterations
When setting out to re-design the Order Ticket screen, our team decided on some over-arching principles that would guide our process. These principles were informed by the 4 company values - Be Bold, Be Open, Focus and Own It:
- Empower Through Empathy
- Think Broadly; Execute Precisely
- Irreducable Simplicity
Key findings:
- using the insights we gained from the research - it was easy to provide designs that:
- provided a better and more delightful user experience
- displayed the content in an intuitively hierarchical way
- increased the confidence of a user when placing a trade
- provided more contextual help directly on the screen
Final Designs
Key Improvements
1.
An initially disabled call to action that lights up and provides contextual messaging once the user has input the required details.
- Forces user to explicitly select BUY or SELL
- Reinforces user selection of BUY or SELL in the CTA
- Allows user to know when they can proceed to the next step
2.
New order submit flow
Our old flow had very basic standard app dialog modals with limited information. We wanted to revamp this to provide all the context a user would need to make the most informed decision and feel confident in that decision. We also moved the CTA buttons on each step to be in a similar spot so a user could quickly tap through without having to find and see the button to hit.
3.
Flexible inputs that cater to different mental models
From testing, we learned that there are many different strategies employed by traders and they thought about their trades in completely different ways. We wanted to take the guesswork out of their hands and build a flexible and informative set of inputs that provided the user with as much detail on the fly as possible. What we provided the user with was a way of inputting data that, no matter their strategy, they could input the value that they wanted and it would show the relationship across the other values. This solution also took into account our compliance obligations and information that we absolutely had to show.
4.
Collapsible "extras" - if you don't want them - ignore them
From our research we learned that most users either used Risk Management and Bounds or didn't - there wasn't really "sometimes". So we built it in the system that Risk Management was "open" by default to encourage usage, but would be remembered for future use if it should be open or closed going forward.
5.
A bottom sheet system that provides contextual information on the fly
On the old Order Ticket - none of this information was directly accessible. A user would have to navigate to the website or open a web view that was not mobile optimized within their app - which also forced the user to scroll horizontally just to find the information.
6.
Contextual Error and Warning Messaging
Initial Launch in the U.S.
When deciding how to launch, we needed to be strategic. We wanted to be careful - it's our most important interaction point and the new screen was quite a departure from the previous screen. But we had the confidence of knowing how well it tested as a prototype. We decided to:
- Start small
launch it first in the US to 100 users - Provide flexibility
give users the ability to use either the NEW screen or the familiar screen - Gather feedback
display an mechanism to provide quick feedback (optional)
We also decided on some key metrics that would allow us to understand if this was a success or not:
- # of views - totals and uniques
- # of trades - totals and uniques
- views to trade ratio - totals and uniques
- users who have seen the new order ticket, but used the old one
- users who have tried the new order ticket, and went back to use it again
- thumbs up or thumbs down on order submission
2 Week Results
We wanted to maintain a tight feedback loop so we kept a close eye for 2 weeks. Key things we found:
From here we felt confident we could continue to ramp up to our US users. Over 2-week cycles we ramped up: 100 > 200 > 500 > 1,000 and continued to see similar results.
Key Learnings
- Socialize with key stakeholders
Most of the discovery for this project was never part of an "official project". The discovery process identified a need to do better. Socializing the findings of this discovery was key to building momentum into this becoming an important initiative for OANDA. Beyond that - the foundation here laid the groundwork for a full redesign in the future. - Strong beliefs; held loosely
A lot of the improvements and optimizations were built from a simple hypothesis that we could do better, but we weren't necessarily sure of how or what the end state would be. As we stepped further and further into the project certain themes would bubble to the top and we proceeded with more and more confidence as certain aspects became validated. - Tackle the hardest things first
I wouldn't say this is always the way to work, but it worked for us in this case. A potential tactic to consider when starting a project. This was easily the most complex and riskiest screen/user flow to update across our entire platform but would also yield the most direct results.