Trading Case

Hantec Financial

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

Mobile · Web · Dashboard · Print Figma · Adobe CC · Visual Studio Code

Discover Design Process Related Design

Challenge & Competitive

Hantec Group is a global financial and IT firm specializing in forex and commodities trading. While historically optimized for desktop power-users, the platform needed to capture a growing, mobile-first demographic.

Legacy Desktop Bias
Pivot user patterns to a 120Hz native mobile experience.

Platform Disconnect
Desktop reliance was high, resulting in poor mobile adoption and weak user retention loops.

Weak Retention Loops
Modernize deposit/withdrawal UI using familiar, trusted mobile payment patterns.

Competitive Benchmarking
I conducted a structural UX audit of market-leading platforms, including Trading 212, TradingView, and IG. To dissect their user onboarding, portfolio architecture, and transaction mechanics. By analyzing their design systems and engineering constraints, I identified key patterns to streamline Hantec’s compliance loops and optimize the mobile trading interface for a younger demographic.

My Goal

To architect a mobile-first trading application that translates complex financial compliance into friction-free user journeys. By pairing a tokenized design system with interactive micro-animations, I aim to bridge the gap between design and development by delivering high-fidelity, launch-ready assets and precise documentation engineered for a highly performant, accessible release.

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

Gaile (UXUI Designer), Product Manager, Design Head, Product Team, Marketing Team, Engineer Team

Proposed Solution

KYC ARCHITECTURE

Flow Refactoring

Streamlined complex registration and wallet transactions into secure, micro-step journeys to eliminate onboarding drop-offs.

120HZ NATIVE EXPERIENCE

Ecosystem Shift

Architected a gesture-driven mobile interface optimized for high refresh rates to transition power-users away from desktop reliance.

ADAPTIVE UI

Smart Information Architecture

Implemented a progressive disclosure layout, surfacing deep analytical charts for experts while keeping the canvas clean for beginners.

DATA NODES

Growth-Loop Integration

Embedded non-intrusive analytic nodes and marketing frameworks directly into the application shell to drive continuous user retention.

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.

Impact Metrics

57 %

Execution Speed

Faster trade execution across the native interface.

45 %

Onboarding Conversion

Higher registration and compliance completion rate.

60 %

Mobile Engagement

Increase in active daily mobile platform usage.

90 %

Stakeholder Approval

Positive feedback on system architecture and documentation.

Web Design & Front End Dev.

Designed and developed companies website, including, Hantec Financal, Hantec Challenge, Hantec Prosperous.

Asia Marketing Campaign Landing Page