SortMe Prototype — prd-110-advisor-client-portal

Screens in this prototype

Every screen and state, on desktop and mobile, at a glance. Click any frame — or Enter the prototype — to open it live.

Enter prototype

Invite email

primary

Reach: what lands in the client's inbox

Practice-branded. Replaces ClientInvitationMail's link to /register — the magic link replaces registration.

Desktop
Mobile

Signing in

state

Reach: tapping the link in the email

Passwordless. No password is ever set.

Desktop
Mobile

Sign in (returning)

primary

Reach: returning visit once a password exists

Password sign-in. The magic link is first-session entry only and expires after 7 days.

Desktop
Mobile

Link expired

state

Reach: an expired or already-used link

Must not reveal whether the address is known.

Desktop
Mobile

Fact find — My Financial Roadmap, notice + consent

primary

Reach: tapping the link in the invite email

My Financial Roadmap: the five stage cards feed animated connectors into demo cash-on-hand and net worth forecasts, so the client sees the value before the work. Collection notice + sharing consent below.

Desktop
Mobile

Step 1 — Purpose & Goals

primary

Reach: fact find step 1

All 10 real options. Selecting one expands it in place with its explainer bullets from PurposeContent.ts; Save for a house adds the property radios and Deposit Amount.

Desktop
Mobile

Step 2 — People & Income

primary

Reach: fact find step 2

The household cards. Reached after the client has saved their own details; Add Person / Add Dependants extend the household from here.

Desktop
Mobile

Set a password

primary

Reach: after People & Income, before connecting accounts

Required in the first session before any bank data is attached. Supersedes the original FR3 (no password ever).

Desktop
Mobile

Add Dependant

secondary

Reach: People & Income → Add Dependants

DependantForm — Name and Year Of Birth only.

Desktop
Mobile

Add Person

secondary

Reach: Purpose & Goals → Next (first run, as My Details); later via Edit on a person card

PersonalDetailsSection (Legal Name: First/Middle/Last) + AdditionalDetailsSection (DOB, Visa/Citizenship).

Desktop
Mobile

Avatar picker modal

state

Reach: Edit link under the avatar (Add Person / Your details)

The avatar picker in a modal: 15 illustrated defaults + photo upload. One modal serves Add Person and Your details.

Desktop
Mobile

Step 3 — Assets & Liabilities

primary

Reach: fact find step 3

The real 9-section list: Bank Accounts, KiwiSaver, Mortgage, Investment, IRD/Student Loan, Credit Card, Other Loans, Non-connectable, Property. Connecting populates it.

Desktop
Mobile

Add Property

secondary

Reach: Assets & Liabilities → Add Property

AddProperty — address, mortgage yes/no, property use, estimated value, mortgage account, ownership split. Renders inline in prod.

Desktop
Mobile

Add Non-connectable Account

secondary

Reach: Assets & Liabilities → Add Non-connectable Account

ConnectAccountForm — grouped Assets/Liabilities types, name, lender, balance, loan limit.

Desktop
Mobile

Connect modal

secondary

Reach: any Connect Account badge

The in-app connect modal (CsvOnBoading.tsx): Connect Accounts / Upload CSV tabs, video right, questions 2x2.

Desktop
Mobile

Connection failed

state

Reach: a timed-out connect attempt

Nothing saved, with recovery.

Desktop
Mobile

Step 4 — Spend Overview

primary

Reach: fact find step 4

Matches the live page: category groups with Budget/Actual columns, then Review and Amend Transactions with real prod row shape.

Desktop
Mobile

Step 5 — Insurances

primary

Reach: fact find step 5

NEW stage. Insurance is not in the live fact-find; policies are typed on the Protection page. Seeded with the insurance payments already detected in transactions.

Desktop
Mobile

Add a Policy

primary

Reach: Insurances → Add a policy / Edit

Transcribed from PolicyFormModal.tsx. Only type and provider are required; conditional fields follow the real rules.

Desktop
Mobile

Fact find finished

state

Reach: Finish on Insurances → the portal, first arrival

Replaces the separate You're-Done screen: a congratulations banner over the portal home plus the app's confetti (CustomConfetti config - five brand colours, 300 ribbon pieces, one burst).

Desktop
Mobile

Portal home

primary

Reach: every visit after the fact find

The app's two-column layout. Main column leads with the client's payoff: the cash-on-hand and net worth forecasts (single median line pre-advice), then the outstanding items. Rail: your information, the SortMe upgrade, the activity timeline.

Desktop
Mobile

Portal home — advice in force

state

Reach: after accepting the statement of advice

Same dashboard after the SOA is accepted: the deep-blue with-advice line joins the median path on both forecasts, and the advice task leaves the list.

Desktop
Mobile

Your information

primary

Reach: portal home → Your information

Disclosure manifest: the 10 categories the practice receives.

Desktop
Mobile

Your details

primary

Reach: account cluster in the top bar

Account profile: name, date of birth, residency, avatar, and sign-in details. Not the fact-find Add Person form.

Desktop
Mobile

Documents

primary

Reach: portal home → a document request

Outstanding / accepted / rejected, plus the health-document pass-through.

Desktop
Mobile

Advice — read & accept

primary

Reach: portal home → Your advice is ready

Tick box + accept. No DocuSign.

Desktop
Mobile

Step-up verification

state

Reach: accepting with a stale session

Not recorded until confirmed.

Desktop
Mobile

Accepted

state

Reach: after confirming

Read-only, with what happens next.

Desktop
Mobile

Loading

state

Reach: while the engagement loads

Manifest region 'loading'.

Desktop
Mobile