DERT
READS

Scale vs. Authenticity

When I describe DERT Reads, people sometimes call it "an audiobook with a transcript." That comparison is the fastest way to misread the entire product. Audiobooks treat children as passive listeners. DERT treats them as co-performers — and, eventually, as authors.

The founder of DERT, a literacy nonprofit partnered with Parsons, asked me one question that reshaped the product: How do we build a digital product that protects the human side of reading, instead of replacing it? The tension between scale and authenticity became the through-line.

A Four-Actor Ecosystem

I designed DERT as a four-actor ecosystem, not a single app. The platform connects content authors directly to readers, with editorial review as the moderation layer. A nonprofit funded by a school becomes a moderated publishing house staffed by the school.

• CHILD READER (5–10) — reads aloud when it's their turn; not a viewer
• CO-READER — (parent / sibling / Crumb in solo mode) reads opposite turns
• STUDENT AUTHOR — (Parsons design students) builds original books
• PROFESSOR — editorial gatekeeper, curates the published library

Information Architecture

Current stage: 12 surfaces across two sides. Every screen designed mobile-first; every component shipped in React/TypeScript.

• C-side (Family): Landing · Start · Sign-in · Home · Library · Detail · Reading Mode Sheet · Play · Mini Player · Completion · Achievements · Profile
• B-side (Studio): Login · Dashboard · 5-step Editor wizard (Book Info / Pages / Hotspots / Audio / Review)

Hue Ladder & Speaker Colors

The brand sits intentionally between Apple-HIG polish and hand-drawn warmth. Not a sterile productivity app pretending to be for kids. Not a kids' app drowning in primary colors. A good book on a phone.

Hue ladder — one teal family, four deliberate stops: brandPrimary (chrome, CTAs) → brandSage (mascot, accent surfaces) → brandTertiary (dividers) → brandSurface (tint).

Speaker color system — every speaker has two color slots, designed as two stops on the same hue axis. Solid label for caption text (deep tint), wash PNG for the brushstroke painted behind the active word (light tint). One color can't do both jobs well; the hue ladder solves it.

Three-Color Speaker Model

Narrator (gray), Parent (deep powder blue), Child (deep coral). The current word highlights with a wash PNG painted behind it. A 6-year-old can see who reads what — no quiz, no prompt, just typography.

This wasn't a visual decision; it was a literacy decision. Most read-aloud apps highlight the current word but don't tag the speaker — the child has no visual cue when their turn arrives. The three-color system makes the co-reading turn-taking visible.

Inclusive Mode & The Crumb Decision

Halfway through the project, my advisor pointed out: not every kid has a parent at bedtime. The product would fail equity if it required two voices to function. So I added a companion mascot, Crumb. It took three iterations to get it right.

• v1: Crumb floating bottom-right on book illustration. Cute. Competed with hand-drawn book art for attention every second the child tried to read.
• v2: Crumb embedded in sheet header as 40px avatar. Too tiny to read personality. Still added chrome to active UI.
• v3: Crumb removed from active reading entirely.

The right pattern came from studying Headspace. Their mascots live in moments and cards. But never in the active meditation interface. In active reading, Crumb's presence is communicated verbally — "CRUMB ASKS" as the speaker label triggers the mental model of "Crumb is my reading partner" without any visual reinforcement.

"A reading app's UI doesn't need a mascot. It needs a clean page and a friend who shows up when it matters."

Inclusive UX Writing

Original CTA: "Read with your grown-up."
Revised CTA: "Take turns reading together."

The change took 30 seconds. The product implication was structural: no assumption about family structure (caregivers, older siblings, foster parents all welcome), no shame for kids reading alone, and the language now describes the actual interaction — turn-taking, not adult-led reading.

Reader Sheet — Four States

Full / half / peek / mini player. Children can drag the reader down to a 90px bottom bar and keep listening while a parent finishes dinner. The iOS music app pattern, applied to children's content.

Completion Screen

When the last word is read, a celebration overlay slides up. Crumb appears LARGE here (180px holding a star) because this is a moment, not active work. Stats trio: streak / time / read-with. Stagger animation: Crumb bounces in, headline slides up, stats cascade, CTAs settle.

Three Users, Three Different Mental Models

The Studio serves student-authors building books and professors reviewing and curating them. Each persona has a different mental model:

Wizard Architecture: 7 → 5 Steps

