# Easel walkthrough captions · Home, Direction B Guided-presentation beats for `home-B-v1.html` (the **Base** look of the *Essential* option), written for the client's first look. Ten 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 and from the Direction A captions:** second person, plain sentences, say *why* rather than *what*, and name their own instruction back to them wherever the design is following it. **Written to be read in either order.** The client may open this direction first or second, so no beat says "as you saw on the other version". The three open questions are attached to the place each one actually arises, and B raises fewer of them than A does: B has no map and no credentials line, so the service-area question moves to the proof band and the founding-year question does not come up at all. **Two steps deliberately ask a question rather than present a decision** (3, 8). Those are the open items only the client can settle. --- ## The steps | # | Title | Target | Approval | |---|---|---|---| | 1 | Start here | `.hdrrow` | no | | 2 | The first screen, carried by type | `.herocentre` | no | | 3 | Proof, and the three states | `.proofband` | no | | 4 | The one section that leaves the container | `.split2` | no | | 5 | The missing bolt | `.guide4` | no | | 6 | Three steps, and one place to act | `.s6n` | no | | 7 | Told apart without colour | `.colhead` | no | | 8 | The assessment still needs one name | `.areagrid` | no | | 9 | Two looks, one page | `.hdrrow` | no | | 10 | Two ways to start | `.s12g` | **yes** | --- ## 1. Start here · `.hdrrow` > Welcome, and thank you for the time. This is one of two directions for the home page. The words are > the same in both, so today we are looking at structure, imagery and hierarchy rather than wording. > Use **Next** to move through it, and you can leave a comment anywhere: switch to comment mode and > click the thing you want to talk about. One more control worth knowing about: this page has > **two looks**, and the switch at the top of the frame moves between them. We come back to that > at the end. ## 2. The first screen, carried by type · `.herocentre` > You asked for no team photographs and no stock photographs of people, so this version does not go > looking for a substitute picture. The first screen is your headline on your own brand gradient, > centred, with nothing competing with it. Both ways in are here at different weights. **Book a > Consultation** is for someone ready now, and the assessment is the softer first move for someone who > is not, which is most of your traffic. ## 3. Proof, and the three states · `.proofband` > Eight client marks, in grey so they read as evidence rather than decoration, placed before the page > asks the visitor for anything. **One thing to confirm here.** The label names Washington, Oregon and > Colorado as where your clients are, not as where anyone is licensed. Your current site names > 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. ## 4. The one section that leaves the container · `.split2` > Everywhere else the page holds its content inside one measure. Here the content runs the full width > of the screen, and it is the only place that happens, because this is the section where the problem > is named. Your argument and its button sit on tint to the left, the seven questions a reader is > already asking themselves sit on white to the right, and the two meet on the centre line. ## 5. The missing bolt · `.guide4` > The photograph is the edge of this section rather than a picture placed inside it, which is why it > runs the full height with no strip above or below. It is a column base plate with **one anchor bolt > missing**. Everything is standing, everything looks finished, and the one part nobody is looking at > is not there. That is the argument this section is making, and it is how the page talks about not > being on your own without a photograph of people. ## 6. Three steps, and one place to act · `.s6n` > Assess, Prioritize, Protect and Grow, as a numbered list rather than three cards. The numerals carry > the order, so nothing needs a box or an icon to be read as a sequence. Both buttons sit once, > alongside the heading, instead of repeating inside each step: on a dark band, two choices in one > place read as a single clear invitation rather than three separate asks. ## 7. Told apart without colour · `.colhead` > The comparison runs as seven pairs on seven rows. Your side is marked with the Equinox lockup, the > other side with a dashed ring, and every row also carries a minus or a plus. That is deliberate. The > two columns are never told apart by colour alone, so the comparison still works for a reader with > colour blindness, on a printed copy, and on a screen in bright sunlight. ## 8. The assessment still needs one name · `.areagrid` > The eight areas the assessment covers, as tiles with the icon breaking out of the bottom edge. The > icons are stand-ins; the final set comes from the icon library the site will be built with, at no > extra cost. **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" here, but the name has to > be settled before launch, because it must be identical in the navigation, the buttons, the page > title and the web address. ## 9. Two looks, one page · `.hdrrow` > Use the switch at the top of the frame to compare them. **Base** is the page as you have just seen > it. **Brand** adds four of your brand circles, sitting behind the content at the edges of four > sections and cropped by the screen, so they read as a background pattern rather than as decoration > added on top. Nothing else changes: same layout, same words, same images. > > **This one is a straight preference and we do not have a strong view.** The circles tie the page to > your brand system; without them the page is quieter. Tell us which you prefer, or tell us you want > them somewhere else. ## 10. Two ways to start · `.s12g` · **requires approval** > The page closes on the same two choices it opened with, the words on the dark half and a picture on > the other. 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 the parts 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)`. No step uses the demo click, so `click_selector` and `click_delay_seconds` are left unset. ```python WALKTHROUGH_B = [ ("Start here", ( "Welcome, and thank you for the time. This is one of two directions for the home page. The " "words are the same in both, so today we are looking at structure, imagery and hierarchy " "rather than wording. Use Next to move through it, and you can leave a comment anywhere: " "switch to comment mode and click the thing you want to talk about."), ".hdrrow", False), ("The first screen, carried by type", ( "You asked for no team photographs and no stock photographs of people, so this version does " "not go looking for a substitute picture. The first screen is your headline on your own brand " "gradient, centred, with nothing competing with it. Both ways in are here at different " "weights. Book a Consultation is for someone ready now, and the assessment is the softer " "first move for someone who is not, which is most of your traffic."), ".herocentre", False), ("Proof, and the three states", ( "Eight client marks, in grey so they read as evidence rather than decoration, placed before " "the page asks the visitor for anything. One thing to confirm here. The label names " "Washington, Oregon and Colorado as where your clients are, not as where anyone is licensed. " "Your current site names 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."), ".proofband", False), ("The one section that leaves the container", ( "Everywhere else the page holds its content inside one measure. Here the content runs the " "full width of the screen, and it is the only place that happens, because this is the section " "where the problem is named. Your argument and its button sit on tint to the left, the seven " "questions a reader is already asking themselves sit on white to the right, and the two meet " "on the centre line."), ".split2", False), ("The missing bolt", ( "The photograph is the edge of this section rather than a picture placed inside it, which is " "why it runs the full height with no strip above or below. It is a column base plate with one " "anchor bolt missing. Everything is standing, everything looks finished, and the one part " "nobody is looking at is not there. That is the argument this section is making, and it is " "how the page talks about not being on your own without a photograph of people."), ".guide4", False), ("Three steps, and one place to act", ( "Assess, Prioritize, Protect and Grow, as a numbered list rather than three cards. The " "numerals carry the order, so nothing needs a box or an icon to be read as a sequence. Both " "buttons sit once, alongside the heading, instead of repeating inside each step: on a dark " "band, two choices in one place read as a single clear invitation rather than three separate " "asks."), ".s6n", False), ("Told apart without colour", ( "The comparison runs as seven pairs on seven rows. Your side is marked with the Equinox " "lockup, the other side with a dashed ring, and every row also carries a minus or a plus. " "That is deliberate. The two columns are never told apart by colour alone, so the comparison " "still works for a reader with colour blindness, on a printed copy, and on a screen in bright " "sunlight."), ".colhead", False), ("The assessment still needs one name", ( "The eight areas the assessment covers, as tiles with the icon breaking out of the bottom " "edge. The icons are stand-ins; the final set comes from the icon library the site will be " "built with, at no extra cost. 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\" here, but the name has to be settled before launch, because it must be " "identical in the navigation, the buttons, the page title and the web address."), ".areagrid", False), ("Two looks, one page", ( "Use the switch at the top of the frame to compare them. Base is the page as you have " "just seen it. Brand adds four of your brand circles, sitting behind the content at the " "edges of four sections and cropped by the screen, so they read as a background pattern " "rather than as decoration added on top. Nothing else changes: same layout, same words, " "same images. This one is a straight preference and we do not have a strong view. The " "circles tie the page to your brand system; without them the page is quieter. Tell us " "which you prefer, or tell us you want them somewhere else."), ".hdrrow", False), ("Two ways to start", ( "The page closes on the same two choices it opened with, the words on the dark half and a " "picture on the other. 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 the parts you only half like. This is the round the " "feedback is for."), ".s12g", True), ] ``` --- ## Notes for whoever seeds this **All nine selectors are verified single-use** in the uploaded bundle (`wp-content/mockups/easel-home-B/index.html`, which is the merged base plus circles file, not `home-B-v1.html` directly). Checked, not assumed: `.hdrrow`, `.herocentre`, `.proofband`, `.split2`, `.guide4`, `.s6n`, `.colhead`, `.areagrid` and `.s12g` each match exactly one element. `.nrow` was avoided because it matches seven and `.icell` because it matches four. **Step 9 points at an image that is not settled.** The final band's photograph is a stock shot containing a person's hand and torso, and the file itself carries the note that this is unresolved against the client's instruction. Step 2 opens by telling them the page avoids stock photographs of people. Ending the walkthrough on that band, unchanged, contradicts the beat that opened it. Replace the image before the session, or retarget step 9 at the copy half. **No demo click on any step.** The obvious candidate was opening the mega menu to show the navigation, but both of its image slots are still `Image placeholder · 16:9`, so a demo click would put a placeholder in front of the client. Add one once they are filled. **One placeholder is visible on the page:** the revenue threshold in *Who It Is For*, labelled `[revenue threshold: AISV to confirm]`. It is not covered by any step. Decide before the session whether to fill it or to name it in step 1, because a client who finds a placeholder you did not mention stops trusting the rest. **B carries less proof than A.** A's proof band shows client logos, the WBENC certification and the years in business; B's shows the logos only. That is a content difference between the two directions, not a treatment difference, and a client comparing them may read B as the thinner case. Worth settling whether it is deliberate before they see both. **If this is presented live rather than sent,** steps 3 and 8 are the two to stop on. They are the questions only the client can answer.