Trading App

Hantec Financial

UX/UI Design for trading apps, fintech dashboards, and cross-channel brand assets

Platform: Mobile, Web, Dashboard, Print

Tool: Figma · Adobe CC · Visual Studio Code

Duration: Q4 2024 - 2025

Discover Design Process Related Design

Other Tasks:
- Web Platform: Dashboard Design & UI Integration
- Marketing Web Campaign: Web Design & Front-End Development

Background + Problem

Hantec Group is a global financial and IT firm, known for its reputation in forex, commodities, indices, and precious metals trading. With a strong presence in international markets, the brand supports a diverse client base—from experienced traders to a growing population of younger, mobile-first users.

While the platform was originally tailored for seasoned investors, key flows like account registration, deposits, and withdrawals were complex and unintuitive for younger users. Despite Hantec’s mobile offering, most clients preferred web trading, leading to low mobile adoption and poor retention. The challenge: simplify and modernize the mobile experience to improve accessibility and engage the next generation of traders.

My Goal

To design a user-friendly, visually consistent trading app that simplifies complex financial actions through intuitive user journeys, high-fidelity UI, and a scalable design system. I aim to support both users and developers by delivering detailed flows, annotated designs, and launch-ready assets that enhance usability, trust, and product success.

Key responsibilities

Journey Maps
Visual representation of steps users take (e.g., signing up, placing a trade).
Competitive Analysis
A study of similar trading platforms. (like Trading212, TradingView)
User Flow Diagrams
Step-by-step paths (e.g., depositing funds → selecting asset → placing order).
Visual Design / UI Screens
High-fidelity screens with branding, colors, typography, icons.
Design System / UI Kit
Reusable components (buttons, charts, inputs, cards) to ensure consistency.
Annotated Design Files
Notes explaining behaviors, states (e.g., disabled buttons, error alerts).
Design Tokens / Specs
Colors, spacings, font sizes for dev implementation in Figma.
Global Marketing & Launch Assets
App Store screenshots design, launch event.

Teams

Me (Senior Multimedia Designer)
1 Product Manager
1 Design Head
Product Team
Marketing Team
Engineer Team

Competitive Research

To create a more intuitive and engaging mobile experience, we analyzed leading trading platforms, including Trading 212, TradingView, and IG, focusing on user onboarding, profile management, and transaction flows.

Conducted in-depth research on competitor apps, analyzing UX/UI patterns, user sign-up flows, and key features.

Proposed Solution

Simplifying Core Flows

Making sign-up, deposits, and withdrawals frictionless while ensuring compliance and security.

Encouraging Mobile Adoption

Designing a seamless experience to shift users from web to mobile without resistance.

Balancing Simplicity & Functionality

Creating an interface that appeals to both beginners and experienced traders.

Seamless Marketing Integration

Implementing in-app campaigns and analytics to enhance user engagement and optimize acquisition strategies.

Wireframing & Prototyping

Focused on user experience design for core functionalities such as create account, sign-up, profile pages, deposit, and withdrawal flows, ensuring a seamless and intuitive experience.

Mobile Design Systems

Provided starter kits and design source files.
Controlled color palettes, typography, and fonts.
Developed menus, buttons, components, fields, and labels.
Included icons and marketing images.
Integrated as part of the app architecture, system capabilities, and user interaction.

App Store Images Design Guideline

Used bold slogans to highlight key features like “3-Min Signup” and “One-Tap Trading”.
Designed eye-catching visuals in the first two images with clean UI and strong branding.
Popped out key elements like Buy/Sell buttons and trading news to draw user attention.
Ensured smooth visual flow with a clear layout, readable text, and localized messaging.