Web Development
The Engineering & Science Academy
From zero online visibility to a credibility platform for legislative briefings and federal grant applications
A comprehensive web development project for a pre-college hybrid aerospace academy in Maryland — combining funder-credibility design, WCAG 2.2 AA accessibility, interactive course pathway visualizations, and structured data for an organization with meetings on the Governor's calendar but no functional website.
Client
TESA (tesa4space.org)
Industry
Education / Aerospace
Services
Web Dev, Design, SEO, Strategy
Timeline
2025–2026
The Client
The Engineering and Science Academy (TESA) is a pre-college hybrid school offering credit-bearing aerospace courses for high school students in Maryland. It was founded by Lt. Commander Diallo Wallace (USN, Ret.) — a Space Camp Hall of Fame inductee, former Naval Academy aerospace engineering professor, NASA Airborne Astronomy Ambassador, and Mission Commander at the Flashline Mars Arctic Research Station in the Canadian Arctic.
TESA addresses a specific problem: 60% of first-year engineering students drop out of their programs. The academy gives high school students rigorous, hands-on aerospace education before college — including industry-recognized certifications in MATLAB, Ansys STK, and project management (PMI CAPM).
The Challenge
When TESA approached Wolff Creative, the organization had exceptional leadership and growing institutional momentum — meetings with the Maryland Governor's office, the Commerce Secretary, TEDCO, and aerospace industry partners were already on the calendar — but no functional digital presence to support any of it.
1
Zero search engine visibility. The domain wasn't indexed for any search terms — not even exact domain searches. A Google search for “tesa4space.org” returned nothing.
2
No conversion architecture. No calls to action, no inquiry forms, no clear next steps for any visitor.
3
Broken fundamentals. Missing images, broken contact methods, a typo on the homepage, and dense unstructured text with no visual hierarchy.
4
No compliance foundation. No accessibility standards, no privacy policy, no security headers — a liability for an organization pursuing federal funding under Section 504 obligations.
5
No analytics. No Google Analytics, no Search Console, no way to measure anything.
Beyond the technical gaps, the project carried a strategic complexity: TESA needed to speak to fundamentally different audiences at the same time — federal funders, state legislators, aerospace industry partners, and eventually parents and students. The website had to work for all of them, starting with the audiences in the room right now.
Before & After
- ×Not indexed by Google
- ×No accessibility compliance
- ×No security headers
- ×No analytics or tracking
- ×No conversion paths
- ✓Fully indexed with structured data
- ✓WCAG 2.2 AA compliant
- ✓Full security header suite
- ✓GA4 + Search Console
- ✓90+ mobile PageSpeed score
The Approach
TESA's real-world timeline drove the project strategy. The founder had meetings with state legislators in weeks, federal grant deadlines in February, and a first student cohort targeting Fall 2026. Every decision was mapped to those milestones.
1
Phase 1: MVP
Funder & Legislative Credibility
A professional, fully compliant website ready to serve as a digital leave-behind when the founder walked into meetings with the Governor's office.
- ✓SEO fundamentals from day one
- ✓WCAG 2.1 AA accessibility
- ✓Founder credentials as primary trust signal
- ✓Security headers and compliance foundation
2
Phase 1.5: Enhancement
Interactive Depth for Grant Deadlines
Added interactive depth and content targeting February grant deadlines with richer program information and community engagement features.
- ✓Interactive course pathway component
- ✓Scholarship program pages with Stripe donations
- ✓News system with MDX and category filtering
- ✓WCAG 2.2 AA upgrade + structured data markup
What Was Built
Information Architecture
Restructured from a handful of flat pages into a full sub-page architecture: About (overview, founder, approach, faculty), Program (catalog, workflows, pedagogy, summer), Scholarships, Partnerships, News & Media, and Contact — each with in-page navigation.
The Homepage
Hero with floating imagery from real-world work — Mars missions, classroom instruction, naval aviation — with Maryland flag elements that resonated with state legislators. Founder credentials as the primary trust signal, with audience-segmented CTAs below the fold.
Interactive Course Pathway
27-course curriculum visualized across four stages — Foundation, Exploration, Specialization, and Certification — with course counts by STEM discipline and horizontal card layouts with toggle filtering by discipline.
Engineering Design Workflows
Interactive workflow diagrams for Aeronautics and Astronautics tracks showing the step-by-step engineering design process, with hover/click interactions revealing images from the actual tools and environments students use.
SEO & Structured Data
Complete SEO foundation: XML sitemap, robots.txt, meta titles and descriptions for every page, clean URL structure, and JSON-LD structured data using EducationalOrganization, Person, and Course schemas. Google Search Console configured and submitted.
Accessibility & Compliance
Built to WCAG 2.2 AA as a foundational requirement for federal funding. Semantic HTML, full keyboard navigation, 4.5:1 contrast ratios, alt text, accessible forms, 44px touch targets, and a dedicated accessibility statement page.
The Result
Desktop homepage with mobile-responsive view
Interactive course catalog with detail modals
Career outcomes with salary data and pathway visualization
4-step learning process with pedagogical approach
Industry partnerships with MathWorks, Ansys, and more
Founder credentials as the primary trust signal for legislators and funders
Technical Decisions
Every architecture choice was made to serve the project's real constraints: a solo founder running a pre-revenue organization, no dedicated IT staff, infrequent content updates that still need to look polished, and compliance requirements driven by federal funding aspirations.
Technology Stack
FrameworkNext.js 14 (App Router)
LanguageReact 18, TypeScript
StylingTailwind CSS 3.4 (Inter + Montserrat)
ContentMDX with gray-matter
DatabaseDrizzle ORM + PostgreSQL (Railway)
AnimationMotion (Framer Motion)
EmailResend (contact + registration)
AnalyticsGoogle Analytics 4
HostingRailway
Structured DataJSON-LD schemas
Why These Choices
- •
Next.js over WordPress
Structured data, performance, accessibility compliance, and custom interactive components — achieving this in WordPress would have required extensive plugin management
- •
MDX over a CMS
Single content author publishing infrequently — content versioned alongside code with zero external dependencies to maintain
- •
Framer Motion for animations
Hero floating imagery and page transitions needed polish without sacrificing Core Web Vitals performance
- •
Railway PostgreSQL + Drizzle
Managed Postgres removes database administration from the client's responsibilities entirely, with type-safe queries via Drizzle ORM
Managing Scope in a Fast-Moving Project
TESA's momentum — partnership meetings, legislative briefings, conference presentations, grant deadlines — created legitimate needs that didn't exist when the project started. Several significant deliverables fell outside the original scope:
Stripe donation integration
Payment processing for three named scholarship funds added when the founder needed to accept donations immediately
Microsoft 365 administration
M365 Education subscription troubleshooting and shared mailbox setup — IT support blocking the site launch
Railway deployment & database
Configured Railway hosting with managed PostgreSQL, removing all infrastructure administration from the client's responsibilities
Navigation restructuring
Expanded from 5–6 pages into full sub-page architecture with in-page navigation — substantially more complex than planned
Hero design exploration
Multiple iterations with Maryland flag SVG animations, floating photo arrays, and parallax depth effects — the flag element resonated strongly with state representatives
News system evolution
Grew from a simple blog into a full content hub with MDX, category filtering, video integration, and student testimonial pages
Every out-of-scope item was documented and presented transparently at invoicing. The key was maintaining trust through transparency — not letting scope expansion go unspoken, but also not nickel-and-diming a client whose mission I believe in during a critical growth phase.
Results
0 → Indexed
Search Visibility
90+
Mobile PageSpeed Score
WCAG 2.2
AA Compliance
5
Industry Partners Featured
Legislative Credibility
The site served as a digital leave-behind during meetings with Maryland state legislators, the Governor's office, the Commerce Secretary, and the CEO of TEDCO. The founder reported the website made a significant difference in those conversations.
Compliance Posture
Went from nonexistent to WCAG 2.2 AA accessible, with full security headers, privacy policy, cookie consent, and accessibility statement — positioning TESA for federal grant applications.
I can not say thank you enough. I had the vision of what was in my head and you brought it to life!
Lt. Commander Diallo Wallace, USN (Ret.)
Founder, The Engineering and Science Academy
Lessons & Approach
This project reinforced principles I bring to every mission-driven and institutional website:
Audience-first architecture
When your site needs to serve legislators, funders, industry partners, and families, information architecture is the hardest design problem
Compliance as foundation
For organizations pursuing federal funding, accessibility and security aren't features — they're table stakes
Credibility compounds
A polished website becomes a force multiplier in every meeting, grant application, and partnership conversation
Scope transparency builds trust
Documenting every out-of-scope item and presenting it honestly strengthens the client relationship
Building Something That Matters?
If you're an educational institution, nonprofit, or mission-driven organization that needs a digital presence matching your ambition, let's talk.