cat info.txt

Demme Learning

A design system for the family publisher behind Math-U-See. We turned their teaching principles into a site structure, tested it against four personas, and drew the megasite and the Digital Toolbox on top.

Demme Learning

Demme Learning

From publications to platform.

A design system for the family publisher behind Math-U-See. We turned their teaching principles into a site structure, tested it against four personas, and drew the megasite and the Digital Toolbox on top.

Client
Demme Learning
Discipline
UX · Information Architecture · Design System
Year
2024
Digital Toolbox lesson showing subtraction with regrouping using illustrated blocks
A lesson built around the blocks, with teaching support close at hand. Delivered interface design; implementation paused before launch.Inspect screen ↗
23
Pages mapped to the section
17
Figma pages, with a 21-page spec
Case study
Read the full story at wrkhrs.co
Brand book
Design system, live at a URL

The handoff

The build paused before launch, so there is no public site to point at. What we handed over was the system: a 21-page spec, 17 Figma pages, and the color, type, and spacing values that the panels further down this page render from directly.

01

Strategy

Three domains, one company.

A parent looking for Math-U-See could land on the marketing site, the store, or the software, each on its own domain with its own login. Customers did not experience that as an architecture. They experienced it as getting lost.

At the same time the sales team was opening a second market in charter schools and districts. The brief had two constraints from the first meeting. Do not spend the homeschool trust. Do not build a second site for schools.

2023

Two markets, one front door.

Three decades of homeschool trust, and a new buyer in the school administrator. One brand had to hold both without changing its voice between them.

01Homeschool

The base · Tactile, sequential, trusted

Homeschool

Parents chose Math-U-See because it is hands-on and sequential, and because a person answers the phone. The product had to read like a teacher who shows up, not software that watches.

02Schools

The second market · SSO, rosters, K-8 sequencing

Schools

Charters and districts evaluate at the institutional level. Anything that read as homeschool-only stalled in review before anyone looked at the curriculum.

The same catalog, told two ways, on one information architecture.

02

Principles

The brand decided the structure.

Before we drew a screen we wrote down what Demme actually believes about learning, then treated those statements as constraints on the design instead of as language for an About page. Seven principles came out of that work. Four of them changed the product.

Principles

Four principles, four screens.

  1. 01

    Strong foundations

    Order matters; a learner earns the next step. This became the lesson-shaped content model in the Digital Toolbox.

  2. 02

    Deep learning

    The same order, in the catalog: Primer through Zeta, presented in sequence on every subject page.

  3. 03

    Empowering parents

    The adult in the room is the expert. Progress views inform the parent; they never grade them.

  4. 04

    Building communities

    The homeschool co-op is a customer in its own right. Community sits at the top level of the navigation.

The rest of the page is these four claims, cashed.

A principle that does not change a screen is decoration.
A teacher who respects the parent.. Parents are the experts on their own children, so the product supports that authority instead of overruling it. Three guidelines, cut from the book.
03

Architecture

Three domains became one tree.

We ran a card sort using the words Demme customers use, not the ones on the org chart. The result was unambiguous. People think in subjects, and they expect one path through reading, buying, and doing the lesson.

So the structure leads with Subjects, Shop as a sibling, and the Digital Toolbox fixed in every navigation state. We mapped it to the section level: eight sections cover twenty-three pages, which is what makes the site cheap to extend and hard to break.

2024 content map Live at wrkhrs.co
Twenty-three pages, mapped to the section.. Twenty-three pages; fourteen designed to the section, the rest stubs that inherit. Subjects and the Digital Toolbox carry the most weight on the map, and the Toolbox call to action lands on seven of the fourteen, always below the content that earns it. Four colors run through the map to mark what a page is for: product, commerce, account, and the page where someone buys.
04

Research

Four people, four reasons to be here.

Persona work on a curriculum platform is not demographic. What matters is why someone opened the page, the room they are in when they open it, and how many minutes they get before something interrupts. A parent planning a week of lessons needs a different first screen than a nine-year-old opening one.

We built four. Two of them are the poles of the two-market problem, and they never see the same navigation state.

Audience model

The four we designed for.