The original wizard had seven steps: Basics, Cover, Pages, Hotspots, Audio, Preview, Submit. Two merges emerged from thinking about the type of work in each step:

Basics + Cover → Book Info. Both are metadata about the same object. Combined with a Live Preview card that updates as the author types, they become one composition surface.

Preview + Submit → Review. Submit isn't a step; it's an action. Merged into a Review screen with an iPhone-frame preview of the full reading experience and a sticky Submit bar.

What I deliberately did not merge: Pages and Hotspots. They share a surface but represent two different mental modes — creation versus polish. Student-authors want to finish the manuscript before decorating it with interactivity.

Asymmetric Sticky Layout

On desktop the Book Info step is a 60/40 split — form on the left, sticky live preview card on the right. As the author scrolls through metadata, the preview stays pinned, showing the book card exactly as it will appear in the Library.

Engineering note: CSS Grid plus `align-items: start` breaks sticky because the grid cell auto-sizes to content height. Switched to Flex with `align-items: flex-start` to let the preview pin to the page scroll.

Multi-Segment Per Page

First pass shipped one-speaker-per-page. PM critique: real children's stories have multi-turn dialogue within a single page. Narrator opens the scene, parent asks a question, child answers.

"A page is a visual unit, not a speaking unit."

Refactored the data model to an ordered segment list, matching the production rendering structure 1:1. Authors now build pages the same way readers experience them.

Drag-and-Drop Authoring

Reordering pages and dialogue segments was originally Up/Down arrow buttons — visual noise, no signal for "this is reorderable." Replaced with `framer-motion`'s Reorder system and a DotsSix grip handle (44pt target on mobile) using `touchAction: none` to prevent scroll conflict during touch drag.

Mobile-First Fluid Layout

Inline styles can't use CSS media queries, so I wrote a `useIsMobile` hook (matchMedia, 600px breakpoint). Page cards on mobile lose their shadow + border + extra padding — the card "dissolves" into the canvas. Three-button bottom nav becomes a Primary Stack pattern.

Color System Articulation

When the Crumb mascot color (`#7FB3AE` sage) didn't match the brand primary (`#256F69` deep teal), the first instinct was to "fix the mismatch." The actual answer: industry pattern. Duolingo's Duo and Mailchimp's Freddie both sit one tier softer than their brand chrome. CTAs need contrast punch; mascots need approachable warmth. Same hue, different jobs.

Safe-Area-Inset Everywhere

iOS Safari with `viewport-fit=cover` puts content edge-to-edge, including under the status bar. Hardcoded `paddingTop: 70` produced too much gap on newer models. Switched all top paddings to `calc(env(safe-area-inset-top, 0px) + 8px)` for consistent rendering across every iPhone model.

Voice Upload, Not AI Voiceover

The next sprint is voice recording. A parent records themselves reading the book. A student-author records their own story in their own voice. We won't offer AI voiceover.

This is the most important product decision I'll make on DERT, and the one most at odds with where the market is going. In a children's literacy app in 2026, the human voice isn't a feature. It's the product. The founder's principle of authenticity isn't a marketing tagline — it's an architectural commitment that has to be defended at every fork.

Outcome: The Constraint Was The Feature

Twelve surfaces shipped. One person. End-to-end. Research, IA, brand system, UI, motion, React/TypeScript, Vercel deploy. Every animation tuned by hand in framer-motion.

The project's most uncomfortable lesson: the constraint was the feature. The Universal Hotspot Protocol exists because student-authors can't code. The Inclusive Mode exists because not every kid has a parent. I'm a product designer because I get to make those constraints visible — and then make them lovely.

Key Deliverables

• Two-sided platform (12 surfaces, C-side + B-side)
• Brand system with documented hue ladder + speaker color system
• Mascot library (3 color families × 5 pose variants = 15 PNGs)
• Editor wizard with live preview + drag-drop multi-segment authoring
• Mobile-first fluid layout system + safe-area-inset compliance
• Full React/TypeScript codebase, deployed on Vercel

Upcoming Roadmap

• Stage 4: Universal Hotspot Protocol (no-code interactive moments)
• Stage 5: Voice upload (parent + student author voices)
• Stage 6: Professor curation tools (review queue, class metrics, approval workflow)
• Stage 7: Supabase backend (auth, content storage, real publishing)