Mobile design for AI trading app
In a freelance project for Finodex we re-designed an application for following complex AI trading systems.
Introduction
The company offers retail investors a tool that allows the investor to easily follow automated trading systems. Due to the complex information given in the app and a confusing information architecture, the entire app needed to be re-evaluated.
My role
In this project, I worked together with another freelancer. My focus was on managing the project, conducting UX research, setting up requirements, wireframing and UI design.
Problem
The main challenges in this project were:
- Lack of intuitive interaction with the app
- Confusing information architecture, making it hard to find the info you need
- Different customer needs: users who want to understand all complex information before making a trading decision and users who want to easily accept trading signals
“How do we organise information in a way that creates trust and confidence with users?”
Goal
Create an improved user experience throughout the entire application, focusing on high intuitiveness and clear information architecture to ensure users feel trust and confidence while trading with Finodex.
Users
Based on insights provided by the client, the user group was defined. Most users are customers who enjoy the benefits of trading but do not want to be overwhelmed with the complexity of trading. Differences exist between users who are new to trading and users who are experienced traders. Relatively, users were older of age.
Project plan
A plan was created to guide the team through the project. The project started with a mapping of the current situation, to fully grasp the concept of trading as well as the user flows. Then, interviews helped us understand and prioritize jobs to be done. In addition, existing systems were analyzed to identify industry best practices and opportunities for improvement. All findings were used to create a requirements list for the mobile application. As a next step, we started sketching the user flow and create wireframes. Later in the project, the prototype was designed in more detail and tested with users. For each deliverable, a feedback session was scheduled to present findings and adjust if needed.
Setting up requirements
Mapping the current user flow, conversations with users, a survey and researching existing systems led us to setting up new requirements. The list was prioritised using the MoSCoW method. As a result, we established the need for:
- A better onboarding process
- Simplifying the in-app navigation
- Displaying relevant trading data based on user preferences
- More intuitive processing of how to follow a trading signal
- A support system
Building wireframes
Based on the list of user needs wireframes were sketched, lining out the structure of the app and prioritisation of content.
Iterating sketches
Next, we started designing the content from the wireframes. This prototype was iterated multiple times.
User tests
During our design process, we tested the application with users to investigate their interactions with the interface. In these tests, participants were given tasks to carry out in the prototype.
Delivering final designs
Lastly, we created the final screens. The Figma file was delivered with context for the developers.
Outcomes
The project resulted in an entire re-design of the mobile application. The new interface aims to be more intuitive, with complex information simplified and adjusted to user needs. A few examples of how we achieved that:
- Onboarding screens, to let the user know what they can expect in the app.
- Simplifying the navigation menu to four menu items, making information easier to reach.
- An interactive dashboard with tiles that users can edit to show data based on user preferences
- More clearly organised data fields and tables for viewing performance, positions, trades and signal history. Providing the options for both simpler and more complex tables for the more or less experienced users.
- More intuitive processing of how to follow a trading signal, making it easier and quicker for users to make a choice and follow the status of their choice.
- A support system, including a chat functionality, service messages, videos, a list of terms and a walkthrough of how the app works.
