Overview
Find Octave is a modern mental health platform designed to connect patients with effective, affordable therapy. The project required a highly trustworthy, accessible, and fast interface to minimize friction for users seeking care. My role focused on architecting a scalable front-end solution that balanced high-performance engineering with flexible content management for the marketing team.
Technical Decisions & Architecture
1. Static Site Generation (SSG): Gatsby vs. Next.js At the time of development, we evaluated the landscape of React frameworks. We strategically chose Gatsby over Next.js to prioritize pure Static Site Generation (SSG).
- The Reasoning: While Next.js offered a hybrid approach, Gatsby’s ecosystem was significantly more mature for generating static assets at scale. We needed a "blazing fast" pre-rendered HTML delivery system to ensure near-instant load times for patients and maximum SEO discoverability. Gatsby provided the best-in-class tooling for image optimization and build-time data fetching, which was critical for a content-heavy healthcare platform.
2. Flexible Content Modeling: Prismic "Slices" To avoid engineering bottlenecks whenever a landing page needed an update, we implemented Prismic CMS using their "Slice" architecture.
- The Solution: Instead of hard-coding page layouts, I built a library of reusable React components mapped to Prismic Slices. This allowed the non-technical marketing team to not only edit text but to dynamically re-order page sections and construct entirely new landing pages from scratch. This architecture turned the CMS into a powerful page builder while maintaining strict design consistency.
Key Contributions
- Scalable Component Library: Developed a modular architecture that ensured UI consistency across the "Find a Therapist," "Insurance," and "About" flows.
- Performance Engineering: Implemented aggressive image optimization, code splitting, and resource pre-fetching to handle media-rich therapist profiles without compromising speed.
- Accessibility & SEO: Enforced WCAG compliance and semantic HTML structures, ensuring the site is usable by all individuals (crucial for healthcare) and ranks highly in organic search.
Project Outcomes
The re-architecture delivered a robust platform that meets the high demands of healthcare users:
- 90+ Lighthouse Scores: Achieved green-zone scores (>90) across Performance, Accessibility, Best Practices, and SEO.
- Mobile-First Speed: Secured near-instant page loads on mobile devices via optimized static assets.
- Operational Efficiency: Drastically reduced turnaround time for marketing campaigns by empowering the team to build and reorder pages independently via Prismic Slices.
