"Beekman Cold Brews"
Website Case Study
Overview
Description
This project involved the design and development of a five-page small business brochure website using the MODX CMS platform. The site was developed for “Beekman Cold Brews,” a fictitious indie coffee shop located on the Beekman Street Arts District in Saratoga Springs, New York.
Goals
Develop a fast-loading, high-performance small business website that reflects the creative atmosphere of the Beekman Street Arts District in Saratoga Springs. The front-end user interface incudes a presentation layer which contains UI components from the Foundation 6 CSS framework, as well as atomic custom utilities for spacing and padding. Alpine.js, a relatively new minimalistic JavaScript framework was mostly used for interactivity.
Use of Generative AI
Many generative AI tools were used to help assist with the creation of content throughout this project. All of the images were developed using Adobe Firefly, while a substantial portion of the text was generated with ChatGPT.
Project Scope
Desktop/Mobile Website, Branding
Key Features
- Custom MODX theme built with reusable chunks, snippets and templates
- Dynamic menu navigation using the Wayfinder snippet
- Foundation 6 responsive grid system
- Custom utility CSS layer inspired by Tailwind syntax
- 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 on the media wall section of the "Beekman Cold Brews" 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 Beekman Cold Brews. (See Appendix)
Design Process
Logo/Typography
Color Palette
#20202e
#cd594b
#23344f
#34bdb0
#1d7891
#1779ba
#fdb471
#fff7ec
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 "Beekman Cold Brews" website in both dark and light modes which displays based on the settings of the user's operating system.)
(Reusable, PHP-based MODX snippets were used for the dynamic display of images and titles throughout the site in the top hero area.)
Challenge
In many popular web content management system (CMS) platforms, such as WordPress, the front-end architecture
often must be planned around existing themes or visual site builders, such as Divi or Elementor. Even in projects which
utilize custom themes and custom fields, front-end developers often must work around the constraints of the selected CMS platform.
The challenge for this project was to build a CMS-driven site that retained the flexibility and performance of a custom-coded front-end.
Solution
The Beekman Cold Brews site was built using the MODX CMS, a lightweight, content management framework that allows developers to construct pixel-perfect custom themes without having to rely on excessive plugins or templates. The design system combines the flexible X-Y grid and UI components from the Foundation 6 framework with a custom spacing and padding utilities layer that largely replicates the syntax (ie. u-my-4, u-pt-3) of popular atomic frameworks like Tailwind CSS. This hybrid approach combines the benefits of traditional, component-based frameworks which allow for rapid prototyping, while also being able to take advantage of the high levels flexibility and customization allowed by utility-based frameworks. For interactivity, Alpine.js, which is often referred to as “a more modern, lightweight jQuery,” was chosen because of its minimal structure which was appropriate for a project of this type.
Results
The project ultimately produced a lightweight custom design system that combines Foundation’s modular grid and components with a small “micro-Tailwind” utilities layer for spacing and layout control.
View ProjectVideo Presentation
Appendix
The formatted JSON-LD schema organizes structured data for Beekman Cold Brews (ie. hours, location, phone, email, description) to help AI-based tools develop direct responses to queries.
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://www.colinneal.com/beekmancoldbrews#organization",
"@type": "Organization",
"name": "Beekman Cold Brews",
"url": "https://www.colinneal.com/beekmancoldbrews/",
"logo": "https://www.colinneal.com/beekmancoldbrews/assets/images/logo.png",
"sameAs": [
"https://www.facebook.com/beekmancoldbrews",
"https://www.instagram.com/beekmancoldbrews",
"https://www.x.com/beekmancoldbrews",
"https://www.tiktok.com/@beekmancoldbrews",
"https://beekmancoldbrews.bsky.social"
]
},
{
"@id": "https://www.colinneal.com/beekmancoldbrews#localbusiness",
"@type": "CafeOrCoffeeShop",
"name": "Beekman Cold Brews",
"description": "Located in the arts district in Saratoga Springs, New York, Beekman Cold Brews
is your go-to stop for craft coffee and community vibes. We blend bold brews with local flair.",
"image": "https://www.colinneal.com/beekmancoldbrews/assets/images/logo.png",
"logo": "https://www.colinneal.com/beekmancoldbrews/assets/images/logo.png",
"url": "https://www.colinneal.com/beekmancoldbrews/",
"telephone": "518-761-5555",
"email": "hello@beekmancoldbrews.com",
"priceRange": "$$",
"servesCuisine": [
"Coffee",
"Cold Brew Coffee"
],
"knowsAbout": [
"Cold Brew Coffee",
"Specialty Coffee",
"Coffee Roasting",
"Local Coffee Culture",
"Saratoga Springs Coffee"
],
"brand": {
"@id": "https://www.colinneal.com/beekmancoldbrews/#organization"
},
"areaServed": [
{
"@type":"City",
"name":"Saratoga Springs"
},
{
"@type":"AdministrativeArea",
"name":"Saratoga County"
}
],
"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": "19:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Sunday",
"opens": "10:00",
"closes": "17:00"
}
],
"address": {
"@type": "PostalAddress",
"streetAddress": "80 Beekman Street",
"addressLocality": "Saratoga Springs",
"addressRegion": "NY",
"postalCode": "12866",
"addressCountry": "US"
}
}
]
}