Each persona is three facts: what they came to do, where they are sitting, and how long they have. No biographies. Demme's team keeps the working copies in the brand book at /brand/demme.

  1. 01

    Homeschool Home Leader

    Parent teaching at home

    Teaches two or three children across subjects and grade levels, in whatever room fits the activity. Balances teaching against everything else the household needs.

  2. 02

    Homeschool Community Leader

    Co-op and tutorial organizer

    Runs group instruction in co-op spaces and libraries. Adapts one set of materials to a mixed-age room and reports back to the families who trusted them with it.

  3. 03

    Education Administrator

    Charter, district, and school buyer

    Evaluates curriculum at the institutional level against standards, budget, and rollout risk. Arrives skeptical that a homeschool publisher can serve a building.

  4. 04

    The Young Learner

    Student, roughly ages 8 to 14

    Opens the lesson during a scheduled learning block, at home or in a classroom. Motivated by seeing the next step arrive and knowing how far along the sequence they are.

Where the flows were breaking.

We mapped the path customers actually took, then redrew it. Four changes did most of the work.

The redraw went through three states: the site as it stood in April, the corrected paths in May, then a reorganization around hubs after a walkthrough surfaced account-type branches we had collapsed too early. The hub model is the one we delivered.

User flows

The four changes.

  1. 01

    Discovery ignores sign-in

    The catalog is the same object whether or not you have an account.

  2. 02

    Content links to product

    A podcast episode about fractions reaches the Math-U-See level that covers them.

  3. 03

    One checkout

    Purchase and upgrade both terminate in one checkout instead of three.

  4. 04

    The dashboard can sell

    An existing customer adds to the product without leaving it.

Three sites became one path.. From the delivered user-flow board, Jul 2024
05

Interface

The structure, drawn.

Everything below is the architecture above, drawn. The panels are working components running on Demme’s own colors and type, so resize the window and they reflow.

The megasite home. The real home page, running on Demme’s own colors and type, with the navigation played out across desktop, signed-in, and mobile states. The reel is clicking the real header. Pause it, take over, open anything yourself.
The Math-U-See subject page. The subject page is where the sequence principle becomes layout: the crest, the Primer-through-Zeta ladder in order, the free first three lessons, and the placement tool as the primary call.
The Digital Toolbox. A lesson is a step in a sequence, not a card in a feed, so the portal shows what came before, what this lesson asks for, and what unlocks next. Parent, instructor, and student sign into the same screen, and only the controls change with the role. Orange marks the ones only an instructor sees.
06

System

What the principles turned into.. Everything above is an argument about how Demme teaches. Below is what that argument produced: four values, a character, three pillars, and one set of color, type, and spacing decisions that both the website and the product read from. One note on scope: Demme already owned its logotype and the "e" monogram, and we did not redraw them. The system sits underneath the identity Demme has used for three decades.
Four colors, and a job for each one.. Blue, green, orange, and violet, held under role names: product screens ask for the role, not the color, so Demme can retune the palette without touching a screen. Orange is the instructor signal, which is why it stays scarce in marketing. The full palette lives in the brand book.

One family for the work, one face for the welcome.

A curriculum publisher writes two kinds of sentence: the lesson a student works through, and the welcome a parent reads once while deciding whether to trust it. Most brands buy a second typeface for the second job and let the two drift.

We gave the work one family and the welcome one face. Inter carries lessons, marketing, buttons, and data rows, so a heading on a Digital Toolbox screen and a heading on a landing page are the same object. Bree Serif appears only where the brand speaks in its own voice. Mono is data alone: timestamps, level indices, prices.

Inter for the work, Bree Serif for the welcome.. The two ends of the range, in the real faces. The interface and kicker roles between them, and the full scale, live in the brand book.
Section library Live at wrkhrs.co
Eight sections build every page.. Every page on the site composes from this library. Each tile is the live component, scaled down; open one to walk through it at full size.
Mobile top bar Live at wrkhrs.co
Six iterations, one working frame.. Top bar zero through five, rebuilt as live components. Three is the frame the team tested against: Subjects, Support, and Shop reachable with one thumb while the drawer holds the depth.
Curriculum first. Software second.
Voice pillar · Design System (Beta), 2024

Cut from the full case study at wrkhrs.co/work/demme-learning

From
Abraham Garcia
Studio
Charleston, South Carolina
Email
abe@wrkhrs.co
Phone
(202) 550-7569
Studio site
www.wrkhrs.co
LinkedIn
in/thehonestape