Objectives
- Elevate the aesthetic to reflect the brand’s eerie, elegant identity.
- Streamline booking via FareHarbor integration.
- Improve accessibility and mobile usability.
- Optimize performance and SEO readiness.
- Provide tools for client independence and simple updates.
Process
Discovery & Planning
I audited the existing site and identified inconsistent branding, navigation issues, unoptimized images, and accessibility gaps. I set priorities around aesthetic cohesion, accessibility compliance, and streamlined bookings.
Design & Development
I implemented a dark, cinematic theme with high-contrast typography and atmospheric imagery. I rebuilt the homepage and tour pages for clarity, embedded FareHarbor booking modals, and applied WCAG-friendly markup and ARIA improvements.
Iteration & Feedback
I delivered updates in stages across July and August: copy/spacing refinements, favicon variants, footer restructuring, and mobile testing. This iterative approach kept the project on time and on budget.
Outcome
- Atmospheric & branded — a polished aesthetic reflecting the company’s identity.
- Accessible & responsive — improved usability across devices.
- Conversion-focused — clear CTAs and seamless booking flow.
- Maintainable — structured for ongoing client updates and maintenance.
Key Metrics & Impact
- Faster load times through optimized assets.
- Improved accessibility: screenreader support and verified contrast.
- Streamlined booking flow with fewer clicks to conversion.
- Elevated SEO readiness for D.C. tourism keywords.
Tools & Tech
React, HTML, CSS, JavaScript; integrations: FareHarbor, Formspree; Hosting: Verio, iPage; Accessibility: WCAG best practices.
Reflection
Designing for a ghost tour business required sensitivity to tone — eerie but elegant. By balancing storytelling with usability, the site better supports bookings and visitor engagement.