# Onboarding study — 14 September 2026

## Implementation update

The user subsequently approved implementation on Gyro only. The live optional
intro and first/returning browser behaviour are documented in [ONBOARDING.md](ONBOARDING.md).
Native controls/diagrams implement the refined A direction with optional short
step explanations. The study notes below preserve the earlier concept-only phase;
Eiko and Meryl remain unchanged.

## Scope

Review-only first-use exploration. Live Gyro, Eiko and Meryl apps, financial code, configuration and beta are unchanged. Start with the canonical Gyro journey before applying site skins. Existing Gyro/Eiko explainers contain extensive mechanisms; this study fills the short orientation gap between landing and an unfamiliar Vault/Market screen.

Question: can a newcomer identify the correct destination and next action without coaching? Compare intent cards, a product-relationship map, and an optional short guided preview. Do not treat prettier images or reviewer agreement as comprehension evidence.

## Invariants

Two destinations, three actions: Vault/deposit; Market/buy; Market/list existing vault shares. Buying does not require a vault deposit first. Listing requires vault shares and only converts on fill. No promised yield, unchanged principal, fabricated quote or numerical payoff. Fee collection is not the same as profit. No new on-chain functionality or forced onboarding/wallet connection.

## Image generation

Built-in imagegen, one call per concept. References are September 13 final Gyro vault, buyer and seller phone captures. Saved outputs: `img/designs/2026-09-14/concept-a.png`, `concept-b.png`, `concept-c.png`.

### A — Choose by intent

```text
Use case: ui-mockup. A focused NEW-USER ONBOARDING design study for Gyro, 14 September. Act as a skilled UI/UX designer explaining an unfamiliar product through visuals and interaction, NOT extra paragraphs. Generate one high-fidelity board showing honest desktop and phone variants of ONLY the onboarding component/short sequence, not whole dashboards.
Reference images 1,2,3 are current Gyro Vault, Market Buyer and Market Seller phone screens. Use these for navy/teal brand, logo and product context only; do NOT repeat holdings, market prices, wallet account or all strike selectors in the onboarding.
Problem: a new user does not know whether Vault or Market is the right place. Product has TWO top-level destinations and THREE actions: Vault -> Deposit assets; Market -> Buy options OR List vault shares. Vault deposit supplies liquidity and receives vault shares; its holdings shift between token and USDC as prices change and it collects swap fees. Market sellers list existing vault shares at chosen IV; offers convert only if bought. Buyers pay for dated options and assess the full quote. A buyer DOES NOT need to deposit into Vault first. Listing requires vault shares. Do not draw a mandatory Vault->Sell->Buy funnel for every user.
Use short action words supported by meaning-bearing visual aids: input, choice, next step. Icon alone isn't enough. No candlestick decoration, generic rocket, overflowing coins, piggy-bank/safe-guarantee metaphor, APR, money-growth promise, fabricated quotes, profit chart or legal/disclaimer paragraph. Do not call IV a return rate. Do not imply fees equal profit or unchanged principal, arbitrary expiry, or active Markets availability. No wallet connect forced before learning.
Visible language can use 'Deposit assets', 'Buy options', 'List vault shares', 'Vault', 'Market', 'Requires vault shares', 'See an example', 'Skip'. Provide a short first-use entry accessible again later, never a blocking long tour. 44px controls, readable phone text, responsive native HTML/CSS feasible. Avoid visually duplicating the whole component to fill the board. The design is a proposal, not production data.
Hypothesis A: a newcomer can route themselves using three concise illustrated ACTION CARDS, clearly grouped under two destinations (Vault and Market). Title 'What would you like to do?'. Each card has an intuitive tiny process graphic rather than decorative art, its action label, one short supporting sentence and an unambiguous next step. Depositor visual: assets enter vault, receive shares; buyer visual: choose option, review price; seller visual: shares become an offer awaiting a buyer. The seller requirement must be visible. On phone cards stack without huge empty space. Show optional help entry on an existing nav strip but no forced modal. Use the existing brand, not a new mascot. ONE well-composed desktop and phone concept.
```

### B — See the relationship

