Wallet Home: Critical UX Audit

This document replaces the previous reference-style page. The old version was not strong enough: it described what appears on the screen, but it did not provide clear recommendations, priorities, or acceptance criteria. It also drifted from the current implementation. For example, it said the balance card lists free, staked, and total TAO, while the current BalanceCard shows one hero total.

The recommendations below focus on the TaoApp Wallet home screen.

Short Verdict

The home screen is functionally rich, but overloaded. It currently feels more like a power-user control panel than a calm financial interface. The main issue is not the palette; it is weak visual hierarchy. Network state, TAO price, Developer Mode, the account pill, balance, action buttons, token rows, pending approvals, and Savant all compete for attention in a small viewport.

The redesign goal is simple: within two seconds, the user should understand three things:

• which account is selected;
• how much value is available;
• which primary action is safe and available now.

P0 - Remove False Or Noisy Actions

Remove Or Disable Swap

The home screen includes a Swap button, but it does not perform an action. That is unacceptable in a financial interface: users read a visible button as a supported operation.

Recommendation:

• remove Swap from the home screen if the feature is not ready;
• if a placeholder is required, show it only in Developer Mode;
• if it stays visible, it must be disabled with a short tooltip: Coming soon.

Acceptance criteria:

• the home screen has no active buttons without a result;
• every financial CTA leads to a clear next step.

P0 - Rebuild The First View Around Account And Balance

The current top area is overloaded: network dot, Developer Mode countdown, TAO price, hide balances, lock, theme, and view mode. These controls are technically useful, but visually noisy.

Recommended first-viewport structure:

1. First row: selected account and network status.
2. Main area: total balance.
3. Supporting area: available and staked breakdown.
4. Primary actions: Send, Receive, Portfolio.
5. Secondary controls: theme, view mode, lock, and Savant should leave the primary flow.

Specific recommendations:

• move Lock into an overflow menu or settings instead of placing it beside financial actions;
• move theme and view mode to settings, not Home;
• keep TAO price only if it does not sit absolutely centered in the top bar;
• show Developer Mode as a compact warning chip, not as a peer to balance or actions.

Acceptance criteria:

• balance dominates the screen when Home opens;
• the first viewport contains no more than three primary actions;
• price, network, developer status, and controls no longer fight horizontally.

P0 - Make The Balance Card Honest

The current BalanceCard shows one total. That is not enough for a wallet because TAO can be available or staked. Users need to distinguish spendable balance from total value.

Recommendation:

• hero: total balance;
• below it: Available and Staked;
• in fiat mode, show the TAO equivalent as a secondary line;
• when balances are hidden, mask all amounts consistently;
• loading states must preserve height so the layout does not jump.

Suggested structure:

123.456 TAO
$54,321.00

Available   23.456 TAO
Staked     100.000 TAO

Acceptance criteria:

• users can distinguish spendable balance from total balance;
• documentation and UI describe the same behavior;
• switching between TAO and fiat does not break layout.

P1 - Simplify The Account Pill

The account pill currently carries too much: identicon, label, badge blocks, and dropdown affordance. Badge blocks are also clickable. This is efficient for expert users, but it is not self-explanatory for new users.

Recommendation:

• keep only identicon, account label, and a short account type in the pill;
• move complex badge blocks to account details or the account switcher sheet;
• replace badge clicks with explicit action rows in the sheet;
• use readable labels for multisig, pure proxy, proxy, ledger, and vault, not only dense square badges.

Acceptance criteria:

• the account pill is readable at a glance;
• users understand that the pill switches accounts;
• account properties do not look like random buttons.

P1 - Separate Home From Portfolio

Home currently tries to be a wallet screen, a portfolio screen, and a navigation hub. That weakens the screen's purpose.

Recommendation:

• Home should describe the active account;
• Portfolio should describe all accounts;
• Home should keep only a brief link to Portfolio;
• token rows on Home should either be useful or removed.

If token rows remain:

• the TAO row should open active-account details, not an external website without context;
• the Staked TAO row should lead to staking or stakes;
• token rows should sit below primary actions and have lower visual weight.

Acceptance criteria:

• Home answers "what is happening with the selected account?";
• Portfolio answers "what is happening across all my assets?";
• these two jobs do not blend together.

P1 - Treat Pending Approvals As Risk Objects

Pending approvals currently look like a warning row with a count. That is too weak for wallet UX because connect and sign requests can be risky.

Recommendation:

• show the origin of the latest pending request;
• separate Connect from Sign;
• use a stronger warning tone for sign requests;
• use a concrete CTA such as Review 2 requests, not just Pending approvals.

Acceptance criteria:

• users understand who is requesting action;
• sign requests look riskier than ordinary notices;
• warning treatment does not feel decorative.

P2 - Remove Savant From The Default Footer

Savant adds brand character, but it currently competes with financial tasks. In a wallet, an AI input should not be a persistent footer element unless it is directly tied to the current account state.

Recommendation:

• remove Savant from the persistent footer;
• move it to settings, help, or a secondary action;
• alternatively, show it only in expanded mode or side panel;
• if it remains on Home, make it a compact secondary action without the typewriter animation.

Acceptance criteria:

• AI does not distract from send, receive, and balance review;
• the footer does not take space away from financial information;
• Home does not feel like a promotional surface.

P2 - Give Side Panel Its Own Composition

The side panel currently reuses the popup UI. That is fast to ship, but it is weaker as product design: a wider panel should use space differently.

Recommendation:

• add a responsive layout for side panel;
• above 520px, separate account summary and actions;
• make lists denser without stretching mobile cards across the full width;
• replace the popup-style top toolbar with a side-panel header.

Acceptance criteria:

• side panel does not look like a stretched popup;
• primary actions are available without scrolling;
• added width improves the experience instead of adding empty space.

P2 - Reduce Dependence On Inline Styles

The UI still has a large amount of inline styling. That makes consistency harder and weakens design control.

Recommendation:

• move repeated layout patterns into CSS classes;
• convert Input, Textarea, BottomSheet, BalanceCard, and Header toward class-based styling;
• keep inline styles only for dynamic values.

Acceptance criteria:

• base components are styled through CSS;
• visual changes are made through tokens and classes;
• fewer local exceptions exist inside screens.

Implementation Priority

1. Remove or disable Swap.
2. Rebuild Home hierarchy around account, balance, and primary actions.
3. Add the Available and Staked breakdown.
4. Reduce top-toolbar weight.
5. Simplify the account pill.
6. Move Savant out of the persistent footer.
7. Add a dedicated side-panel composition.
8. Gradually remove inline styles from base components.

Definition Of A Good Result

A strong TaoApp Wallet home screen should feel calm, dense, and confident. It should not demonstrate every feature at once. It should help users make a safe decision quickly: verify the selected account, understand the balance, send or receive funds, and notice risky pending requests.

The current interface shows product power. The next version should show control.