Design exhibit · concept art direction
Ten proposed experiences, made visible
Each panel below sketches one key experience of the proposed multisite network — and every panel links to a working, clickable demo of that experience elsewhere in this prototype. Imagery marked as reference comes from the organization's real public pages; see Visual Research for sources and ownership.
Network tier
Network home
The network front door carries the shared mission, enrollment entry points and network-wide stories. One codebase, one design system — with real classroom photography setting a warm, human tone instead of stock abstraction.
Reference photo © Achievement First — source: achievementfirst.org/network-home · concept illustration only
Network home · concept
Every school. One connected community.
Regional tier
Regional hubs with local accent
Each state hub keeps the network frame but speaks with its own accent color, calendar and news. The accent is a single design token — switch region and the entire page re-themes, which you can try live in the header's region switcher.
New York City
Neighborhood schools, citywide ambition.
Connecticut
Rooted in our towns and cities.
Rhode Island
Small state, connected classrooms.
School tier · elementary
Microsite: warm & community-first
An elementary campus leads with its motto, its own crest and a gentle regional accent. Family resources sit up front; network policy inherits quietly underneath.
Reference photo © Achievement First — source: achievementfirst.org/our-schools · concept illustration only
Sample Academy South
“Every voice in the circle.”
School tier · high school
Microsite: bold & aspirational
A high school microsite can lean bolder — deeper tones, pathways content, athletics and alumni stories — while inheriting the same navigation, enrollment policy and accessibility baseline as every other campus.
Reference photo © Achievement First — source: achievementfirst.org/careers · concept illustration only
Sample Academy West · High school
Scholars, leaders, neighbors.
Family journey · step 1
The school finder
Search, grade chips and region filters respond instantly, with the result count announced to screen readers. Filters live in the URL, so a family can share or bookmark exactly the view they found.
Governance
Publishing & propagation
One announcement flows network → region → school, and a campus can apply a local override that wins. The Governance Lab lets the committee publish, propagate and walk a mock approval chain themselves.
Network editor → Regional review → Network comms → Approved
Multilingual
English & Spanish from day one
Multilingual is planned as structure, not a bolt-on: parallel content paths, translated navigation and a language choice that follows the family into enrollment. Sample translations are marked for professional review.
- Buscar una escuela
- Familias
- Empleos
- Apoye nuestra misión
- Noticias
- Inscripción
Navigation, content paths and enrollment steps — not an afterthought plugin.
Family journey · step 2
Enrollment, in three calm steps
The preview shows a progress indicator, plain-language steps and an honest ending: the prototype stops before any real application, exactly where production would hand off to the network's approved system.
- 1. Your family
- 2. Student & grade
- 3. Review
Which grade level?
Hand-off to the approved lottery system — no data stored here.
Accessibility
WCAG 2.2 AA as a baseline
Accessibility is demonstrated, not just promised: this prototype already ships skip links, focus-visible rings, aria-live result counts and reduced-motion support. Production adds automated axe-core checks in CI plus manual review.
Color contrast
Every token pair checked against AA ratios in light contexts.
Keyboard-first
Skip link, visible focus rings and 44px minimum targets.
Screen-reader semantics
Landmarks, live regions for results, labelled progress steps.
Reduced motion
Animations collapse under prefers-reduced-motion.
Delivery
The CI/CD workflow behind it all
Every change travels the same auditable path: branch, review, automated quality and accessibility gates, a shareable preview, client sign-off, then a monitored production release with a documented way back.
Feature branch
isolated, ticketed
Review + automated gates
typecheck · tests · axe
Preview & client UAT
sign-off required
Production deploy
monitored, with rollback
Keep exploring
Every panel above is clickable somewhere in this prototype.
This exhibit is the map; the rest of the site is the territory. Reference imagery remains the property of Achievement First and is shown for concept illustration only — nothing here implies approval by the organization.