Onboarding: interaction spec

Approved concept: Concept 3 — Guided, as refined on 2026-10-02. It is written so a developer can build it without the prototype open. Where the prototype fakes something, production behavior is stated under "Prototype versus production", and what is still undecided is listed under "Open questions". Concepts 1 and 2 were not chosen and are archived on the scratch branch.

1. What it is

Onboarding is a person’s first session with ExecHQ. A new person arrives not knowing what ExecHQ is. They leave with an account, a plan they chose, and a first draft of the story of what they lead, all saved, and a short list of what to do next.

It does four jobs, in this order:

1. Say what ExecHQ is, plainly, before asking for anything.
2. Learn where the person wants to go, and what is in their way.
3. Give them a plan, chosen once, then made theirs by a few more questions.
4. Give them something usable today: a first draft of their story, with a clear choice of what to do with it next.

The whole flow speaks in ExecHQ's voice, in the third person ("ExecHQ will…"). It explains as it goes: what each thing is, and why it is being asked, until the person has answered, after which the explanation steps aside.

What it deliberately does not do:

• Connect to anything. In V1 there is nothing to connect: the only outside data is a LinkedIn analytics spreadsheet the person exports and uploads themselves.
• Score, rank or compare. No answer, fact or plan ranks the person against anyone.
• Post or share anything. Nothing leaves the person's account.
• Ask for more than it needs. An email (typed and confirmed, or from Google or Apple), an invite code (or saying there is none), a direction, a choice of plan and an answer to each reflection are the only required steps. Every other question can be skipped, and the person can come back to it.
• Ask the person to type an answer. Every question is a choice. The only typing is the account email, its 6-digit confirmation code, an invite code, and refining the story (section 3.10).
• Show progress as a number. There are no step counters or percentages in the flow.

Where it appears

Onboarding uses the minimal chrome with no header: no navigation, no footer line. It is reached from the product's front door and from Login (Start here, and Start fresh on the "different account" screen; see the Login spec). It ends on Home (Homepage Concept 1), reached from the last page's button.

In the prototype the route is /onboarding/concept-3 and the flow opens on the phone frame.

2. The flow at a glance

The prototype's step bar names twelve steps. A few pages are reached only from another page and have no step of their own.

Welcome ─▶ What ExecHQ is ─▶ Account ──(typed email)──▶ Check your email ─┐
                                │ (Google or Apple)                         │
                                ▼                                           │
                             Signals ◀──────────────────────────────────────┘
                                │ ──(Add)──▶ LinkedIn upload ─┐
                                │◀────────────────────────────┘
                                           ▼
                                       Direction ─▶ Narrow it down ─┐
                                                                    ▼
                          What's in the way? (deciding question, if the direction has one)
                                                                    ▼
          Recommendation ──(See other plans)──▶ Other plans ──(Use this one)──┐
                │◀──────────────────────────────────────────────────────────────┘
                ▼   Use this plan
          Reflection ─▶ Question ─▶ Reflection ─▶ Question ─▶ Reflection ─▶ Question
                                                                    ▼
                                          Your plan: This week ─▶ Three stages
                                                                    ▼
                                    Your story (a question) ─▶ First draft
                                                                    │
                          ┌──────────── What next? ────────────────┤
                          ▼                    ▼                   ▼
                  Add more detail    Build longer versions   Save and come back later
                          └──────▶ back to the draft            │ (versions: Save it and finish)
                                                                ▼
                                                              Done ─▶ Home

The order is a decision, not an accident of the list (see section 10). Three points matter most:

• The plan is chosen at step 6, before the personalising questions, so the person knows what they are agreeing to. Steps 7 to 9 make it theirs. They do not reverse it.
• The question that can change the plan is asked before the recommendation, so the recommendation is made once.
• The first draft comes before any extra detail is asked, so the person has something in hand first, then chooses what to do with it.

3. The pages

3.1 Welcome

The cover. A large statement on the page surface.

• Small label: ExecHQ.
• Heading: Somewhere to work on what comes next.
• Line: "Your private career advisor that doesn't just show you the way — it works for you and with you to get you there."
• Closing line, in italic serif: "From "I'd like to be" to "I'm going to be.""
• Button: Get started.

The same wordmark and line open Login, so a returning person and a new one see one product.

