← back to Dw Photo Capture
public/kid-simple/index.html
188 lines
<title>Photo Capture, Kid-Simple</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Public+Sans:wght@400;600;700&display=swap">
<style>
:root{
--ground:#EDEFEC; --panel:#FFFFFF; --ink:#1E2320; --muted:#5E6A64;
--line:#D5DAD5; --gold:#9C7A33; --gold-soft:#F1E7D2; --sage:#4E7A64;
--good:#2F7D55; --warn:#A8651C; --bad:#A83A2E;
color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ground:#161A18; --panel:#1F2522; --ink:#E9ECE9; --muted:#9AA6A0;
--line:#333B37; --gold:#D6B26A; --gold-soft:#3A3120; --sage:#8DB8A2;
--good:#6CC495; --warn:#E0A35A; --bad:#E37E71; color-scheme:dark;
}
}
:root[data-theme="dark"]{
--ground:#161A18; --panel:#1F2522; --ink:#E9ECE9; --muted:#9AA6A0;
--line:#333B37; --gold:#D6B26A; --gold-soft:#3A3120; --sage:#8DB8A2;
--good:#6CC495; --warn:#E0A35A; --bad:#E37E71; color-scheme:dark;
}
body{background:var(--ground);color:var(--ink);font:16px/1.55 "Public Sans",system-ui,sans-serif;padding-inline:16px;padding-block:32px 64px}
.wrap{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
header{display:flex;flex-direction:column;gap:10px;max-width:68ch}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
h1{font:600 clamp(30px,5vw,46px)/1.1 "Newsreader",Georgia,serif;margin:0;text-wrap:balance}
h2{font:600 24px/1.2 "Newsreader",Georgia,serif;margin:0;text-wrap:balance}
p{margin:0}
.lede{color:var(--muted)}
.jobs{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 12px;font-size:14px}
.verdict{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);padding:18px 20px;display:flex;flex-direction:column;gap:6px;max-width:80ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:40px 28px}
.card{display:flex;flex-direction:column;gap:12px}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tag{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.score{font:700 14px/1 "Public Sans",sans-serif;padding:6px 10px;border-radius:999px;background:var(--gold-soft);color:var(--ink);white-space:nowrap}
.score.top{background:var(--good);color:var(--panel)}
.phone{width:100%;max-width:398px;aspect-ratio:390/780;border:4px solid var(--ink);border-radius:34px;overflow:hidden;background:#000}
.phone iframe{width:100%;height:100%;border:0;display:block}
.idea{color:var(--muted)}
dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}
dt{color:var(--muted)}
dd{margin:0}
.taps{font-variant-numeric:tabular-nums}
.flaw{color:var(--bad)}
a{color:var(--sage);font-weight:600}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
footer{color:var(--muted);font-size:14px;max-width:80ch}
</style>
<div class="wrap">
<header>
<div class="eyebrow">photo.designerwallcoverings.com · redesign study</div>
<h1>Sixteen ways to make photo capture simple enough for a 13-year-old</h1>
<p class="lede">Today's app puts about 40 controls on one screen. Each version below keeps only the four real jobs, uses words a teenager knows, and makes the camera the hero. Every phone is a live, clickable mockup with pretend data — tap through it.</p>
<div class="jobs"><span class="chip">Add New Item</span><span class="chip">Update an Item</span><span class="chip">Find an Item</span><span class="chip">A Sample Came In</span></div>
</header>
<section class="verdict">
<h2>Round 2 pick: v4 Level Up</h2>
<p>After a second UX pass (Home + Back everywhere, a "good photo?" check after every shot, Undo after saving, a "no match" path, bigger text and targets), a separate reviewer re-tested all six. v4 came out cleanest: its Back/Home bar is always on screen, so no screen can strand you. Every defect the reviewer found in round 2 has been fixed in the mockups below. Tip: each one has a "Demo: show 'no match'" switch so you can see the failure path.</p>
</section>
<div class="grid">
<article class="card">
<div class="head"><h2>v4 · Level Up</h2><span class="score top">#1</span></div>
<div class="phone"><iframe src="v4-level-up.html" title="v4 Level Up mockup" loading="lazy"></iframe></div>
<p class="idea">Each job is a short game path — 2 or 3 levels, progress dots, confetti at the end.</p>
<dl><dt>Round 2 fixed</dt><dd>A timer could yank you back to "done" after you tapped Back; Undo after Update landed on the wrong screen</dd><dt>Watch for</dt><dd class="flaw">Confetti and levels may feel like a toy to older staff</dd></dl>
<a href="v4-level-up.html">Open full screen</a>
</article>
<article class="card">
<div class="head"><h2>v3 · Text Buddy</h2><span class="score">#2</span></div>
<div class="phone"><iframe src="v3-text-buddy.html" title="v3 Text Buddy mockup" loading="lazy"></iframe></div>
<p class="idea">The whole app is a text chat with "Sam," who asks one thing at a time with tap-to-reply chips.</p>
<dl><dt>Round 2 fixed</dt><dd>"Undo last" could replay a stale photo; some captions were under 17px</dd><dt>Watch for</dt><dd class="flaw">The undo-by-replay design is the most complex to build for real</dd></dl>
<a href="v3-text-buddy.html">Open full screen</a>
</article>
<article class="card">
<div class="head"><h2>v6 · One Thing At A Time</h2><span class="score">#3</span></div>
<div class="phone"><iframe src="v6-one-thing.html" title="v6 One Thing At A Time mockup" loading="lazy"></iframe></div>
<p class="idea">No menus at all: one big question and one to three full-width buttons per screen.</p>
<dl><dt>Round 2 fixed</dt><dd>Wrong job name, three different "again" buttons (now all "Do Another"), low-contrast secondary buttons</dd><dt>Watch for</dt><dd class="flaw">Most screens per job — slowest for a practiced user</dd></dl>
<a href="v6-one-thing.html">Open full screen</a>
</article>
<article class="card">
<div class="head"><h2>v1 · Magic Camera</h2><span class="score">#4</span></div>
<div class="phone"><iframe src="v1-magic-camera.html" title="v1 Magic Camera mockup" loading="lazy"></iframe></div>
<p class="idea">One giant shutter button first; after the shot it asks "What's this photo for?" with the four jobs.</p>
<dl><dt>Round 2 fixed</dt><dd>Undo after Save wiped the brand you picked; loading screens had no way out</dd><dt>Watch for</dt><dd class="flaw">Photo-first means Find by code still starts with the camera</dd></dl>
<a href="v1-magic-camera.html">Open full screen</a>
</article>
<article class="card">
<div class="head"><h2>v2 · Four Big Tiles</h2><span class="score">#5</span></div>
<div class="phone"><iframe src="v2-four-tiles.html" title="v2 Four Big Tiles mockup" loading="lazy"></iframe></div>
<p class="idea">A home screen of four big coloured tiles, one per job, like phone app icons.</p>
<dl><dt>Round 2 fixed</dt><dd>"Sample Arrived" renamed; grey subtitles failed contrast; three demo switches disagreed with each other; same Undo bug as v1</dd><dt>Watch for</dt><dd class="flaw">Plain — nothing guides you once you're inside a job</dd></dl>
<a href="v2-four-tiles.html">Open full screen</a>
</article>
<article class="card">
<div class="head"><h2>v5 · Swipe Deck</h2><span class="score">#6</span></div>
<div class="phone"><iframe src="v5-swipe-deck.html" title="v5 Swipe Deck mockup" loading="lazy"></iframe></div>
<p class="idea">Every step is a card: swipe right or tap ✓ for yes, swipe left or tap ✗ to redo.</p>
<dl><dt>Round 2 fixed</dt><dd>Crashed on "switch tab, then Back"; swipe hint was wrong on the Find screen</dd><dt>Watch for</dt><dd class="flaw">Swiping is hard one-handed while holding a sample</dd></dl>
<a href="v5-swipe-deck.html">Open full screen</a>
</article>
</div>
<section class="verdict" id="round3">
<h2>Round 3: ten more directions, v7–v16</h2>
<p>Built in parallel this morning (TK-12344), reviewed by a separate critic, fixed, then laid out as one Photoshop board. Not ranked yet.</p>
<p><a href="renders/kid-simple-v7-v16-board.jpg">Open the Photoshop board (JPG)</a></p>
</section>
<a href="renders/kid-simple-v7-v16-board.jpg"><img src="renders/kid-simple-v7-v16-board.jpg" alt="Photoshop board showing Kid-Simple versions 7 through 16 side by side" style="width:100%;height:auto;border:1px solid var(--line);border-radius:8px"></a>
<div class="grid">
<article class="card">
<div class="head"><h2>v7 · Scan & Go</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v7-scan-and-go.html" title="v7 Scan & Go mockup" loading="lazy"></iframe></div>
<p class="idea">A scanner viewfinder home: point at a tag or box; a match goes to Update or Sample, no match goes to Add New Item.</p>
<a href="v7-scan-and-go.html">Open full screen</a> · <a href="renders/v7-scan-and-go.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v8 · Mode Dial</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v8-mode-dial.html" title="v8 Mode Dial mockup" loading="lazy"></iframe></div>
<p class="idea">Camera home with a swipeable NEW / UPDATE / FIND / SAMPLE strip; the shutter's colour and label change with the mode.</p>
<a href="v8-mode-dial.html">Open full screen</a> · <a href="renders/v8-mode-dial.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v9 · Story Mode</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v9-story-mode.html" title="v9 Story Mode mockup" loading="lazy"></iframe></div>
<p class="idea">Instagram-style stories: pick a job ring, then tap right to continue and left to go back.</p>
<a href="v9-story-mode.html">Open full screen</a> · <a href="renders/v9-story-mode.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v10 · Today's Inbox</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v10-todays-inbox.html" title="v10 Today's Inbox mockup" loading="lazy"></iframe></div>
<p class="idea">Home is a to-do list of what's waiting (samples in, photos needed), plus a camera button for Add New Item.</p>
<a href="v10-todays-inbox.html">Open full screen</a> · <a href="renders/v10-todays-inbox.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v11 · Bottom Sheet</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v11-bottom-sheet.html" title="v11 Bottom Sheet mockup" loading="lazy"></iframe></div>
<p class="idea">Full-screen camera with a Maps-style pull-up sheet holding the four jobs.</p>
<a href="v11-bottom-sheet.html">Open full screen</a> · <a href="renders/v11-bottom-sheet.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v12 · Hold to Talk</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v12-hold-to-talk.html" title="v12 Hold to Talk mockup" loading="lazy"></iframe></div>
<p class="idea">Press and hold the mic and say what you're doing; big tap buttons are the fallback.</p>
<a href="v12-hold-to-talk.html">Open full screen</a> · <a href="renders/v12-hold-to-talk.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v13 · Sticker Book</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v13-sticker-book.html" title="v13 Sticker Book mockup" loading="lazy"></iframe></div>
<p class="idea">Scrapbook look: take a photo, then drag the polaroid onto one of four job stickers (or just tap a sticker).</p>
<a href="v13-sticker-book.html">Open full screen</a> · <a href="renders/v13-sticker-book.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v14 · Ticket Printer</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v14-ticket-printer.html" title="v14 Ticket Printer mockup" loading="lazy"></iframe></div>
<p class="idea">Four arcade keys; each finished job prints a little thermal-paper ticket.</p>
<a href="v14-ticket-printer.html">Open full screen</a> · <a href="renders/v14-ticket-printer.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v15 · Thumb Zone</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v15-thumb-zone.html" title="v15 Thumb Zone mockup" loading="lazy"></iframe></div>
<p class="idea">Shoot first; every control lives in the bottom third where your thumb reaches; hold-to-confirm rings.</p>
<a href="v15-thumb-zone.html">Open full screen</a> · <a href="renders/v15-thumb-zone.png">Photoshop render</a>
</article>
<article class="card">
<div class="head"><h2>v16 · Widget Stack</h2><span class="tag">round 3</span></div>
<div class="phone"><iframe src="v16-widget-stack.html" title="v16 Widget Stack mockup" loading="lazy"></iframe></div>
<p class="idea">iPhone-style widgets (Samples Waiting, Need Updates, Last Added, Find) that open in place and count down as you work.</p>
<a href="v16-widget-stack.html">Open full screen</a> · <a href="renders/v16-widget-stack.png">Photoshop render</a>
</article>
</div>
<footer>Mockups only — nothing here talks to the real catalog, camera, or FileMaker. Ranking is the independent reviewer's round-2 order for a 13-year-old.</footer>
</div>