```text
Use case: ui-mockup. A focused NEW-USER ONBOARDING design study for Gyro, 14 September. Act as a skilled UI/UX designer explaining an unfamiliar product through visuals and interaction, NOT extra paragraphs. Generate one high-fidelity board showing honest desktop and phone variants of ONLY the onboarding component/short sequence, not whole dashboards.
Reference images 1,2,3 are current Gyro Vault, Market Buyer and Market Seller phone screens. Use these for navy/teal brand, logo and product context only; do NOT repeat holdings, market prices, wallet account or all strike selectors in the onboarding.
Problem: a new user does not know whether Vault or Market is the right place. Product has TWO top-level destinations and THREE actions: Vault -> Deposit assets; Market -> Buy options OR List vault shares. Vault deposit supplies liquidity and receives vault shares; its holdings shift between token and USDC as prices change and it collects swap fees. Market sellers list existing vault shares at chosen IV; offers convert only if bought. Buyers pay for dated options and assess the full quote. A buyer DOES NOT need to deposit into Vault first. Listing requires vault shares. Do not draw a mandatory Vault->Sell->Buy funnel for every user.
Use short action words supported by meaning-bearing visual aids: input, choice, next step. Icon alone isn't enough. No candlestick decoration, generic rocket, overflowing coins, piggy-bank/safe-guarantee metaphor, APR, money-growth promise, fabricated quotes, profit chart or legal/disclaimer paragraph. Do not call IV a return rate. Do not imply fees equal profit or unchanged principal, arbitrary expiry, or active Markets availability. No wallet connect forced before learning.
Visible language can use 'Deposit assets', 'Buy options', 'List vault shares', 'Vault', 'Market', 'Requires vault shares', 'See an example', 'Skip'. Provide a short first-use entry accessible again later, never a blocking long tour. 44px controls, readable phone text, responsive native HTML/CSS feasible. Avoid visually duplicating the whole component to fill the board. The design is a proposal, not production data.
Hypothesis B: a SMALL INTERACTIVE PRODUCT MAP teaches why Vault and Market are connected. Show Vault shares can supply seller offers; inside Market show seller and buyer exchange as distinct roles, not a 3-step user funnel. Make 'I want to deposit', 'I want to buy', and 'I already have vault shares' reachable directly. Use two grouped areas, purposeful directional connectors with clear short labels; avoid spaghetti, 3D finance machines and flowchart jargon. Phone version uses one compact map with selected-role highlight and next action. Relationship should make sense in five seconds; exact flow matters more than ornamental polish. ONE desktop and phone concept with at most one selected-state inset.
```

### C — Learn one choice by doing

```text
Use case: ui-mockup. A focused NEW-USER ONBOARDING design study for Gyro, 14 September. Act as a skilled UI/UX designer explaining an unfamiliar product through visuals and interaction, NOT extra paragraphs. Generate one high-fidelity board showing honest desktop and phone variants of ONLY the onboarding component/short sequence, not whole dashboards.
Reference images 1,2,3 are current Gyro Vault, Market Buyer and Market Seller phone screens. Use these for navy/teal brand, logo and product context only; do NOT repeat holdings, market prices, wallet account or all strike selectors in the onboarding.
Problem: a new user does not know whether Vault or Market is the right place. Product has TWO top-level destinations and THREE actions: Vault -> Deposit assets; Market -> Buy options OR List vault shares. Vault deposit supplies liquidity and receives vault shares; its holdings shift between token and USDC as prices change and it collects swap fees. Market sellers list existing vault shares at chosen IV; offers convert only if bought. Buyers pay for dated options and assess the full quote. A buyer DOES NOT need to deposit into Vault first. Listing requires vault shares. Do not draw a mandatory Vault->Sell->Buy funnel for every user.
Use short action words supported by meaning-bearing visual aids: input, choice, next step. Icon alone isn't enough. No candlestick decoration, generic rocket, overflowing coins, piggy-bank/safe-guarantee metaphor, APR, money-growth promise, fabricated quotes, profit chart or legal/disclaimer paragraph. Do not call IV a return rate. Do not imply fees equal profit or unchanged principal, arbitrary expiry, or active Markets availability. No wallet connect forced before learning.
Visible language can use 'Deposit assets', 'Buy options', 'List vault shares', 'Vault', 'Market', 'Requires vault shares', 'See an example', 'Skip'. Provide a short first-use entry accessible again later, never a blocking long tour. 44px controls, readable phone text, responsive native HTML/CSS feasible. Avoid visually duplicating the whole component to fill the board. The design is a proposal, not production data.
Hypothesis C: an OPTIONAL tiny interactive preview beside the relevant control teaches faster than a global tour. Entry 'Vault or Market?' offers the three actions; selecting an action shows at most THREE plain-language steps with small visual changes. Demonstrate Vault 'Choose asset' -> 'Choose strike' -> 'Review deposit', with token/USDC mix illustration and one short note 'Holdings change as prices move.' Offer a clear exit into Vault. Show Buyer 'Choose option' -> 'Review price' -> 'Buy' and Seller 'Use vault shares' -> 'Set IV' -> 'List offer' as alternative paths, NOT mandatory subsequent steps. No numerical payoff simulation or made-up live data. Show one active path; others are small selectable choices, no wall of nine panels. Use concise captions plus visuals, a Back control and Skip, never automatic movement or forced wallet connection. ONE desktop and phone concept.
```


## Review and next step

### Focused revision of A — full prompt

Built-in imagegen edit from concept A. Saved as `img/designs/2026-09-14/concept-a-refined.png`.

