Access FX

Mobile trading app

Project Overview

The Access FX mobile app forms part of the suite of FX trading capabilities offered to Absa clients. It gives users the ability to view live FX rates, book FX deals and place and manage their FX orders from their mobile device.

Project specs

Company: Absa
Timeframe: 2018 - 2023
My role: Project design lead

Design tools

Logo for Miro
Miro
Logo for Sketch
Sketch
Logo for Figma
Figma
Logo for Protopie
Protopie

My Role

I joined the product team fairly early on, after some of the initial discovery work had been completed by one of our other designers. I was the project design lead for mobile, also working closely with the designers for the desktop trading platform to ensure cross-platform alignment. I took on all aspects of the UI and UX including UI design, prototyping, user testing and developer handover and testing.

The Challenge

As part of Absa’s separation from Barclays in Africa, we needed to migrate clients off of the existing Barclays platform and onto a new Absa trading platform. From our initial engagements with clients we knew that even though the existing platform was incredibly clumsy to use, it was a platform that clients were very comfortable with because they had been using it for so long, and therefore also very hesitant to move off of. Because of the complexity of the platform, many clients had been taught how to perform the task/s they needed to conduct and they were concerned that with a new platform, they would have to relearn this.
User segmentation showing three different user types: traders, outsourcers and clients.
Basic user segmentation

The Process

As a product team, we followed Agile working methodologies, initially using a scrum framework and transitioning to a Scrum/Kanban hybrid over time. For the design process, we tried to follow the Design Thinking process as closely as possible.

Research and analysis: Conducted by one of the other designers on the team, this included Competitor analysis, analysis of the existing platform and card sorting exercises to help understand the users priorities and understanding of mental models and terminology.

Defining the flow: The card sorting exercises helped to define the information architecture. A high level user flow was also put together to help map out the main pathway for the users.

Exploring options: A combination of wireframing and lo-fi designs to see what worked best. We reviewed these initial designs with internal stakeholders and further built out one of the options into a high fidelity version.

Gathering feedback: From the high-fidelity designs, I produced a high fidelity prototype in Protopie. The reason for going with a high fidelity prototype was that we wanted to mimic the final intended product as closely as possible, but still with enough time to make any necessary changes before development got too far. We tested this prototype with a range of users including clients and internal sales traders.

Iterating: From there, we prioritised amendments as a product team, focusing on the important ones first, along with quick wins, and then adding the rest to the backlog.

Development and QA: I worked closely with the developers and QA engineer to ensure alignment with the designs. Where possible, we tried to stick with native iOS and Android patterns and components, but due to the complex nature of the platform, there were instances where we had to introduce custom components. I also helped to guide with microinteractions and animations.
Aerial views from inside a UX lab showing different usability testing sessions
Usability testing in the UX Lab

The Solution

Due to the proprietary nature of this project, only limited designs can be shown, however what we delivered was a stripped back version of the functionality offered on desktop. Because of the smaller screen size and complex nature of the platform, it didn’t make sense to try and replicate everything from the desktop platform. With this in mind, we really needed to consider the context of use when designing the mobile experience.

From our engagement with users we knew that the purpose mobile needed to serve was to bridge the gap – a way for users to still be able to do the basics when they were away from their desktop, – travelling, in meetings, or after hours when they weren’t at the office. This meant we had the freedom to design an experience which suited its purpose and platform, simplifying the functionality down to only what made sense to show on mobile.
An animated gif showing an FX app with FX rates ticking up and down

The Outcomes

Due to the confidential nature of this project, metrics can’t be shown, however, the feedback that we gathered from pilot users as well as feedback received from the sales team was very positive overall. Below are some key takeaways:

Prioritising speed and ease of use
The fast-paced nature of FX trading means that users get especially frustrated if a system is slow or actions are not immediate as it can have a direct financial impact on them. Simplicity and optimisation were key in the design of the app. Users needed to be able to quickly check live rates, as well as having clear visual affordances to allow them to see the status of their trades in the market.

Enhanced convenience on mobile
While the mobile app was never intended to replace the desktop functionality, offering basic trading capabilities on mobile gave users a level of convenience that they didn't previously have. It provided users with peace of mind that they could manage their trades even when they weren't in front of their computers. This was especially useful for clients who travelled often, or for outside of office hours.

Customisation for personalisation
The ability for users to set up the app based on their preferences was valuable, especially because of the varying levels of trading proficiency among users. For example, some users liked having additional confirmation dialogs to double check details, while other users found that it wasted time. By allowing users the ability to partially customise the app to their usage patterns, we could cater to the needs of different user groups.

Alignment with mental models
As users were very attached to the previous platform, it was important that we took into account their existing mental models, while still improving the look and feel and experience where possible. In addition, even though the functionality offered on mobile differed slightly to the desktop app, it was important to maintain consistency so that users could switch seamlessly between platforms.

Learnings

The power of user testing
My biggest learning on this project came from the user testing that we did. We were able to conduct user testing multiple times throughout different stages of the project, including visits to clients at their workplaces, testing in the UX lab at our office, and remote testing sessions during COVID via MS Teams. The insights from users were invaluable, and it also made prioritising design tasks on the backlog much easier.

The importance of good relationships with key stakeholders
I was lucky enough to work with some great business stakeholders on this project. They recognised the value of user feedback and a design-led approach, empowering us to run the project in a way that prioritised these elements while still providing guidance from a business perspective. This collaboration ensured that our decisions were informed by real user insights, ultimately leading to a more user-centric product.

The strength of a small, dedicated team
The product team that worked on the MVP was small, with only one person per discipline — a product owner/scrum master, a backend developer, an Android developer, an iOS developer, a QA engineer, and a designer (me!). This setup meant that there was no room to hide, and each person really owned their role and was accountable for their domain.
Back to toparrow_upward