Working document
Design Decision Record
What this is: the running record of every design call on this module — what was decided, what it was decided against, and why. I kept it because the reasoning is the part that transfers; the screens are only where it landed.
Design decision record
Conscious Discipline at Home — a self-paced module for parents of kindergarten children. This document records the design calls made during the wireframe stage: what was decided, what it was decided against, and why.
WIREFLOW STAGE CLOSED SEPTEMBER 10, 2026 · DENSITY PASS SEPTEMBER 11 · VISUAL SYSTEM SETTLED SEPTEMBER 13 · 29 SCREENS · FLOW V3 · NAMING PASS SEPTEMBER 16 · NEXT: APPLY THE SYSTEM TO THE REMAINING 27 SCREENS
Decisions below are the designer's. Where an AI collaborator proposed an alternative, argued against a choice, or was overruled, that exchange is recorded in full — including the cases where the designer's first instinct was replaced and the cases where it stood.
1 The problem this module has to solve
Parents are asked to reinforce a school's behavioral framework at home without being taught it. The module has 35 minutes, no instructor, and an audience who will most likely open it tired, at night, after a hard day with the child in question. Every decision below is downstream of that last fact.
2 The central decision — how help is offered
Help was split by urgency, not by topic
Decided: phrase help sits inline, directly above the answer field, as a strip the parent can collapse. Everything reference-like — definitions, module info, privacy — sits behind a ? in the header.
Instead of: the original single "If You're Stuck" drawer with three tabs, which mixed a thing needed mid-crisis in one tap with things read once and never again.
Why: the two kinds of help have opposite urgency. Putting them behind one door means a parent mid-scenario walks past a glossary to reach the words they need. Four treatments were built and compared before this was chosen.
Considered and rejected — one merged "Help" panel
This was the designer's opening instinct: combine the two surfaces, rank the contents with an accordion rather than tabs. Built in full before being set aside. Ranking would have solved the clutter, but merging hot and cold help puts a cold panel in a hot path every time it opens.
Considered and rejected — a permanent help rail
The strongest pedagogical argument of the four: a parent who has to remember help exists, and go get it, mostly won't — especially the ones who need it. Permanent phrases would also have asserted that using the words is the skill, not a fallback. Rejected on cost: 268px of every scenario screen, permanently, and it would have required rewriting the scoring rubric to reward adaptation over recall.
A tap previews; a second action commits
Decided: tapping a phrase card shows that phrase inside the answer box as a provisional line. The submit button is disabled while a preview is showing. A second action — "Use it", or simply typing — commits it as editable text.
Why: the designer's requirement was that tapping shouldn't be a commitment — a fidgety tap should be allowed to mean "show me that," not "I choose that." This buys that freedom with the cheapest available gesture, and shows the phrase in the parent's own sentence slot before they own it.
Considered and rejected — drag-and-drop into the answer box
Proposed by the designer as the way to make a tap non-committal; argued against and withdrawn. Drag fights touch scrolling and the raised keyboard, is unusable by keyboard and screen reader, and needs a tap fallback anyway — meaning two interactions to build and document. It is still supported as an unadvertised shortcut, but nothing depends on discovering it.
3 Decisions about tone toward a struggling parent
Help never opens itself
Decided: the phrase strip is collapsed on the first scenario and never expands on its own. When the AI coach sees a miss, it offers the phrases in words — "there are three phrasings under Words to try, if you want them."
Instead of: auto-expanding the panel on the first wrong answer, which had been the working proposal. A panel that springs open the moment you get something wrong is a correction, and it arrives at the exact moment a struggling parent is least able to hear one. An offer in the coach's voice does the same work without the flinch.
No standing in the navigation
Decided: attempt history is one line on the results screen — "your strongest attempt is the one that counts" — and appears nowhere else.
Instead of: the sidebar, which was the designer's first pick and was reversed after discussion. A standing that lives in the navigation becomes a scoreboard visible on every screen, which quietly contradicts the module's most load-bearing promise: nobody is grading you.
Stopping is offered as neutrally as continuing
Decided: each section ends with a band — not a screen — naming the boundary and the next section's length, with "Stop here" and "Section 2 →" given equal visual weight. The module neither urges a parent onward nor tells them to rest. It states where they are and lets them choose.
Provisional text stays fully legible
A preview was first drawn as grayed-out ghost text, which measured 2.19:1 against its background — on the one sentence a parent has to read before deciding. Provisional state is now carried by a tinted ground and an edge rule, with full-strength ink. You cannot judge a phrasing you can barely see.
4 Decisions about what to remove
The school-to-home phrasing table was cut
It had been a planned tab for weeks and was never built — which was the tell. Phrasing already arrives in two better places: on the phrase cards themselves, and in the coach naming the school's wording against what the parent actually wrote. It now appears as an "At school:" line on individual cards, in context, rather than as a table nobody would open.
No ambient "saved" indicator
Save reassurance is load-bearing at three moments only — on exit, on return, and on demand — and all three are covered by existing screens. A persistent header chip becomes wallpaper, stops being read at the one moment it matters, and lies if a save ever fails. A checkable timestamp inside the reference panel replaces it.
A glossary was removed from beside the answer box
A row of clickable CD terms sat under the short-answer field as "Stuck? Use a term." It was vocabulary posing as help: a parent stuck at an answer box needs phrasing, not definitions. The terms moved to a calm reference screen, where each definition names the phrase card that puts it to work.
5 The density pass — a rule for borders
Reviewing the finished board before visual design, the screens read as crowded. Two causes were separated before anything was cut: the wireframe annotation layer, which does not survive into visual design, and the screen copy itself, which does. A toggle was added to the board to hide annotations, and the remaining density was treated as a content problem on the three heaviest screens — the objectives (2a), the results screen (2f), and the debrief (2h).
A border is earned, not default
Decided: an element gets a border only when it is interactive or needs attention. Everything else is separated by spacing and type weight. This carries forward into visual design as a standing rule, not a one-off cleanup.
Why: cutting words alone did not produce the breathing room the board needed — removing boxes did. On the results screen, eight identically bordered question rows made the eye scan all eight; with borders left only on the two answers needing attention, it lands on those two immediately. The same move gave the debrief its strongest gain: the field the parent has to write into is now the only bordered element on the screen.
Points were removed from the results screen
Decided: the points tally was cut. A tally states in gradebook language what the per-criterion bands already say in plain words, and it pulls against nobody is grading you. The per-criterion bands remain, because they are diagnostic rather than a total. Superseded: this entry originally cut points while keeping a percentage and a pass bar; both were removed in turn by the no-percentages decision in §8.
Per-objective assessment tags became one line
Each of the three learning objectives carried its own "ASSESSED BY" tag. A parent does not need an assessment map per objective; a reviewer needs the mapping to exist. One line under the list gives the reviewer what they need and returns the screen to the parent. Objective copy dropped from 118 words to 61 — the trailing explanatory clauses were restating verbs that already carried the meaning.
Color on a heading replaced a colored rule
In the debrief, "Strong" and "Work on" were marked by colored left rules. The words already name the distinction, so the rules were removed and the color moved into the "Strong" heading itself. Reviewed and accepted by the designer as sufficient. The risk noted at the time — that praise and correction would flatten into each other — did not materialise.
6 The visual system
The system was settled on two screens rather than a style sheet: the debrief (2h), which is almost entirely prose, and the live role-play (2g), which has a stage, two speakers, a coach panel and a live input. A treatment that held both was taken to be the system.
Neither soft nor crisp — the compromise was built and chosen
Decided: soft geometry and one tinted field, with crisp restraint everywhere else. 14px radii on surfaces, inputs and the primary button; 10px on small controls; fully round pills. Color marks feedback rather than boxing it. The header keeps a hairline rule; the score keeps a blue field.
Instead of: either pure option. Two full renderings were compared side by side — soft grouped the debrief's three ideas without adding a line, but put a tinted box behind every piece of text; crisp was cleaner but pushed all the warmth onto the paper color. The call was that the tint is worth keeping for exactly one thing on a screen: the number. Everywhere else it was removed and the distinction carried by color.
Work Sans, semibold at 575
Decided: Work Sans throughout, loaded as a variable font. Headlines sit at 575 — between semibold and bold — after 700 read too emphatic and 500 too soft for a screen that tells a parent what they got wrong.
Instead of: Figtree, rejected as the most generic of the three — the house style of a lot of recent software; and Hanken Grotesk, which had more personality in the details but was not needed once the palette was carrying the warmth.
Colors are named by role, and every text color is a separate step
Decided: paper #FBF9F4, ink #25293C, action #1F6FAD, accent #2E86C8, constructive #8E3A57 with a #B06A87 tint step, muted ink #5F6272, muted warm #6E6759. Names state the job, not the hue.
Why: the palette originally carried one hue name — "clay" — among role names, and the inconsistency turned out to be hiding a real problem: the swatch was a fill color being used for text at a step that failed 4.5:1. Every color now exists at a text-safe step and, where needed, a separate tint step for fills and graphics. Tint steps are not permitted for type.
Constructive feedback is plum, not brown and not red
Decided: #8E3A57. The original warm tan read as dull against the paper it sat on; a crimson step was tried and read close enough to a warning to be wrong for the one moment in the module where a parent is being corrected. Plum sits opposite the action blue on the wheel, so "Strong" and "Work on" read as a matched pair rather than two unrelated signals.
Surfaces are warm off-white; controls are lifted, not outlined
Decided: neutral surfaces are #FFFCF5 on the #FBF9F4 page. Controls — pills, the help button — carry a 1px soft shadow at 10% instead of a hairline outline.
Instead of: a sage-green neutral family, built and rejected in favor of off-white; and hairline outlines, which read as borders on elements the border rule says should not have them. Consequence accepted: a shadow implies pressable, so it cannot also be used on static surfaces. The coach panel, which is static, needed a left rule once the tint was gone.
On the role-play screen, containers carry attribution
Decided: the child speaks from white on the tinted stage; the parent's own words appear in a blue-tinted bubble tucked right; the coach's words have no container at all, so they read as narration rather than a third speaker. The scenario setup is unboxed plain text under the header.
Also: the wireframe's per-competency assessment chips — "assertiveness ✓", "composure · keep working" — were dropped. The coach's sentences already name the same thing, and they now carry the color. This is the border rule applied to content: the chips were a second statement wearing a box. Open: whether a reviewer needs the competency mapping visible on the practice screen, as they did on the objectives screen.
6b The color pass — three colors, three jobs
Reviewing the built screens, the beige surface was doing two incompatible jobs: neutral container and emphasis. Because everything was beige, nothing read as emphasized. The fix separated the two and required one color the palette did not have.
A green was added, built as a sibling of the action blue
Decided: confirmed #2A6B4E, confirmed-deep #1E5239, confirmed-field #E4EDE6. The blue sits at roughly oklch(.52 .105 245); the green is oklch(.52 .095 155) — identical perceived lightness, marginally lower chroma so it never out-shouts the blue, hue rotated to 155°. Its field is mixed toward the same warm paper as the beige.
Why not a stock green: a system green reads as an OS alert and would have been the only color in the module not derived from the palette. Deriving it from the blue's own coordinates was the difference between a fourth color and a bolted-on one.
Three colors, three jobs — and beige demoted to furniture
Decided: blue carries learning — principles, phrases, anything being taught. Green confirms something the parent did. Plum marks what to try next time. Beige is container, quoted input and chrome only, and carries no verdict. One blue field per screen, maximum.
Consequence: "Nearly there" moved out of blue into neutral beige. It was previously a blue pill, which made the middle band read as a taught concept; and under the new rule it is the one band that should feel like neither a verdict nor a prize.
Also: in the per-criterion feedback rows the glyph now carries the verdict — green ✓, plum — while every label stays ink. Previously the ✓ was blue (verdict work done by the learning color) and the plum rows colored their labels too, which weighted the misses more heavily than the hits on a screen that is meant to do both evenly.
Green is never allowed near a total
Constraint: green appears only after the parent has acted, and only against a named behavior — you did this specific thing. It is never decoration, never a heading color, never a container, and never attached to an overall standing. Green-for-good sits close to the grading semantics this module deliberately designed out; tying it to a named behavior is the only thing keeping it honest. If it ever appears beside a total, it has become a score with the numbers hidden.
Strokes came off the tinted fields; beige deepened one step
Decided: tinted fields carry no inset hairline. The color field alone is the container.
Consequences accepted: beige deepened from #F2EFE7 to #F0ECE1, because with no edge it was indistinguishable from the #FBF9F4 page; and the plum badge went solid, its 1.5px ring having been the last stroke on the screen. The tints are now load-bearing — every field must be dark enough to hold its own edge, which is a stricter constraint than the density pass imposed. Graphic placeholders keep their dashed stroke, because the stroke is what says "art goes here".
Dark now means "the module is talking about you", not "Section 3"
Decided: the #1C2030 ground marks summative moments — the bands, the section boundaries, the takeaways, the close. Light stays for teaching and for the working scenario flow. This replaces the earlier rule, which scoped dark to Section 3's practice frame.
Why: the old rule described where the dark appeared rather than what it meant, which is why it produced alternating grounds through the back third. The new line makes that stretch a single visual movement. Per-scenario feedback deliberately stays light — it is the working flow, and long reading on dark is worse.
Consequence accepted: four fields now exist in two grounds — eight field values where there were four. On light: learning #E7EFF7 with #1F6FAD label and #17578A deep; confirmed #E4EDE6 with #2A6B4E and #1E5239; neutral #F0ECE1 with #63604F; not-yet #F3E7EC with #8E3A57 and #6E2B42. On dark: learning #1F3149 with #8FC0E6 label; confirmed #22392E with #8FCFA9 label and #D6E4DB body; neutral #2A2E3C with #A8ADBD label; not-yet #3A2A35 with #D79AB3 label and #F0DCE4 body. This is the kind of duplication that rots if it is not written down, which is why the whole table is here rather than half of it.
7 Scope and delivery calls
8 How performance is reported
Settled by elimination rather than preference. The module had drifted into showing a percentage per scenario and no total, which spares a parent nothing — it issues three grades and withholds the summary. The composure cap had already forced a non-numeric state onto the same screen, so the results screen was going to speak two languages regardless.
No percentages anywhere, and no overall score
Decided: every scored surface reports a band — Strong / Nearly there / Not yet — alongside the criteria named individually in plain language. No number is shown on any screen, and the module ends without a total. Why: it is the only version that doesn't contradict "nobody is grading you", which is stated to the parent on the privacy card. Cost accepted: a portfolio reviewer expecting a conventional assessment may read bands as softer than percentages; the case study names the reasoning rather than leaving it to be inferred.
The composure cap is enacted, never explained
Problem: a parent who connects, states the limit and offers two choices but threatens a week-long consequence would see three ticks beside a failing result. With no explanation the likeliest read is that the scoring is broken — the exact injustice the free-text design exists to avoid. Rejected: a rules note on the screen, which teaches the scoring instead of the practice. Decided: when composure fails the band is "Not yet", the other three criteria appear grayed rather than ticked, and a single line says they only work from a calm voice. The rule is visible in behavior; the parent never reads a rubric.
The module ends on reflection, not on a result
Decided: the last scored screen is the third scenario's debrief. After it, SCR-304 shows the parent their own untrained answer beside the one they just wrote and asks a single question about composure — no band, no criteria, no number. Why: the comparison is the strongest moment the module has, and a score placed above it converts recognition into a grade.