On web the Welcome splits, as Login's does. A dark panel on the left (40% of the width) carries the ExecHQ wordmark and, in italic serif, "Somewhere to work on what comes next." The sheet on the right carries the heading From "I'd like to be" to "I'm going to be.", the line "Your private career advisor that doesn't just show you the way — it works for you and with you to get you there.", and Get started, centered across and down the sheet. Phone and tablet keep the cover above.

3.2 What ExecHQ is

• Label What ExecHQ is. Heading: Crafting a plan for your career and the work to carry it out.
• Line: "A private career advisor for modern professionals ready to grow, with no agenda but your own."
• Three numbered points, each a heading and a line: 1. A plan for where you want to go. Short-, medium-, and long-term steps with clear benchmarks. Not a list of forty tasks that get you nowhere. 2. Work done, not just advice. Most steps come with artifacts made for you to use: ExecHQ drafts them, you make them yours. 3. Something that grows with you. Finish a step, share what happened, or change direction, and ExecHQ updates the plan.
• Private by design. For your eyes only. Not your employer, not your manager, not anyone else. Everything ExecHQ makes is yours to keep, edit, and export.
• Button: Continue.

The privacy promise is said here, before anything personal is asked. There is no separate privacy page.

3.3 Account

• Label Your account. Heading: First, somewhere to keep all this. Line: "Your plan and your story are saved to your account, so you can come back to them."
• "Why this matters": "Everything you tell ExecHQ builds on what came before. Your account is how it remembers, and how you come back to it."
• The answer drawer opens with Continue with Google and Continue with Apple, the same buttons as Login's, then a divider reading "or", then What's your email? (one field, placeholder you@example.com). Under them, Do you have an invite code? with two equal choices, I have an invite code and I don't have a code. Choosing the first opens an Invite code field and puts the cursor in it. Button Continue.
• Google or Apple opens that provider's own account picker (a stand-in in the prototype, as on Login). Once an account is picked, the buttons, the divider and the field give way to one line: a small label With Google (or With Apple), the address, and Change. Change brings the buttons and an empty field back, with the cursor in the field. The invite-code question stays, and is still required.

Rules:

• Any address is accepted, work or personal, by decision on 2026-09-22: the account is the person's and they can change the address whenever they like. That holds for Google and Apple too: a work Google account and Apple's Hide my email relay address both make an account, with no warning. An empty field shows "We need an email address to create the account."
• The invite code is a required choice. The person must say which: enter a code, or choose I don't have a code. Continue stays off until they have, and until a code is typed if they chose to have one. A recognized code is kept. An unrecognized one shows the notice "We do not recognize that code. Check it against the invitation you were sent. If you don't have one, choose "I don't have a code". A code only changes who pays, never what you get." Coming back to the page, the choice made is kept, and so is the way in (Google, Apple or a typed email).
• Continue sends the answer in one press, with the keyboard up. Return on a real keyboard does the same.
• Where Continue goes. With Google or Apple, the address is already confirmed, so Continue goes straight to Signals. With a typed address it goes to Check your email (3.3a), unless that same address has already been confirmed in this session.

3.3a Check your email

Reached only from Account, for a typed address, by decision on 2026-10-08. It has no step of its own on the step bar. The code works the same way as Login's (see the Login spec).

