DATX X-Wealth — AI stock-investing app
X-Wealth is DATX's consumer fintech app: turning dense market data into clear signals, rankings and portfolios, with copy-trading and an AI Broker, for 10,000+ Vietnamese retail investors. The v2 work rebuilt the app on a tokenised design system.
- Role
- UI/UX · Design System
- Timeline
- 2023
- Team
- DATX Technologies · cross-functional
- Scope
- App UI across 8 feature areas + design-token system (v2)
Retail investors face overwhelming, jargon-heavy market data, and in trading, a misread number costs money. The v1 app's inconsistent UI and weak colour contrast hurt both trust and accessibility. It needed a calmer, decision-first interface and a scalable system across eight feature areas.
10,000+ investors · order 65→82%
- 01
Discover
Mapped how retail investors actually decide: where the data overwhelms and trust breaks.
- 02
Systemise
Rebuilt the app on design tokens and an accessible colour system so eight feature areas stay consistent.
- 03
Design
Designed the decision-first flows across signals, portfolio, copy-trade and the AI broker.
Eight feature areas, one investor reflex
Retail investors don't browse features. They run a loop: watch, read the signal, decide, then copy or trade. I mapped that loop first and let it dictate the architecture of all eight feature areas. The home screen is the loop in order: shortcuts to the X-tools, then live signal cards that state their strategy, return and an open/closed status chip, then a sentiment gauge that says in words ('Lạc quan') what the needle means, with the market-state chart underneath. Nothing on this screen is decoration; every block is one step of the decision. When the IA mirrors the reflex, the app stops feeling like eight products.
When a misread number costs money, contrast is a feature
The v1 palette failed where it mattered most: contrast. On the signals screen everything hangs on small coloured marks (Long against Short, open against closed, a plus against a minus) dozens of rows deep, often read in a hurry. So the colour system was rebuilt for WCAG contrast and made strictly status-driven: green and red are reserved for verdicts, never for decoration, so a row's meaning registers before the digits do. In most products accessibility is framed as compliance; in a trading app it's the trust feature. The promise that what you glimpsed is what the market actually said.
Benchmark four giants, ship half their model
Before rebuilding, I benchmarked Spectrum, Polaris, Carbon and Fluent v2, and then deliberately didn't copy them. Their full four-tier token models are built for organisations, not for a team that has to rebuild eight feature areas fast. X-Wealth shipped on two tiers (reference and system tokens) enough to keep colour, type and spacing consistent without the ceremony. The component sheets define every profit-and-loss state once (leader versus copier rows, gains in green, losses in red) so screens are assembled, not reinvented. Right-sizing the system was itself a design decision: the discipline of the giants, at the weight we could carry.
The board wanted accounts merged; investors needed them apart
The board's ask sounded simple: merge the demo and real accounts. But an investor who forgets which money is real is a disaster, and two separate apps would double every build. I studied how eToro, Mitrade, Coinbase, Bybit and OKX handle the split, then answered with a third path: one identical interface with a switchable mode, a quiet 'Tài khoản thật' pill at the top of home that flips the whole app between practice and real money. Stakeholders got their single product, investors always know exactly which world they're in, and the team maintains one UI instead of two. The design didn't pick a side; it dissolved the argument.
In fintech, clarity is the product.
Design tokens before screens
Rebuilding on tokens made eight feature areas consistent and far faster to extend. The system did the heavy lifting.
Fix colour for trust
I redid the palette for WCAG contrast because in trading a misread figure costs real money. Accessibility here is a trust feature.
Two token tiers, on purpose
Benchmarked Spectrum, Polaris, Carbon and Fluent v2, then shipped only reference + system tokens (skipping the full four-tier model) to rebuild eight feature areas fast without over-engineering.
Switchable real / demo, one UI
After studying eToro, Mitrade, Coinbase, Bybit and OKX, I met the board's 'merge demo and real accounts' ask with a switchable mode behind an identical interface, satisfying stakeholders without confusing investors.
01 / 0902 / 09
03 / 09
04 / 0905 / 09
06 / 0907 / 09
08 / 09
09 / 09- ✦Order completion 65% → 82%
- ✦Referrals drove 30% of signups — CAC down ~70%
- ✦Served 10,000+ investors / 8,000+ DAU; app rated 4.6/5
In fintech, clarity is the product. A tokenised system and an accessible colour palette turned a noisy, jargon-heavy app into a calm decision tool, and proved that accessibility and trust are the same thing here.