"Birch & Glen"
Website Case Study
Overview
Description
This project involved the design and development of a six-page brochure site for the “Birch and Glen Wellness Spa,” a fictitious spa and facial treatment center located in downtown Glens Falls, New York (on the corner of Birch and Glen Streets). The site was constructed using the MODX CMS platform.
Goals
Develop a website that ideally reflects the needs of a lifestyle-oriented business that serves a mid-sized
Upstate New York community, as well as several tourist enclaves throughout the surrounding region (Lake George, Bolton Landing, Saratoga Springs).
To help accomplish this goal, a series of highly flexible, modular and minimalist technologies were chosen for the architecture of the site;
Foundation 6 (CSS presention layer), Alpine.js (for interactivity) and MODX (for content management).
Use of Generative AI
Throughout the project, AI-based tools were used to help assist in the creation of content:
- All imagery on the site was developed using Adobe Firefly, an AI-based image generator
- The text and copy throughout the site were mostly created using ChatGPT. A substantial advantage to using chatbots and LLMs for text creation is that often within seconds copy can be generated for deliverables which can be tailored to specific, targeted audiences or demographics.
Project Scope
Desktop/Mobile Website, Branding
Key Features
- Custom MODX theme built with reusable chunks and templates
- Dynamic menu navigation using the Wayfinder snippet
- Foundation 6 responsive grid system
- Custom utility CSS layer inspired by Tailwind syntax
- Color utilitues imported from Tailwind CSS
- Alpine.js powered UI interactions
- IntersectionObserver-based scroll animations
- Optimized image loading with loading="lazy"
- Structured data schema (JSON-LD) for AI search optimization
Role
Web Developer (Front-End Design/Programming)
(Lifelike images that were created using Adobe Firefly, an AI image generator, which appear throughout the "Birch & Glen Wellness Spa" website.)
AI Search Optimization
This project also included the use of Answer Engine Optimization (AEO) which involves structuring and formatting content for AI-based tools. A structured data schema was implemented in JSON-LD format (JavaScript Object Notation for Linked Data) to help LLM-based chatbots (ChatGPT, Gemin, Copilot), as well as voice assistants (Apple Siri, Amazon Alexa, Google Assistant) better understand and respond to user queries about information regarding Birch & Glen Wellness Spa.
Design Process
Logo/Typography
Color Palette
For this project, the entire suite of color utilities was imported from Tailwind CSS to help streamline the selection of colors.
tw-teal-950
tw-teal-900
tw-teal-800
tw-teal-700
tw-teal-600
tw-teal-400
tw-slate-100
tw-slate-50
tw-teal-50
During testing, the text-to-background color contrast ratios met AAA conformance levels, the highest rating under the Web Content Accessibility Guidelines 2.1 (WCAG 2.1) criteria which is often used to determine ADA compliance.
User Interface Design
(The home page layout of the "Birch & Glen Wellness Spa" website in both dark and light modes which displays based on the settings of the user's operating system.)
(Reusable MODX chunks were used for the dynamic display of images and titles throughout the site in the top hero area.)
Challenge
Build and design a small business website for a wellness spa with a customized aesthetic that avoids that avoids the generic, utilitarian template-driven appearance that is often associated with CMS-based websites.
Solution
The Birch & Glen Wellness Spa website was built using the MODX CMS, a content management framework that allows developers
to create custom themes with almost unlimited design constraints. The front-end interface was built upon the highly modular Foundation 6 CSS framework
with a custom spacing and utilities layer that large incorporates the syntax (ie. u-mt-4, u-pl-3) and functionality of atomic frameworks like Tailwind CSS.
In addition, for this project, the entire suite of color utilities from Tailwind CSS were imported to help streamline the workflow by allowing for color
combinations to quickly be generated from Tailwind’s extensive collection of 247 pre-defined swatches. All color swatches from Tailwind were scoped
(ie. c-tw-bg-blue-200) to avoid conflicts with the underlying Foundation 6 grid structure and components.
Results
Overall, this project reinforced the effectiveness of the hybrid approach of combining traditional, component-based frameworks, which allow for rapid prototyping, with atomic utility classes for spacing and layout control, as well as color selection, if desired.
View ProjectVideo Presentation
Appendix
The formatted JSON-LD schema organizes structured data for Birch & Glen Wellness Spa (ie. hours, location, phone, email, description, FAQ) to help AI-based tools develop direct responses to queries.
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://www.colinneal.com/birchandglen/#organization",
"@type": "Organization",
"name": "Birch & Glen Wellness Spa",
"url": "https://www.colinneal.com/birchandglen/",
"logo": "https://www.colinneal.com/birchandglen/assets/images/logo.png",
"sameAs": [
"https://www.facebook.com/birchandglen",
"https://www.instagram.com/birchandglen",
"https://www.x.com/birchandglen",
"https://www.tiktok.com/@birchandglen",
"https://birchandglen.bsky.social"
]
},
{
"@id": "https://www.colinneal.com/birchandglen/#localbusiness",
"@type": "HealthAndBeautyBusiness",
"name": "Birch & Glen Wellness Spa",
"description": "Located on the corners of Birch and Glen Streets in Downtown Glens Falls, New York,
Birch & Glen Wellness Spa is a calm, grounding space in the city's creative core. Our facials,
massage services, and private infrared sauna are designed to restore balance
and make you feel radiant.",
"image": "https://www.colinneal.com/birchandglen/assets/images/logo.png",
"logo": "https://www.colinneal.com/birchandglen/assets/images/logo.png",
"url": "https://www.colinneal.com/birchandglen/",
"telephone": "518-761-5555",
"email": "hello@birchandglen.com",
"priceRange": "$$$",
"knowsAbout": [
"Wellness",
"Spa Treatments",
"Massage Therapy",
"Facial Treatments",
"Infrared Sauna"
],
"brand": {
"@id": "https://www.colinneal.com/birchandglen/#organization"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "518-761-5555",
"contactType": "Reservations",
"availableLanguage": "English"
},
"areaServed": [
{
"@type": "City",
"name": "Glens Falls"
},
{
"@type": "City",
"name": "Queensbury"
},
{
"@type": "AdministrativeArea",
"name": "Warren County"
}
],
"geo": {
"@type": "GeoCoordinates",
"latitude": "43.3095",
"longitude": "-73.6440"
},
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday"
],
"opens": "09:00",
"closes": "18:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Friday",
"opens": "09:00",
"closes": "19:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Saturday",
"opens": "09:00",
"closes": "16:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Sunday",
"opens": "10:00",
"closes": "15:00"
}
],
"address": {
"@type": "PostalAddress",
"streetAddress": "Birch And Glen Streets",
"addressLocality": "Glens Falls",
"addressRegion": "NY",
"postalCode": "12801",
"addressCountry": "US"
},
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Spa Services",
"itemListElement": [
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/birchandglen/facials.html#service"
}
},
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/birchandglen/massage.html#service"
}
},
{
"@type": "Offer",
"itemOffered": {
"@id": "https://www.colinneal.com/birchandglen/sauna.html#service"
}
}
]
}
},
{
"@id": "https://www.colinneal.com/birchandglen/facials.html#service",
"@type": "Service",
"name": "Facial Treatments",
"serviceType": "Facial Treatment",
"description": "Customized facial treatments designed to cleanse, hydrate, and rejuvenate the skin.",
"provider": {
"@id": "https://www.colinneal.com/birchandglen/#localbusiness"
},
"url": "https://www.colinneal.com/birchandglen/facials.html"
},
{
"@id": "https://www.colinneal.com/birchandglen/massage.html#service",
"@type": "Service",
"name": "Massage Therapy",
"serviceType": "Massage Therapy",
"description": "Relaxing and therapeutic massage services designed to reduce
tension and promote wellness.",
"provider": {
"@id": "https://www.colinneal.com/birchandglen/#localbusiness"
},
"url": "https://www.colinneal.com/birchandglen/massage.html"
},
{
"@id": "https://www.colinneal.com/birchandglen/sauna.html#service",
"@type": "Service",
"name": "Private Infrared Sauna",
"serviceType": "Infrared Sauna",
"description": "A private infrared sauna experience designed to support relaxation,
recovery, and overall wellness.",
"provider": {
"@id": "https://www.colinneal.com/birchandglen/#localbusiness"
},
"url": "https://www.colinneal.com/birchandglen/sauna.html"
},
{
"@id": "https://www.colinneal.com/birchandglen/#website",
"@type": "WebSite",
"url": "https://www.colinneal.com/birchandglen/",
"name": "Birch & Glen Wellness Spa",
"publisher": {
"@id": "https://www.colinneal.com/birchandglen/#organization"
}
},
{
"@id": "https://www.colinneal.com/birchandglen/#webpage",
"@type": "WebPage",
"url": "https://www.colinneal.com/birchandglen/",
"name": "Birch & Glen Wellness Spa — Glens Falls",
"isPartOf": {
"@id": "https://www.colinneal.com/birchandglen/#website"
},
"mainEntity": {
"@id": "https://www.colinneal.com/birchandglen/#localbusiness"
}
},
{
"@id": "https://www.colinneal.com/birchandglen/#faq",
"@type": "FAQPage",
"isPartOf": {
"@id": "https://www.colinneal.com/birchandglen/#webpage"
},
"mainEntity": [
{
"@type": "Question",
"name": "How do I make a reservation?",
"acceptedAnswer": {
"@type": "Answer",
"text": "You can book your visit online anytime or call our spa for
assistance. We recommend reserving in advance, especially on weekends
and during the busy Lake George tourism season."
}
},
{
"@type": "Question",
"name": "Are walk-ins allowed?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Walk-in appointments are welcome when availability allows.
Because appointments can fill quickly, booking in advance is recommended."
}
},
{
"@type": "Question",
"name": "What should I wear to the spa?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Wear whatever feels comfortable. We provide robes
and slippers for every guest."
}
}
]
}
]
}