• Label Your account. Heading: Check your email. Line: "ExecHQ has sent a 6-digit code to {email}. It works for 10 minutes."
• "Why this matters": "So the account is yours: only someone with your inbox can open it, and it's where your plan and your story come back to you."
• The answer drawer asks Type the code from the email. with six code cells (one real field, so pasting and the phone's code suggestion work). Under it, a row with Send it again (after a 30-second wait, shown as "Send it again in 29s") and Use a different address, which goes back to Account with the address in its field. Then "Nothing arrived? Check your junk folder." Button Continue, off until six digits are typed.
• The email arrives about 1.6 seconds after the page opens, as the phone's own notification over the top of the page: ExecHQ, Confirm your email, "Here's the code to finish setting up." Its arrival is announced politely. Tapping it opens the email in a sheet: subject Confirm your email, the line "Type this code in ExecHQ to confirm your email:", the code large, and "This code works for 10 minutes and only once. If you didn't ask for it, you can ignore this email." Inbox closes it.
• The subject and preview say nothing about the person's career, so nothing private shows on a lock screen, the same rule as Login's email.
• Send it again clears the cells, sends a new email (it arrives the same way) and announces "Sent again."
• Continue confirms the address and goes on to Signals.

Wrong and expired codes use Login's screens, by decision on 2026-10-08:

• A wrong code. Continue with six digits that are not the emailed code keeps the person on the page, shows Login's error under the cells ("That code doesn't match. Check the latest email and try again."), clears the cells and puts focus back in the first one. The cells are marked invalid and the error is announced. Typing again clears it. After five wrong tries the code stops working and the expired screen shows, as on Login.
• An expired code (10 minutes, or five wrong tries). The page becomes Login's expired screen, still labeled Your account, with no drawer: heading That code has expired, line "Codes work for 10 minutes and only once. ExecHQ can send a new one to {email}." (Login's line, in onboarding's voice.) Button Send a new code, which brings the code page back with empty cells, the 30-second wait restarted and the new email on its way, and announces "Sent again." Under it, Use a different address, back to Account. Focus moves to the heading each way. In the prototype the 10 minutes are reached from the drawn email's Open it again after 10 minutes, as on Login.

3.4 Signals

• Label Optional. Heading: Start from how you already show up. Line: "ExecHQ reads how far your posts reach, and who they reach, so your plan starts from where you already are."
• One row: the LinkedIn mark, LinkedIn, "Your posts and audience, from the past year." It is not a button.
• "You'll be able to add other signals later." and, with a lock: "Nothing is posted or shared. Delete the file anytime."
• Actions, as equal peers: Add LinkedIn numbers and Skip for now. Once a file is in, or the steps have been emailed, there is one button, Continue, and the row shows a status chip (Reading…, Ready, Read, Steps sent) that opens the upload page again.

The LinkedIn upload page

Reached from Signals. Label Optional · LinkedIn. Heading Bring in your LinkedIn numbers. Line: "Export a spreadsheet from LinkedIn and add it here. About a minute, on a computer."

• Three steps: 1. Open your LinkedIn analytics (a link that opens LinkedIn in a new tab). 2. At the top, choose Past 365 days. 3. Press Export, then Confirm. A spreadsheet downloads.
• A disclosure, I don't see Export: "Analytics show once you've posted at least once. If you haven't posted yet, leave this for now: your plan will help you start."
• Upload the spreadsheet (the page's main button, with the hint "The spreadsheet from step 3") opens a real file picker for .xlsx and .xls files.
• On your phone? Email me these steps sends the steps to the address given. The page then says "Sent to {email}. Do it on your computer when you're ready. It'll be on your plan too."
• Not now (a quiet secondary at the foot) goes back to Signals.

What the file does:

Reading happens in the background and never makes the person wait. Once a file is in, the page shows its name and status, Choose a different file, and Continue, which returns to Signals.

3.5 Direction

The first question that matters. The heading is Where do you want to go next? with "Pick as many as are true." The "Why this matters" note says: "Everything ExecHQ builds points here. Pick all that are true, and it will start with the one that matters most." The answers come up in the drawer.

Page one. Five options, as equal-width buttons, one to a row, and as many as are true can be picked (Appendix A):

• Reach the C-suite within three years
• Take on a bigger leadership role
• Be seen as an executive
• Nail an upcoming board presentation
• Find my next move

Below them: None of these? Show me more options (adds four: Lead a bigger organization; Carry more weight where I am; Get out of where I am; I do not know yet; the button then disappears). The drawer's peek bar says how many are picked. The button reads Narrow it down with one option picked and Which matters most? with more than one. There is no field to type in: every answer is a choice.

Page two, narrowing. Each option picked becomes a group of two more specific versions, to tap (Appendix A). One is chosen. With several picks the heading is Which matters most right now? and the line "ExecHQ will start there, and keep the rest in view." With one pick it is Which is closest? and "A little more detail gives ExecHQ a clearer first step."

What is kept:

• The chosen version becomes the person's direction, and is said back as they chose it. It stands for the option it came from: the plan, the goal and the questions all follow the option (section 5).
• The other picks are kept as "also picked" and said again on the Recommendation.

3.6 What's in the way (the deciding question)

For most directions, one question is asked before the recommendation, because its answer can change the plan. Label Before ExecHQ recommends anything. Its heading depends on the direction: What's in the way? (a bigger role), What's holding you back? (more weight where you are) or What's making you want a change? (finding a next move). The line is "Pick as many as are true."

• Five options, multiple choice, and None of these? Show me more options (four more). See Appendix B.
• Buttons: Next and Skip this one. The person can skip.
• Directions about a coming moment (a board presentation, a review) have no deciding question, and go straight to the Recommendation.

3.7 Recommendation: choose the plan

This is where the plan is chosen.

• Label ExecHQ's recommendation. The heading is the plan's name (for example Step up).
• A card: "This plan is for when you're ready for a bigger role and want the promotion or remit to match." Then the reason, built from what the person said: their direction, then what is in their way, then "That's what this plan is for." If an answer sent the plan somewhere else, that answer's own reason is used.
• If other directions were picked: "You also picked: {them}. ExecHQ will keep {it/them} in view as your plan grows."
• "A plan is how you get from where you are to where you want to be. Yours has two parts." with two numbered lines: This week: the one thing to do first. Three stages: what your plan builds toward, in order, each with a finish line. When they're done, ExecHQ plans the next stretch with you.
• "Next, a few quick questions to make it yours."
• Buttons: Use this plan and See other plans.

See other plans opens the five plans as cards to compare (Appendix C), with ExecHQ's recommendation marked. Choosing one and pressing Use this one chooses it and goes straight on to the next page. It does not return to the Recommendation. If the person chose a different plan, the Recommendation (if they come back to it) says "You chose this one instead. ExecHQ recommended {plan}."

3.8 Reflection and the questions that make it yours

After the plan is chosen, up to three more questions make it the person's own. Before each one, a reflection: a question to sit with, not needed for the plan.

Order, with up to three of each: Reflection (time) → Question → Reflection (CEO) → Question → Reflection (manager) → Question. A reflection is only ever asked before a question, so if a direction has fewer than three questions, the reflection that would have come before the missing question is left out too.

A reflection. Label A question to sit with. Heading and line are the question. "Why this matters" is shown until it is answered. Four options (three for the story question) as equal-width buttons. Answer sends it. After answering:

• The line and the "Why this matters" note go away.
• A quiet line shows You said with the answer and Change.
• ExecHQ's reply appears as a pull quote in serif, one or two sentences, one reply per option.
• A Worth knowing card gives a sourced fact (rules in 4.6).
• Continue stays pinned at the foot.

The reflections are:

The questions use the same pattern as Direction and the deciding question: equal-width options, five options and None of these? Show me more options. The list-type questions take several answers ("Pick as many as are true."). The scale-type questions, where each option is a point on a line, take one. Buttons: Next and Skip this one. The full list, by direction, is in Appendix B.

3.9 Your plan

The plan, tuned to what the person said. Two pages.

Page one: This week. Label Your plan. Heading This week. Line "Here's your plan, tuned to what you've said, one part at a time."

• Built from what you said: a short list of the person's answers, each with a Change link. The first row is their direction. The rest are the questions they answered. Change on a question goes to that question and returns here when it is answered. Change on the direction starts the questions again from Direction, with their picks kept; a new direction clears the plan they chose for the old one.
• A dark card with the one task to do first (for example "Write the story of what you lead"), a line of detail, Why now: a short reason, and the data behind it with its source (see 4.6).
• Button Next part.

Page two: Three stages. Heading Three stages, with "Each stage sets up the next, so the effort adds up." and "Stage by stage, toward {the goal}."

• Three stages, each with its name, what the person will have, and Done when: a checkable finish line. The first stage is marked First · This week, so the task on the first page is seen as the first step of stage one.
• A closing line: "Once these stages are done, ExecHQ will plan the next stretch with you, based on what worked and what didn't. It sharpens as you go: every draft you make and every conversation you log tells ExecHQ what to do next."
• Button Continue.

A plan has no end date and no length. A stage is never given a deadline.

3.10 Your story

The question. The reflection above: "Could you say what you lead in one sentence, right now?" with "Out loud, to someone who's never met you." It behaves as in 3.8. Its fact is Gallup's: only 46% of U.S. employees clearly know what is expected of them at work (2025).

The first draft. Here the person enters the Toolbox. The label reads Toolbox · Positioning Builder on this page, on Add more detail and on Longer versions (and on the "Writing your first draft" state), because the story is made in the Positioning Builder, one of the Toolbox's four workflows. The question before it is still onboarding and keeps its own label. Heading Here's your first draft. It is written at once from what the person has already said. The line is "A start, from what you've shared. Add your role and a result to say what you lead." until they add detail, after which it says "Written from what you've shared, with the detail you added."

• The draft, in the person's voice ("I'm building toward a C-suite role within the next three years. What I want next is…"), with Edit. An edited draft is kept as written until the detail changes and the draft is rewritten.
• Where you could use it: three uses, from the plan.
• Copy, Download, Email it to me.
• Said once, on the first time the draft is seen, a line under the draft: "This is the Toolbox, where ExecHQ makes your drafts. You'll find it any time from Ask or go." It is not shown again when the person returns to the draft.
• "Why this matters": "You can use this today. Add detail or build longer versions now, or come back to them from your plan."
• What next? at the foot, three equal choices, each a full-width outlined button with a line saying what it does: - Add more detail: "Your role, what you're responsible for and a result, so it says what you lead." - Build out longer versions: "Short, medium and long, for a bio, an introduction or LinkedIn." - Save it and come back later: "It's saved. Both of these wait for you as next steps on your plan."

None is the default, so leaving it for later is a real choice.

Add more detail. Label Toolbox · Positioning Builder. Heading Three things only you know. Line "Your role, what you're responsible for, and one result. Skip any you like." Each is asked in turn in the drawer ("1 of 3"): What's your current role? What are you responsible for? What's a result you're proud of? Each has Skip and Next; the last has Write my draft. A card shows what good looks like for the question being asked (for example "VP of Marketing, leading brand and demand."). Writing the draft shows "Writing your first draft", then the rewritten draft. A hand edit is replaced, because the draft is written again from the facts. It returns to wherever it was opened from.

Longer versions. Label Toolbox · Positioning Builder. Heading Longer versions. Line "The same story in three lengths, for different places: a line, a paragraph and the full bio."

• A switch for Short / Medium / Long shows the same story at each length. A fact ExecHQ doesn't know yet is a dashed gap ("To add: your name"), never something made up.
• When there are gaps: "The dashed parts are things ExecHQ doesn't know yet. Add them with the fields, or add more detail to your story." (worded to be true on every viewport, since the fields are below the bio on phone and tablet and beside it on web) and a set of fields, What's missing from your bio?: Your name, How big is your team? (five choices) and What you're strongest at (up to three of seven). Add more detail goes to the three questions above and returns here. - On web the bio fills in as the fields are answered. The fields sit right beside it, so there is no button: each answer is kept at once and the text changes as it is given. The card shows its question as a visible title, since the page's heading is far from it. - On phone and tablet the drawer covers the bio, so Update my bio applies what was typed, and "Bio updated." is announced to screen readers. - The fields stay for as long as the person is on the page, even once the last gap is filled, so they can change an answer.
• Copy, Download, Email it to me.
• Buttons: Save it and finish and Back to my draft.

3.11 Done

• Label You're set up. Heading Your plan and story are saved. Line: "You've done the hardest part: saying where you want to go."
• A numbered list, What to do next, in a card in the middle of the page, showing only what is left, in this order: 1. Add more detail, if the draft has no role or result yet. Its line begins "In your Toolbox." 2. Build longer versions, if they have not been opened. Its line begins "In your Toolbox." 3. The plan's next stage (its name and first outcome). 4. Bring in your LinkedIn numbers, if they have not come in.
• Button Go to my homepage.

The list shrinks as steps are done. It never repeats what the person has just seen, and it does not summarize their answers: the plan page already did.

4. Rules for every page

4.1 Page anatomy

Every page after the Welcome is one guide page, in this order: a small label; the heading; an optional line; the page's own content; the "Why this matters" note; the actions. Where a page asks a question, its answers come up in a drawer pinned under the page on phone and tablet, and in a card beside the question on web.

• Heading. One level-1 heading per page. When the page changes, focus moves to it.
• "Why this matters." A short note saying why the page exists. It is shown before a question is answered and removed after (on reflections), and is left off pages where there is nothing being asked.
• Actions sit at the foot. The primary is a filled button. A skip or alternative is a peer of the same size beside or beneath it, never a smaller link, so skipping reads as a real choice. Where a page's real action is in its body, the foot offers only a quiet way past it.
• Pinned. On phone and tablet the drawer's buttons stay pinned at its foot (on web, in the card, they sit just below the fields), and the Continue on an answered reflection stays in reach at the foot of the screen, so a long page never hides the way on.

4.2 The answer drawer

• On web the drawer is a card beside the question (section 6), always open, with no handle, peek bar or drawn keyboard. Everything else here describes phone and tablet.
• Open by default when a page arrives. It carries only the answer; the question and its reason stay on the page above, so the two are read together.
• Fold (phone and tablet). A handle folds the drawer to a peek bar carrying the question and a status ("Tap to answer", "3 picked", "Answered"); the bar brings it back. Both are real buttons, so nothing needs dragging (WCAG 2.2 SC 2.5.7).
• The keyboard (phone and tablet). While a text field in the drawer has focus, a drawn phone keyboard sits under it, with its return key labeled with the drawer's button. Pressing the return key, pressing Return on a real keyboard, or pressing the drawer's own button all send the answer, and none of them first closes the keyboard. If drawer and keyboard together are taller than the screen, the drawer scrolls and its buttons stay pinned at its foot.
• One press. Pressing a button in the drawer never takes focus from the field, so the press always lands.

4.3 The answer pattern

Used by Direction, the deciding question, the "Making it yours" questions and the reflections. The one place the person types is the account email and its code, and, if they have one, an invite code, and the details they add to refine their story (3.10):

1. Options are equal-width buttons, one to a row, never wrapping tags.
2. Choices only. There is no field to type an answer in. Where the person's situation is not listed, None of these? Show me more options adds more, and Skip this one is always there.
3. Five options and a way to more. Where the options are a list, five are shown and None of these? Show me more options adds four. It disappears once used.
4. Several or one. List-type questions take as many as are true. Scale-type questions take one. Where one answer is expected, choosing another replaces the first.
5. A way past. Questions have Skip this one. Only an email, a direction, and the reflections' answers are required.

4.4 Voice

• ExecHQ speaks in the third person. "ExecHQ will draft that sentence for you next." The product never says "I".
• The person's own words stay in the first person: the options they pick ("Find my next move"), their drafts, and the details they type to refine their story.
• "We" is not used for ExecHQ. ("Before we begin" and similar inclusive uses were removed.)
• No pressure and no scoring. Replies are warm and specific, never ranking.

4.5 Explanation steps aside

What a page explains is said once, and in one place: what a plan is, at the choice; what ExecHQ heard, on the plan page; why a question is asked, before it is answered. After an answer, the page does not repeat the explanation.

4.6 Facts and data

Every figure shown as data is real, sourced and shown with its source. It appears on the reflections ("Worth knowing") and under the plan's "Why now." A fact never ranks the person against others. Until a fact is found, the card shows a marked placeholder ("A sourced fact is needed here") in a dashed box that cannot be mistaken for copy. See Open questions for which are still placeholders.

4.7 Waiting

Where ExecHQ writes something, a short state names it. The draft shows "Writing your first draft", for 1.1 seconds in the prototype. The LinkedIn file reads in the background for 8 seconds and the person is never kept waiting for it.

4.8 Focus and announcements

• Each time the page changes, focus moves to the new page's heading. It does not move on first paint.
• The heading shows a visible focus ring when it takes focus from the keyboard.
• Confirmations (copied, emailed, sent) are announced politely.

5. How it decides

5.1 From direction to plan

Every direction has a need. The need picks the recommended plan.

• An option from the list has its own need (Appendix A). Rewording an option, or choosing a narrower version, never changes it.

5.2 Which questions are asked

The need also picks the questions (Appendix B). Each need has three, of which at most one is the deciding question.

A question is left out when the wording of the direction already answers it (for example a named moment such as a board, or a date).

5.3 The question that can change the plan

Three answers, if chosen, send the plan somewhere else. The reason shown is theirs.

If several answers are chosen, the first one chosen that changes the plan decides. The recommendation is made once, after this question. Nothing asked later can reverse it.

5.4 Several answers

A question can hold several chosen options. Each chosen option adds its own sentence to what ExecHQ says back ("Right now nobody sees your work. The results are there…"), in the order chosen, and its own line to the first draft ("The results are there. My focus now is making sure the people who decide can see them.").

5.5 Choosing and changing the plan

• The plan is chosen once, on the Recommendation. Choosing another plan from See other plans is the same act.
• The questions after personalize the plan the person chose. They never change which plan it is.
• Changing the direction clears the chosen plan, because the old choice was for a different goal. Changing a question answer keeps it.
• Jumping back is possible only through Change on the plan page. (The step bar is a prototype tool; see section 9.)

5.6 The plan's content

Each of the five plans has a name, a formal name, who it is for, one task for this week with the reason and data behind it, three stages with what the person will have and a finish line for each, and the places the first draft could be used (Appendix C). The plan page fills the Built from list, the task and the stages. The stages are the plan's own; only the goal they build toward is the person's.

5.7 The draft, the detail and the versions

• The first draft is written from the direction, the answers to the questions and, if given, a role, scope and result. With none, it says where the person is headed and what is in their way, in their voice. With them, it begins by saying what they lead.
• The three detail questions (role, scope, result) rewrite the draft. They are the only questions the draft depends on beyond the direction.
• The longer versions are the same story at three lengths, written from the same facts and a name, a team size and strengths. Anything missing is a marked gap.
• Saving is available at every point after the draft, and what is saved is whatever the person has so far. Nothing is lost by leaving the rest for later.

6. Specifications

Sizes and tokens

Use the design tokens in the real build, never the raw numbers. The pixel values are for checking against the design.

All colors, type, spacing, radii, borders and shadows are tokens. No color is hard-coded. The product is built in greyscale first, with color switched on from the dock.

Layout by viewport

Tablet is the phone layout. It does not get a layout of its own: the content simply stays at the reading width in the wider frame. Only web changes arrangement, because only web has the room to put the question and its answers side by side.

In the prototype, responsiveness follows the simulated device frame (data-viewport), never the browser window. Onboarding opens on the phone frame.

Touch targets

Every interactive control is meant to be at least 44 × 44px (--button-target) on every viewport, as in the Login and Profile specs. WCAG 2.2 AA requires only 24px (SC 2.5.8). 44px is the ExecHQ standard because the product is used one-handed.

The prototype does not yet meet this. Measured on the phone frame:

Production must give every control a tappable area of at least 44px, drawn smaller where the design calls for it, with no two areas overlapping. This is listed again under Open questions.

7. Accessibility (WCAG 2.2 AA)

• Headings. One level-1 heading per page, in a sensible order. The small label above it is not a heading.
• Labels. Every field and every group of options has a visible or accessible name.
• Keyboard. Everything works with a keyboard alone. Tab order follows reading order. Return sends a one-line answer. The drawn keyboard and its return key are decoration for sighted mouse users: hidden from assistive technology and out of the tab order.
• Focus is visible on every control, and moves to the heading when the page changes.
• Contrast. Text 4.5:1 and non-text 3:1 in greyscale and in color. The dark card and the dark option buttons meet it.
• Not by color alone. A chosen option is shown by fill and by its pressed state, not color. A placeholder fact is shown by a dashed border and its words.
• Dragging is never the only way. The drawer folds with a button.
• Pressed state. Option buttons are toggle buttons with a pressed state, so a screen reader hears what is chosen.
• Errors (an empty email, an unrecognised code, a wrong file) sit with their field and are announced.
• Motion. Waiting states and page changes respect prefers-reduced-motion.
• Change links carry the question they belong to ("Change: What's in the way?"), so a screen reader never hears four identical links.

8. Components

flows/onboarding/shared holds the answers and their rules, and mock/onboarding.ts holds every word and option, which is why the appendices here can be checked against it.

9. Prototype versus production

10. Decisions

These are settled. They are the specified behavior. The dates are when they were made.

1. Concept 3 is the onboarding. (2026-10-02)
2. ExecHQ speaks in the third person, and the person's own words stay in the first. (2026-10-02)
3. The plan is chosen at the Recommendation, with what a plan is said there, before the personalising questions. Choosing another plan goes straight on. (2026-10-02)
4. The question that can change the plan is asked before the recommendation, so it is made once. (2026-09-30)
5. The read-back page is gone. What ExecHQ heard is a list on the plan page, each row with a way to change it. A free-text edit that changed nothing downstream is removed. (2026-10-02)
6. The plan is two pages: this week, then three stages with a finish line each. No part counters. A plan has no end date. (2026-10-02, 2026-09-29)
7. One answer pattern across the flow: equal-width options, five options and a way to more, several answers for lists and one for scales. (2026-10-02)
8. Direction is two steps: pick, then narrow each pick to one of two more specific versions. (2026-10-02)
9. The first draft comes first, then a choice: add detail, build longer versions, or save and come back. The three detail questions are not put in front of the draft. (2026-10-02, reversing the order tried earlier that day)
10. Data is real or marked. A figure is shown with its source, or as a placeholder. (2026-10-02)
11. Nothing is connected in V1. LinkedIn is a spreadsheet the person uploads. (2026-09-28)
12. Any email is accepted, work or personal. (2026-09-22)
13. Privacy is said once, on "What ExecHQ is," before anything personal is asked. (2026-10-02)
14. The Done page lists only what is left, and does not repeat what the person has seen. (2026-10-02)
15. No step counters, percentages or scores appear anywhere in the flow.
16. No open responses. Every answer in onboarding is a choice. The only typing is the account email, an invite code, and refining the story (a role, what the person is responsible for, a result, a name for the bio, and editing the draft). (2026-10-02)
17. The invite code is a required choice: a code, or "I don't have a code." (2026-10-02)
18. The story build-out is the Toolbox, and the pages say so. The draft, add-detail and longer-versions pages are labeled "Toolbox · Positioning Builder," the Toolbox is explained once on the first draft, and Done says "In your Toolbox" on the story steps that are left. Onboarding does not use the Toolbox's own frame or navigation. (2026-10-02)
19. Tablet is the phone layout; only web changes. On web the answers sit in a card beside the question, with no bottom sheet and no drawn keyboard, and the Welcome splits as Login's does. (2026-10-02)
20. On web the longer versions fill in live, beside their fields, with no button. On phone and tablet a button applies the answers. (2026-10-02)
21. Google and Apple sign up on Account, the same buttons as Login's, and any account they give is accepted. A typed email is confirmed on a page of its own by a 6-digit code, the same as Login's; Google and Apple pass it, because they have confirmed the address already. A wrong or expired code uses Login's screens and rules: the error under the cells, which clear, and after five wrong tries or 10 minutes That code has expired with Send a new code. (2026-10-08)

11. Open questions

These are not decided. They need an answer before this is built.

1. Two plans have no sourced "Why now" data: Get ready for a big moment and Grow your influence where you are. The Step up figure (LinkedIn @Work study, 46%) needs its original date and sample confirmed.
2. Tap targets. Most controls are 30 to 40px. They need a 44px tappable area (section 6).
3. Linking an Apple relay address to the person's real one later is open, as on Login.
4. What the invite code does. The notice says a code "only changes who pays." What the code is, who issues it and how it is checked is not specified.
5. Leaving part-way. Whether a person who leaves can return to where they were, and what is kept, is not designed.
6. Reflections cannot be skipped. Every other question can. Whether that is intended is not decided.
7. How the draft and the longer versions are written for real is not specified. The prototype uses fixed templates with the person's words dropped in.
8. More plans and options. The flow has five plans and nine directions. Whether more are wanted, and who writes them, is a content decision.
9. Status. The concept is approved, but its status in the manifest stays draft until Kate says it has passed final review.

Appendices: the content

These tables are the content as built. The full wording of every page, reply and fact is in mock/onboarding.ts.

A. Directions

The first page shows the five first options. "None of these? Show me more options" adds the four held-back options. Each option has two narrower versions, shown on the second page. The need and the plan follow the option, never the narrower wording.

B. Questions

Deciding questions are asked before the recommendation and can change the plan (see 5.3). Making it yours questions are asked after it. "Single" means one answer; "multiple" means as many as are true. Each question shows its five options and, after "None of these? Show me more options", its four held-back options. A question marked skipped when is left out if the person's direction already answers it.

Need: positioning

Need: influence

Need: visibility

Need: preparation

Need: exploration

C. Plans