THE BARBARA JOHNS STORY

BACKGROUND

The Barbara Johns Project is a groundbreaking interactive education platform that tells the powerful story of Barbara Johns, a 16-year-old student who led a strike against school segregation in 1951. The educational documentary was created by Richard Wormser and the Robert Russa Moton Museum, with website development by Urban Insight, and financial support from the National Endowment for the Humanities, Institute of Museum and Library Services, New York Life Foundation, and Virginia Humanities, the project transforms documentary content into a digital, inquiry-based learning experience for middle and high school students.

Richard Wormser, Peabody Award-winning filmmaker of "The Rise and Fall of Jim Crow," sought to bring the legacy of Barbara Johns to the classroom in an engaging, digital-first format. Johns led her classmates in a student strike at Moton High School in Farmville, Virginia, which became one of the cases folded into Brown v. Board of Education. 

THE CHALLENGE

The team needed to develop a visually rich, fully interactive website experience. The project included a large amount of multimedia data including short films, audio, illustrations, and interactive features. The web app had to be highly engaging to capture the attention of students while teaching them the rich history of Barbara Johns to inspire civic action. The site needed to include:

• Three multimedia-rich chapters with short films, archival materials, and student-led activities
• Interactive learning features such as…
  • Comparison Slider
    • Drag a handle left or right to visually compare two overlapping images
  • Flashcards
    • Answer a multiple choice question on each flashcard. Repeat incorrect answers until they are all answered correctly.
  • Interactive map
    • Click pins on a map to reveal a history of that area in the form of images and text.
  • Drag & Drop Timeline Quiz
    • Given a series of events, drag and drop each event into the correct order. Emphasizes cause and effect of each event.              
• 20+ templates with custom behaviors
• Custom audio interface sound effects and ambient loops
• WCAG 2.1 accessibility compliance
• Flexible integration of content created in PowerPoint and Figma
• Hosting and QA coordination with external university and partner teams

THE SOLUTION

Urban Insight developed the modular platform as a frontend web application using Next.js and Decap CMS. The site features over 220 pages and incorporates more than 250 images, 25 embedded videos, downloadable lesson plans, animated transitions, and interactive exercises. Key innovations include:

• Audio and visual storytelling, including narrated quotes, ambient soundscapes, and voice-over timelines
• Tablet & Chromebook-first responsive design, intentionally excluding mobile for focused classroom use
• Seamless integration with YouTube for media assets
• An in-repo, minimal, dev-only CMS architecture using Decap CMS that runs exclusively in local development environments for security, maximum sustainability, and minimal maintenance
• Technical discovery and architecture planning that helped secure NEH grant funding

The website launched on time and on budget, with all QA issues resolved before release. The experience is optimized for the classroom, built with accessibility and interactivity at its core. Urban Insight earned a 5.0 rating from the project’s lead Producer on Clutch for their work.