Responsive Forex System Design
2019-2020, Forex Design, Taipei
Introduction 👋🏻
“ Giving more flexibility and efficiency to users for checking the latest forex information and account management at any time. ”
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.
My Role
UI/UX designer
Team member
Jen Huang, director
Gil Ng, design lead
Regan Ruan, UI/UX designer
Rex Hong, developer lead
Zachary Wu, developer Wings Ko, developer
Deliverables
Concept development
UX strategy
User flows
Wireframes
User experience
User interface
Interactive Figma Prototypes
Open the Website
🌐 Due to confidentiality, the work is available upon request via rinachenme@gmail.com. Thanks!
Design Process.
Challenges and goals.
How to let users feel that new analysis tools and service functions are convenient and intuitive to use them?
How to let different countries' users (like Arabic) intuitive to register?
How to strengthen the brand visual design and brand identification?
Discovering.
The first time I get this mission, we already have an existing 1.0 design but PO was not satisfied with the current design and need more work on the UX as well as the UI. It made sense to me to review the existing design and started from there.
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 needs to manage his members at home after work.
He wants a professional tool to help him manage his members.
He is busy at his work and he never wastes his time to manage and operate the foreign exchange.
Direction.
Visual design
Maintain full control over our company's brand with a design system, like:
・Select fonts for global consistency.
・Implement responsive design components.
A Localization Friendly User Interface
To design our layout to be Flexible and Dynamic, like:
・Right to left flip.
・Line breaking and word wrapping.
User flow.
Taking the fund - Deposit process as one of the representatives, the key design is to reduce the time for users to register.
🌐 Provide online version
Visual design.
Dashboard
A dashboard like category page, for this page, we decided to go with a grid layout so it's easier for people to browse. Icons and card design help give exposure & recognize each category and funding info easily. Tapping on each category will go to the specific category page.
Fund page
Show client trading accounts detail, and simplify the user's deposit, withdrawal, and transfer process pages.
News page
Research and analysis page
Provide research tools and professional video courses
Profile (Settings pages)
Outcomes.
Improved work efficiency via defined metrics on the redesigns, including
3% increase of click Foreign exchange order button
5% increase of registration numbers
User feedback like "I enjoy the new designs way more", "it helps my decision making"
