Design-Based Research Capstone

San Diego Lab Rats

Lab Rats teaches hands-on science to grades K through 8 with real scientists in Carlsbad. Their programs are strong, but the site repeats itself and hides what parents need most. We are rebuilding its structure, navigation, and styling so programs, pricing, and support are easy to find.

Project board Open on GitHub
Round 1
Planned
Project Leads Aryan, Raymond, Pranay

Architecture and Navigation

One home for every piece of content, and a shorter menu

✓ Each block of content gets one page; copies become links
✓ Top menu cut to five items, with Enroll kept the most visible
✓ Six main sections: Home, Programs, Schedule and Pricing, Support, About, Donate and Contact
Site map Navigation bar Links instead of copies

About

The site grew instead of being planned, so the same content shows up in several places. Giving each piece one home stops the repeats and lets the menu shrink.

Impact

Parents see each fact once, in one place
Enroll is easy to find
Follow Issue #8
Round 2
Planned
Project Leads Aryan, Raymond, Pranay

Style Layer and Program Pages

Write the styles once and build the program page once

✓ One shared style layer with a real type scale and clean HTML
✓ One program page layout, reused for all four programs
✓ Pricing, schedule, scholarships, and charter funding shown up front
Shared styles Program page template Semantic HTML

About

Every program gets the same layout so parents can compare them. Scholarships, which are barely mentioned today, get a clear spot next to pricing.

Impact

Every page looks like part of the same site
Families can find scholarships and charter funding
Follow Issue #8
Round 3
Planned
Project Leads Aryan, Raymond, Pranay

Fluid Layout and Motion

Works at every screen size, with quiet motion

✓ Layout adjusts smoothly from phone to laptop
✓ More space between sections
✓ Light motion that never slows down reading
Responsive layout Subtle transitions

About

This round starts only after the first two hold up, so spacing and motion are added once and reach every page.

Impact

Reads well on any device
Follow Issue #8
Exploring
Exploring
Project Leads Aryan, Raymond, Pranay

New Ideas We Want To Try

Rough versions first; we keep what works

✓ Comparison Row: weigh two programs side by side
✓ This Month Strip: what is running right now
✓ Program Accents: a light color per program
✓ Three Step Path: from curious to enrolled
Programs index Accent colors

About

Ideas we will prototype before committing to them.

Impact

Faster ways for parents to compare and decide
Follow Issue #8

Strengths vs Problems

What already works, and what gets in a parent's way

Works: many programs under one organization, a published 2023–24 impact report, and charter funding accepted.
Problem: the address and philosophy section are repeated across pages.
Problem: press logos are shown but link to no articles.
Problem: scholarships are mentioned but never explained.

The Direction

Four goals behind every change

Fluid: flexes at every width.
Better CSS and HTML: one style layer, clean markup.
Less cluttered navigation: five items, no repeats.
New architecture: one home for every piece of content.

Following Along

Where this work is tracked

Live Site Their Programs Impact Report 2023–24 GitHub Issues — issue #8 Frontend Repo Backend Repo Sprint Board