Why this is in the vault
The parent-facing web portal (account, child profiles, billing, onboarding, progress, marketplace) is the next Scribble Works design round. This board is the pattern reference layer under [[../../02-sops/DESIGN-scribble-works]] — every steal-this note below is pre-filtered through the contract's non-negotiables (warm-craft parent register, paper-on-desk frame motif, rounded sans + scribble accents, Ray as guide, palette sampled from the Ray mascot, no AI-generated children). Founder-named reference bar from [[2026-08-31-brand-interview-r1]]: Osmo, Bluey, education.com, Twinkl, Etsy shops. (SchoolAI below is Ray-selected, proposed to the founder by iMessage 2026-08-31 14:57 — a structural match for the charter's open child-profile question, not a founder ruling.) All screens below were returned live by the Mobbin MCP (Model Context Protocol) server on 2026-08-31. This board feeds the portal design round in the [[2026-08-31-studio-charter]] pipeline.
1. Parent account settings / profile management
- Hulu — Manage Your Account, Profiles tab (Hulu, web). Steal the shape, not the skin: one calm page, big friendly page title, profile cards in a row with a "+ Add Profile" card, parental controls as a single labeled block below. Ours re-skins the profile cards as paper cards with soft shadow on a cream ground (frame motif, clean-grid variant) with Ray in the corner offering a one-line hint.
- Amazon — Amazon Family settings (Amazon, web). Steal the three-item left nav (Members / Sharing / Settings) — a parent portal needs at most a handful of destinations, and this proves how little chrome settings actually needs. Render the nav items in rounded sans with a scribble underline on the active item instead of link-blue.
- Duolingo ABC — Settings with learner profiles (Duolingo ABC, ios). Steal "Learner Profiles" as a first-class settings section: round kid avatars with an edit pencil, add-circle beside them, account stuff pushed below. Closest tonal match in the whole pull — warm, chunky, parent-legible. Our avatars become crayon-drawn faces or Ray-palette color dots (the contract mandates real photos wherever a child appears; profile UI simply shows no children).
- Spotify Kids — "For grown-ups" (Spotify Kids, ios). Steal the naming and the structure: a plainly labeled grown-ups area listing Plan Owner, Kids Accounts, and Access. "For grown-ups" is exactly the register split from the contract — copy the idea (a door labeled for parents), swap the dark purple for warm paper.
2. Child profile creation & multi-kid dashboards
- SchoolAI — parent profile with grade & subject rows (SchoolAI, web). Ray-selected (proposed to the founder by iMessage 2026-08-31 14:57, awaiting his read); the closest structural match to the child-profile question the [[2026-08-31-studio-charter]] leaves open. Steal the repeating per-kid rows with removable chips and "+ Add another" — the shape proposed for our per-kid data, adapted to the charter's schema (birthday rather than grade band; interests and focus topics rather than subjects). The charter marks profile design as an open clarifying question for the founder, so this is a candidate control, not a settled model. Ours: crayon-colored chips on a kraft-paper card, one paper card per kid instead of a form table.
- Care.com — Add child modal (Care.com, web). Steal two things: month/year-only age entry (privacy-respectful, explained in one friendly line) and "choose up to 3" interest chips (Drawing/Coloring, Puzzles, Board Books...). Interest chips feed printable recommendations directly; keep the low-pressure "up to 3" cap. Render chips in the Ray-sampled palette.
- Amazon Family — member cards (Amazon, web). Steal the household-as-cards layout with an explicit Adult/Child role label and a dashed "New — add a member" card. Ours: each kid card is a slightly-skewed sheet of paper (frame motif variant) with name, interest chips, and their recent printables fanned behind.
- Hulu — Create a New Profile (Hulu, web). Steal the restraint: a create-profile step that is name + kids toggle + birthdate and nothing else. Anti-form-fatigue benchmark for our add-a-kid flow — anything beyond name + birthday + a few interest chips should justify itself.
3. Billing / subscription management (warm, friendly tone)
- Duolingo — Family Plan management (Duolingo, ios). Steal the framing: billing presented as "your family," members with avatars listed first, "Invite members — 4 spots left" as a dashed friendly slot, and Manage Subscription demoted to one button at the bottom. Money UI led by people, not price tables — exactly the warm-craft register.
- Calm — Manage Subscription (Calm, ios). Steal the honesty pattern: plan name, length, renewal date, and a plain visible "Cancel Plan" link above the fold — no burying, no guilt modal. That is the anti-dark-pattern baseline the contract's trust posture (real photos, no AI kids) demands on billing too.
- Workable — plan page with "Request a call" human card (Workable, web). Mostly a SaaS plan grid, but steal the sidebar card with a human face and "Questions about plan options?" — ours becomes Ray-as-guide with a speech bubble ("Not sure which plan fits? Here's how families usually pick") next to the plan cards, which satisfies non-negotiable #4 on a page that would otherwise have no guide moment.
- Kit — Manage membership with next-charge card (Kit, ios). Steal the "Next charge" summary card — date + amount in a bordered block, promo code and payment history as plain text rows below. The next-charge block translates naturally to a receipt-slip motif clipped onto the paper ground.
Note: web-platform billing searches returned almost exclusively cold B2B SaaS (Mixpanel, Pipedrive, Hotjar) — Mobbin is genuinely thin on warm consumer billing on web, so this section leans iOS. The patterns transfer; the layout will need widening for desktop.
4. Parent onboarding flows
- Brilliant — Onboarding flow (Brilliant, web, 12 screens). Steal the entry fork on the landing hero — "I'm a learner" vs "I'm a parent or teacher" — as the register split made literal on screen one. Also steal the rhythm: one question per screen, warm illustrated interstitials ("Reach big learning goals") that pace the form-filling. Our interstitials are Ray sketch moments on paper, not 3D gem renders.
- Uxcel — Onboarding flow (Uxcel, web, 23 screens). Steal the goal-commitment step ("My daily learning goal is... 5/10/15/20 min" with a growing-plant motif and an encouraging caption) — remapped for us as "How many printables a week?" with a hand-drawn stack that grows per option. Also steal the ever-present progress bar + "Skip for now" — low-stakes, parent-respectful. 23 screens total is itself a warning: take the pattern, cut the length.
- Brilliant — Setting up an account flow (Brilliant, web, 12 screens). Steal how account creation is deferred until after the personalization questions have built momentum — the parent invests answers first, signs up second. Pairs with Care.com's add-child modal as the post-signup step.
5. Progress / overview dashboards (the weekly parent check-in)
- ClassDojo — student portfolio home (ClassDojo, web). The strongest single reference in the pull. Steal the whole anatomy: kid identity card top-left (avatar + name), a "To Do" list where each row is a named worksheet with a date and one big Start button, and a portfolio strip of the kid's actual work. Our version: the to-do rows become this week's printables shown inside the paper-on-desk frame, and the portfolio is photos of completed pages (real kids' work — on-contract). Proof that a kids-brand dashboard can be joyful without being illegible.
- SchoolAI — class mastery dashboard (SchoolAI, web). Steal the per-kid progress row: name + one-word headline ("Insightful", "On track") + a row of filled dots per outcome. The dot-row is the right altitude for a weekly parent glance — no charts, no percentages. Ours: crayon-filled dots, one row per kid, headline in the scribble accent font.
- Brilliant — home with streak calendar (Brilliant, web). Steal the small weekly-streak day strip (M-T-W-T-F circles) as a light "did we print/do something this week" tracker — but keep it gentle: the contract's warm register means no shame states, an empty week just stays paper-blank.
6. Marketplace / catalog listing pages
- Etsy — coloring-book shop listing grid (Etsy, web). The founder-named Etsy-shop scan, live. Steal the left rail of plain-language categories with counts (Animals Coloring 36, House Coloring 25) and the dense-but-scannable grid where every thumbnail is the printed page itself. This maps 1:1 to the contract's clean-grid frame variant: our grid cells are the actual worksheets framed as paper on desk, category rail in rounded sans.
- Skillshare — Shop Digital Products (Skillshare, web). Steal the featured-product hero band above the grid (one product blown up with its cover art) and product cards whose color comes entirely from the artwork on a neutral card. That is the contract's collision-avoidance rule working in the wild — site stays neutral, per-game palettes live inside the framed previews.
- Etsy — search grid with price filter and Digital Download badges (Etsy, web). Steal the "Digital Download" badge convention and the floating plain-radio price filter. A printable needs its format stated at card level; ours becomes a small "Print at home" stamp — literally a rubber-stamp treatment in the scribble accent.
- Codecademy — catalog with paper-toned path cards (Codecademy, web). Steal the card meta-footer: difficulty + time ("Beginner Friendly · 21 hours") as two icon-led facts. Ours: age/grade band + prep time ("Ages 4-6 · 5 min setup") on every listing card, and note their cream card headers already read halfway to paper.
Anti-patterns seen
- Cold SaaS-gray billing (Mixpanel, Pipedrive, Hotjar returns): dense plan tables, add-on upsell grids, invoice-first framing. Our billing page leads with the family, not the meter.
- Dark-theme streaming profile managers (HBO Max, Paramount+, Plex): black voids with floating avatars read as evening-entertainment, not morning-kitchen-table. Wrong emotional register even though the card anatomy is fine.
- Form walls: Uxcel's 23-screen onboarding and SchoolAI's dense profile form show the failure mode of the very patterns we're stealing — cap onboarding at ~5 steps, one question each.
- Gamification pressure (Brilliant/Uxcel streaks, XP, leagues): a broken-streak guilt loop aimed at parents undermines warm-craft. Progress indicators stay gentle; the contract's warm register rules out shame states.
- Buried or hedged cancellation: anything less direct than Calm's visible "Cancel Plan" link is a dark pattern; trust is the whole photography argument, and billing must match.
- Generic 3D-blob illustration (Brilliant gems, Mixpanel cubes): reads tech-SaaS. Every illustration moment on our portal is Ray or hand-drawn scribble, per contract.
Cross-links
- Contract: [[../../02-sops/DESIGN-scribble-works]]
- Founder interview: [[2026-08-31-brand-interview-r1]]