Chapter 01
Challenge
01
Make complex multi-protocol routing legible to retail allocators without dumbing down the underlying mechanics.
AttnomSolutions
Loading page
Bringing in the next surface without the heavy transition shell.
Loading page
Bringing in the next surface without the heavy transition shell.
Exhibition page
Yield aggregator front end with route comparison, slippage transparency, and a real-time vault dashboard.
Route clarity
Side-by-side
Allocators can compare path, fees, and slippage without diving into opaque protocol language first.
Risk language
Visible
Vault detail views explain tradeoffs and uncertainty rather than pretending yield is frictionless.
Growth effect
Bounce reduced
The clearer routing and explainer overlays held more users through the vault evaluation flow.
What this case covers
Tailored next step
Use the build brief when you need a routing, vault, or wallet product that explains risk as clearly as it sells upside.
Industry: DeFi / Fintech
Proof navigator: DeFi product lane / Portfolio risk radar
Outcome: Yield routing became easier to understand without hiding governance, risk, or growth tradeoffs.
This exhibition can be used as a public reference for similar work.
Delivery ribbon
Frame 01
Three-pane router UI with side-by-side route comparison.
Frame 02
Vault detail with live APR sparkline, fee breakdown, and risk callouts.
Frame 03
Wallet-aware shell with chain switching and pending transaction toasts.
Chapter 01
Make complex multi-protocol routing legible to retail allocators without dumbing down the underlying mechanics.
Chapter 02
Three-pane router UI with side-by-side route comparison.
Vault detail with live APR sparkline, fee breakdown, and risk callouts.
Chapter 03
Primary capabilities: Web3 Frontend, Data Visualization, Routing UX.
Signature stack markers: Next.js, wagmi, viem, Tailwind.
Annotation
Web3 Frontend
Annotation
Data Visualization
Annotation
Routing UX
Chapter 04
Route comparison reduced support questions about fees materially.
Vault dashboard shipped with explainer overlays and reduced bounce.
All read-paths SSR cached; write-paths route through wallet-only client islands.
Before
Make complex multi-protocol routing legible to retail allocators without dumbing down the underlying mechanics.
After
layers
The strongest version of this page separates yield appetite from the governance and risk framing beneath it.
Governance layer
Explain who can change routing logic, fee behavior, or vault parameters and how that authority is exposed.
Risk layer
Show slippage, asset exposure, and route instability in a language the allocator can actually interpret.
Growth layer
Connect the product promise to route comparison, wallet confidence, and vault-return communication.
journey
Readers should be able to follow how someone discovers, compares, approves, and monitors a yield route.
Discover
The allocator sees route options, APR framing, and protocol trust cues before connecting a wallet.
Compare
Side-by-side route views expose fees, slippage, and tradeoffs instead of hiding them behind jargon.
Commit
Wallet actions and pending state feedback keep the approval step understandable.
Monitor
Vault detail screens continue the workflow with live status, overlays, and risk reminders.
Related archive drawer
Crypto & DeFi
A trading-grade marketing surface, KYC funnel, and admin operator console for a multi-chain exchange brand.
Open exhibitionCrypto & DeFi
A multi-chain payment flow with real-time order tracking, wallet hand-off, and project sync.
Open exhibitionWeb & Platforms
A free, browser-native suite of file, image, OCR, and archive utilities that work entirely client-side.
Open exhibition