Global Forex Mobile App
2020-2021
The design introduces brand-new interactions which have never used in the Forex trading app before. Besides, it visualizes users' financial info to make it easy to read and understand.
Background
Overview
The product owner needed help with creating a more visually appealing and robust features 2.0 platform. I was tasked with creating a new, intuitive UI for the ATFX APP platform as well as redesigning the UX from scratch, prototyping, interaction, and brand recognition. And app products based on the extension of the RWD version, in order to help users to check the latest forex information and account management at any time.
we spent six months developing on the forex service platform for ATFX APP and achieved 88% of overall progress in making it online. I was in charge of the UX planning, setting design guidelines, creating a Figma design system, and APP UX/UI team lead. I enjoyed working on this product from the ground up, will helping launch it in early 2021.
And the navigation bar is divided into four categories: Funding, Research, Live News, Profile.
Challenges&
Goals
How to create a convenient and intuitive APP foreign exchange experience that makes foreign exchange operations easier and more attractive for novice users?
Will the mobile application interaction method be more effective than the existing desktop version for enhancing the user's use of foreign exchange operations?
TEAM MEMBER
Julia, director
Pei-Yu Chen, designer / UX lead
Jasper Ye, designer
James Wang , developer lead
Sudie Lin, developer
Vic, developer
DELIVERABLES
Concept development
UX strategy
User flows
Wireframes
User experience
User interface
Prototype
Design Process
Analysis & Research
Concept Design
Mockup &
Prototype
testing
Implementation & Iteration
Personas
Personas
John Lee
- 28 years old
- Unmarried
- New to foreign exchange investment
- No brand loyalty
- Engineer
NEEDS & GOALS
- He anticipates generating passive income.
- He hopes to be easy to get started and understand the foreign exchange process.
- He hopes to get foreign exchange information easily.
- He wants to use his fragmented time to operate the foreign exchange.
James Chen
- 35 years old
- Married
- Familiar with foreign exchange trading system.
- Have brand loyalty.
- Have an agent role to manage subordinate members.
- Marketing Supervisor.
NEEDS & GOALS
- He wants to create more passive income.
- He hopes to use every spare minute to manage and operate the foreign exchange.
- He hopes to manage members conveniently.
Visual design
Fund Dashboard
Fund Dashboard like Category page, For this page, I decided to go with a grid layout so it's easier for people to browse. Icons and Cards design help give exposure & recognize each category and funding info easily. Tapping on each category will go to specific category page.
Research & Analytic
For this page, We help our users find and validate new opportunities, time their trades, learn about financial markets and manage their risk, all while having fun managing their portfolios.
Notification Center
Notification center is a combination of four submenu. System Notification / Transaction Notification / Market Reminder /Promotion . I combine this so that user don't have to switch between menu to see their notification.
Profile (Setting pages)
Page settings provide an easy way to change the contents and layout of each of your App pages. The Page Settings meta box can be found in the right column when editing a page and contains the following items.
Page Layout |
-
Account: Verify your main account.
-
Trading Accounts: To default your forex trading accounts.
-
Payment info: To default and verify your payment info.
-
Language: Choose your language from the dropdown box, and click Select.
-
Download MT4/MT5: Download & Install MetaTrader 4/5 Start Trading With Powerful Platform.
-
Reset Password: Enter your ATFX username or the email address that you used to register. We'll send you an email with your username and a link to reset your password.
News
A news page where user mostly spends a lot of time to read on the app. So I decided to use big typography and proportional spacing is making it easy for people to read. And also I use the timeline lets users can get the latest information quickly, and in the read news detail page, add "Related reads" so we can pick for users to see relevant news they are interested in.
Fund function - Withdrawal / Deposit / Transfer
Simplify the user's deposit, withdrawal, and transfer process pages. This page sets the default value of the account name, bank, or currency that users often use, so that users do not need to fill in the long-form content repeatedly to make transactions, speeding up user operations on this page and stay.
Reflection
Even though the app is still in beta, I consider it a success based on what I’ve heard from real users so far. The feedback has been very positive! App has already lined up some QA/QC Engineer to pilot the app and they’ve received quite a bit of praise for the intuitiveness of the UI and UX.To be part of building a product from the ground up and seeing it grow into a platform where real people use it has been surreal. It’s been a team effort that has required constant communication between myself, the founder and engineers. To make peoples lives better through design, even if it’s just a little bit, is why I do what I do.
Officially online：2021/ 2
( Currently the only open beta version, please obtain the password from the administrator )