```text
Use case: precise-object-edit. Refine the supplied Gyro onboarding concept as a senior onboarding UX designer. Keep the navy/teal identity, exact Gyro logo and TWO destination groups Vault and Market with THREE action cards. Preserve desktop plus phone board composition. Change only onboarding copy, information density and tiny meaning-bearing visual aids. Output one high-fidelity concept board, desktop and readable phone, no working app.
The original has too many words and loses essential facts on phone. Use the same concise content in both views:
Headline: 'What would you like to do?'
Vault card title 'Deposit assets'. Supporting line 'Receive vault shares.' Visual: token/USDC assets -> a distinct vault-shares receipt. Caption 'Holdings change as prices move.' A small secondary line 'Your result depends on price changes and fees.' Button 'Explore Vault'.
Market Buyer card title 'Buy options'. Supporting line 'Choose an option. Review the total price.' Always-visible cue 'No vault deposit needed'. Visual: a small option ticket with Strike, Expiry, Price fields and a review magnifier; NO numeric quote or price chart. Button 'Explore buying'.
Market Seller card title 'List vault shares'. Supporting line 'Set your IV. Wait for a buyer to fill.' Always-visible cue 'Requires vault shares'. Visual: vault-shares receipt -> an offer waiting for a buyer. It must not imply a guaranteed fill or that seller receives a bought option. Button 'Explore listing'.
Keep a small optional 'See an example' link beneath the action area and a simple 'Skip' control, no duplicate learn-more panel.
Remove the phrases 'Trade options on vault shares', 'Each action is independent', all long paragraphs and all decorative coin piles. Market group can have only the heading 'Market', no ambiguous explanation. Keep the seller requirement visible on phone, not clipped/overlaid onto the title. Phone also MUST retain buyer no-deposit cue and holdings-change caption. Keep controls44pxminimum and primaryactions54px; do not shrink labels to fit. Small illustrated input/output diagrams should carry meaning, not add another wall of words. Use abstract Token/USDC labels rather than imply ETH vault support. No APY, performance claim, full explainer, wallet connection prompt or new financial numbers. No extra arrows between Vault and Buyer that imply a required sequence. This is a concept for review, not a live onboarding flow.
```

Fresh visual review found A's footer incorrectly says every action is independent;
its mobile layout drops the buyer's no-deposit cue and holdings-change explanation.
C also lacks explicit buyer/seller prerequisites. The focused revision requests
these cues on both devices and removes the ambiguous footer and Market subtitle.
Use the assets as illustrations, not evidence of configured vault availability.
The beginner's explanation must show that return depends on price changes and
fees, without treating fee collection as a promise of profit.

Revision result: both device views now retain buyer and seller prerequisites,
holdings-change and price/fee context. The misleading footer and subtitle are
gone. The generator retained an ETH icon despite the abstract-token request;
use configured artwork when implementing. Its amber seller prerequisite should
be neutral rather than imply a warning. These are implementation notes, not a
reason for an endless image-edit cycle. The refined board remains a concept,
with no working buttons or live data.

Fresh Astra visually checked the refined image: no blocking concept-level
semantic issue remains on desktop or phone. The gallery's four images and full
prompt document return HTTP 200; the existing three-site design regression
test still passes. Live app, engine and configuration files have no changes.

Recommendation: A's intent-first entry, with C's optional small visual walkthrough
after a choice. Do not build the full generated onboarding page or add a forced tour.
The job is routing and understanding, not explaining all financial mechanics at once.

- A: grouping Vault separately from Market's buyer/seller paths is useful. Its
  illustrations show starting objects and outcomes. Cut the long desktop body
  copy and redundant CTA labels. Do not carry over 'Trade options on vault shares':
  vault shares supply the seller side; this label can confuse the underlying exposure.
  Keep 'Requires vault shares' visible on Seller and 'No vault deposit needed' on Buyer.
- B: **rejected as drawn**. The reverse 'Sold shares become liquidity' arrow is
  unsupported, and the deposit-to-list pathway looks mandatory for everyone.
  A visual can make an incorrect model more convincing. Do not copy this diagram.
- C: useful optional progressive example. Assets/USDC and vault shares must stay
  distinct. Keep it to one selected path; no default long tour or made-up quote.
  Use actual app terminology when integrating, not a replica transaction form.

First live candidate, after review: one dismissible/reopenable 'Vault or Market?'
entry; three clear actions grouped under the existing two destinations; a compact
optional visual showing what goes in, what the user chooses, and what they receive.
No wallet needed to understand the choices. Preserve the normal path for returning users.

## Comprehension test (not yet performed with users)

Show the concept without explanation and ask three scenario questions:

1. You hold tokens and want to put them in the vault. Where do you start and
   what do you receive? Expected: Vault; vault shares. Their value is not guaranteed.
2. You want to buy an option and have no vault shares. Where do you start?
   Expected: Market → Buyer; no vault deposit required; review the total price.
3. You already have vault shares and want to make an offer. Where do you start,
   and does listing mean somebody has bought it? Expected: Market → Seller;
   somebody must fill the offer first.

Record wrong destinations, hesitation, needed explanations and confusion between
shares and options. Do not count attractive images, screenshots or agent votes
as evidence of comprehension. Keep the current app as the comparison baseline.

Fresh Astra reviewed role semantics and existing explainer material. Reuse the
asset-mix idea only as optional deeper explanation. The existing explainers are
not current-generation evidence for exact exit, payout or fee-reinvestment claims.

This study changes only design galleries and their assets/notes. The live apps,
landing pages, explainers, beta, wallet flows and engine code are unchanged.