# Easel walkthrough captions — Home, Direction A Guided-presentation beats for `home-A-v1.html` (the **Base** option in Version A), written for the client's first look. Nine steps. Format matches `WalkthroughStep` in `/srv/apps/easel/main/app/models.py` and the seeded League walkthrough in `seed_league.py`. **Audience:** Alicia Wimmer and Michelle Bomberger, neither of whom has seen the design before. **Voice, copied from the League walkthrough:** second person, plain sentences, say *why* rather than *what*, and name their own instruction back to them wherever the design is following it. A caption that says "we did this because you asked for it" gets a very different response from one that describes a layout. **Three steps deliberately ask a question rather than present a decision** (3, 5, 8). Those are the open items that need the client's answer, and a walkthrough beat is a much better way to get one than an email. --- ## The steps | # | Title | Target | Approval | |---|---|---|---| | 1 | Start here | `.hdrrow` | no | | 2 | The offer, in the first screen | `.heroflex` | no | | 3 | Proof before we ask for anything | `.proofband` | no | | 4 | No team photos, as you asked | `.s4intro` | no | | 5 | Where you practise, with no licensing claim | `.mapband` | no | | 6 | Three steps, and the first one is the door | `.rail` | no | | 7 | What it looks like when it is working | `.cfpanel` | no | | 8 | The assessment still needs one name | `.hctop` | no | | 9 | Two ways to start | `.finalcta` | **yes** | --- ## 1. Start here — `.hdrrow` > Welcome, and thank you for the time. Use **Next** to walk through what each part of this page is > doing and why. Two things to know before you start. The words are AISV's copy, so today we are > looking at structure, imagery and hierarchy rather than wording. And you can leave a comment > anywhere: switch to comment mode and click the thing you want to talk about. ## 2. The offer, in the first screen — `.heroflex` > Your headline, the promise underneath it, and both ways to get in touch, all above the fold. The two > buttons are deliberately at different weights. **Book a Consultation** is for someone ready now. > **Take the Business Legal Health Assessment** is the softer first move for someone who is not, which > is most of your traffic and is the front door AISV's plan is built around. ## 3. Proof before we ask for anything — `.proofband` > Right under the headline, before the page asks the visitor for anything: clients you already serve, > your WBENC certification, and how long you have been doing this. All of it is already on your site; > none of it is a claim we invented. **One thing to confirm here.** We have used 21 years, counting > from 2005, because that is how your own anniversary campaign counts. Your About page says the firm > began in 2004 under its earlier name. Tell us which you would rather the site use. ## 4. No team photos, as you asked — `.s4intro` > You asked us to take the team photographs off the home page and to avoid stock photos of people, so > there are none anywhere on this page. That left a real problem: this section is about not being on > your own, which is usually solved with a picture of people. The photograph is a column base plate > with **one anchor bolt missing**. Everything is standing, everything looks finished, and one part > that nobody is looking at is not there. That is the argument the whole section is making. ## 5. Where you practise, with no licensing claim — `.mapband` > Washington first, then Oregon, then Colorado, exactly as you set out. Note the label: this is > presented as your **service area**, not as a statement about where anyone is licensed. Your current > site carries a line naming Washington, Idaho and Oregon, which does not match, so we have deliberately > written no "licensed in" wording anywhere until you tell us what it should say. ## 6. Three steps, and the first one is the door — `.rail` > Assess, Prioritize, Protect and Grow, as a sequence rather than three boxes. The assessment button > sits **inside step one**, because steps two and three cannot happen until someone takes it. Booking a > consultation sits inside step two, because step two is meeting you. Step three carries no button at > all: it is what you do for them, not what they do next. ## 7. What it looks like when it is working — `.cfpanel` > The payoff of the page, and the one place it speaks directly to the reader. It uses the same warm > panel and corner badge as the questions near the top, which is a small consistency worth knowing > about: on this design, **a cream panel with a badge always means we are talking to you**, and it is > used only twice. ## 8. The assessment still needs one name — `.hctop` > The eight areas the assessment covers, shown as a coverage ring rather than a score, because a > business is not one number. **A question for you and AISV.** The assessment is called three different > things across your current material. We have used "the Business Legal Health Assessment" everywhere > here, but the name needs to be settled before launch, because it has to be identical in the > navigation, the buttons, the page title and the web address. ## 9. Two ways to start — `.finalcta` · **requires approval** > The page closes the way it opens, with the same two choices at the same two levels. That is the whole > walkthrough. **Approving this step tells us you have seen it**, and does not mean you approve the > design. Please leave your comments anywhere on the page, on anything at all, including things you > only half like. This is the round the feedback is for. --- ## Seed form Matches the tuple shape used in `seed_league.py`: `(title, body, target_selector, requires_approval)`. ```python WALKTHROUGH = [ ("Start here", ( "Welcome, and thank you for the time. Use Next to walk through what each part of this " "page is doing and why. Two things to know before you start. The words are AISV's copy, " "so today we are looking at structure, imagery and hierarchy rather than wording. And you " "can leave a comment anywhere: switch to comment mode and click the thing you want to " "talk about."), ".hdrrow", False), ("The offer, in the first screen", ( "Your headline, the promise underneath it, and both ways to get in touch, all above the " "fold. The two buttons are deliberately at different weights. Book a Consultation is for " "someone ready now. Take the Business Legal Health Assessment is the softer first move for " "someone who is not, which is most of your traffic and is the front door AISV's plan is " "built around."), ".heroflex", False), ("Proof before we ask for anything", ( "Right under the headline, before the page asks the visitor for anything: clients you " "already serve, your WBENC certification, and how long you have been doing this. All of it " "is already on your site; none of it is a claim we invented. One thing to confirm here. We " "have used 21 years, counting from 2005, because that is how your own anniversary campaign " "counts. Your About page says the firm began in 2004 under its earlier name. Tell us which " "you would rather the site use."), ".proofband", False), ("No team photos, as you asked", ( "You asked us to take the team photographs off the home page and to avoid stock photos of " "people, so there are none anywhere on this page. That left a real problem: this section is " "about not being on your own, which is usually solved with a picture of people. The " "photograph is a column base plate with one anchor bolt missing. Everything is standing, " "everything looks finished, and one part that nobody is looking at is not there. That is " "the argument the whole section is making."), ".s4intro", False), ("Where you practise, with no licensing claim", ( "Washington first, then Oregon, then Colorado, exactly as you set out. Note the label: this " "is presented as your service area, not as a statement about where anyone is licensed. Your " "current site carries a line naming Washington, Idaho and Oregon, which does not match, so " "we have deliberately written no \"licensed in\" wording anywhere until you tell us what it " "should say."), ".mapband", False), ("Three steps, and the first one is the door", ( "Assess, Prioritize, Protect and Grow, as a sequence rather than three boxes. The " "assessment button sits inside step one, because steps two and three cannot happen until " "someone takes it. Booking a consultation sits inside step two, because step two is meeting " "you. Step three carries no button at all: it is what you do for them, not what they do " "next."), ".rail", False), ("What it looks like when it is working", ( "The payoff of the page, and the one place it speaks directly to the reader. It uses the " "same warm panel and corner badge as the questions near the top, which is a small " "consistency worth knowing about: on this design, a cream panel with a badge always means " "we are talking to you, and it is used only twice."), ".cfpanel", False), ("The assessment still needs one name", ( "The eight areas the assessment covers, shown as a coverage ring rather than a score, " "because a business is not one number. A question for you and AISV. The assessment is " "called three different things across your current material. We have used \"the Business " "Legal Health Assessment\" everywhere here, but the name needs to be settled before launch, " "because it has to be identical in the navigation, the buttons, the page title and the web " "address."), ".hctop", False), ("Two ways to start", ( "The page closes the way it opens, with the same two choices at the same two levels. That " "is the whole walkthrough. Approving this step tells us you have seen it, and does not mean " "you approve the design. Please leave your comments anywhere on the page, on anything at " "all, including things you only half like. This is the round the feedback is for."), ".finalcta", True), ] ``` --- ## Notes for whoever seeds this **All nine selectors are verified single-use** in `home-A-v1.html`. Checked, not assumed: `.hdrrow`, `.heroflex`, `.proofband`, `.s4intro`, `.mapband`, `.rail`, `.cfpanel`, `.hctop` and `.finalcta` each match exactly one element. `.qpanel` was avoided deliberately because it matches three. **No demo click on any step.** The obvious candidate was opening a mega menu to show the navigation, but two of its image slots are still unfilled placeholders, so a demo click would put a placeholder in front of the client as the first thing they see. Add it once those are filled. **Two things this walkthrough does not mention, on purpose.** The revenue threshold in *Who It Is For* is a labelled placeholder awaiting AISV's number, and the two mega-menu placeholders are still empty. Both are visible on the page. Decide before the session whether to fill them or to name them in step 1, because a client who finds a placeholder you did not mention stops trusting the rest. **If this is presented live rather than sent**, steps 3, 5 and 8 are the three to stop on. They are the questions only the client can answer, and the answers unblock the naming, the licensing line and the schema entity all at once.