Project name
XM mobile apps
XM is an award winning online financial brokerage. They’re offering 1,400+ trading instruments in markets such as Forex, Stocks, Commodities, Indices, Energies and more. XM holds numerous awards for their services and as an employer.
The Challenge
In 2017 XM had only two trading platforms, web based and MT4 for mobile. Their business goal was to offer more personalised, comfortable and simplified experience to their customers. The task: Create advanced native trading applications for iOS and Android from scratch to make trading convenient practically everywhere at any time. Another goal was to integrate their educational platform for novice traders into mobile.
Roles
Design direction
UI/UX design
Research
Custom icon set
Illustration
Wireframing
User flows
Prototyping
QA
Years
2017—2021
The process started with thorough research among a shortlist of competitors. We dug deep into the competitor customer feedback to understand the wants, the needs and the frustrations. Interviews with existing XM clients were also done so we can understand what are the priority features we should focus our efforts on, being a tight team with limited resources.
Some of the research initiatives happened by taking advantage of the large multinational support team which helped immensely in understanding the mindsets of people from different cultures. Initially, there’s been some hesitation from the XM employees to participate in our research activities, so I proposed a reward (an iPhone). Expectedly, people started showing much more interest and we had a happy winner at the end.
Based on the user interviews, several user personas were created so we can paint a clear idea of how, when and why customers would use the apps.
We then created a user journey map to understand the path and associated emotions at each step of it. Among the major pain points that customers were facing were - exhausting registration process, not clear how to start trading, hard withdrawal process, lack of dark mode and others.
I further deepened my understanding of the business and the mental models of typical traders by reading even more literature and articles on the topic. Thinking as a trader added much more relevance to my ideas. My experience in Tradeo also proved to be very helpful.
Dark Theme
As the research efforts suggested, significant percentage of our customers were night traders, which pushed the dark theme feature up in the priority list, and we planned it for the initial versions of the app. Back then dark themes weren’t that popular among XM’s competitors so we wanted to take full advantage of that fact.
As a result, right from the first version of the application our customers were offered comfortable night trading, delicate on the eyes and increasing the battery life of their devices.
Typography
The main requirements for the typeface have been - big enough character set to cover 30+ languages, fast load speed and, of course, aesthetics. These requirements naturally introduced certain limitations which reduced the possible typeface choices, but in the end we picked Roboto by Google and designated is as a brand typeface for web and mobile.
Iconography
As a result of our goal to create a custom-tailored experience for our customers came the need for a custom designed icon set. It consisted of 100+ icons, created in several sizes and used into both the iOS and Android apps.
Work process optimisation
Right at the project set off, I noticed inconsistencies in the design and UX patterns. In 2017 design systems were at their dawn and I initiated the creation of XM’s own pioneering design system, aiming to improve consistency, speed, collaboration and hand-off. We wanted to be consistent in all touch points with our clients. I’ve prepared a presentation outlining the benefits and advantages of having a design system and we got approval from the management.
One of the benefits of our growing design system was the faster creation and manipulation of screens and more complex components. This allowed us to produce comprehensive flows, which reduced the need of lengthy documentation, needed from the devs to understand the goals. This in turn allowed us to create high-fidelity prototypes and test all kinds of hypothesis and edge cases before starting the implementation and wasting resources on refactoring and last minute change requests.
Under my proposition, we moved further from the legacy design process to Sketch, InVision, Zeplin and later Figma.
To optimise design hours, we decided that some UI elements would be shared between the iOS and Android systems.
Long before Figma’s variables, we came up with a colour mapping solution that allowed the developers to easily auto-generate the dark theme for our apps.
As mentioned above, one of the major pain points was the exhausting registration process, so we spent time with the compliance team and came up with a simplified and more transparent approach. Our users knew in advance what time would the registration take and which are the mandatory steps.
We also improved the customer trust by mentioning the regulation information on key steps at the user journey. Our efforts in this direction led to increased registration rates and customer satisfaction.
Contact
