Website case study
Crust & Cream Website
How we turned marketing research into a working restaurant website with Claude, Codex MCP, and Vercel.
The missing story in the previous case study was the website itself. This version focuses on the path from brand and marketing insight to information architecture, AI-assisted design exploration, Codex-assisted implementation, and the live build published on Vercel.
Marketing research
Claude design
Codex MCP
My role
I defined the website goals, information architecture, content hierarchy, UX priorities, and visual/brand guardrails; then used AI tools as collaborators to accelerate design and coding decisions.
From architecture to shipped site
What changed in this case study
Earlier, the story was too broad and too marketing-heavy. This version is specifically about the website: why it needed to exist, how research shaped the page structure, how AI tools helped us move faster, and how the final coded experience was shipped.
01
Marketing research set the website strategy
The website was not designed as a generic restaurant brochure. It came out of marketing thinking: how to reduce first-order hesitation, how to explain the brand difference quickly, and how to support two key intents at once - book a visit or place an order.
Research lens
The site had to answer: what makes this brand different, what should a first-time visitor do, and how do we turn curiosity into action?
UX decision
Instead of one catch-all page, we framed the experience around clearer intents and lower decision fatigue.
Marketing insight
The brand difference is not only pizza; it is feel-good comfort, sourdough credibility, and calmer premium tone.
Website result
That insight became structure, copy hierarchy, and conversion design, not just aesthetics.
02
The IA in Figma became the build blueprint
The key architecture frame in the file turned the website into five purposeful pages: Home, Menu, Why It Feels Better, Visit & Book, and Order Online. Each one had a job, a primary action, and a reason to exist.
Home
Introduce the brand quickly and route visitors to Book or Order.
Menu
Reduce decision fatigue and guide the first basket.
Why It Feels Better
Translate process into credibility and felt benefit.
Visit & Book
Collapse local discovery into one high-intent page.
Order Online
Clear doubt quickly, then hand off to partners.
03
Claude helped shape the first design direction
Claude was useful in the early design phase because it helped translate the website intent into a first-pass structure and tone. I used it to pressure-test how the brand should feel on the page, how sections should be grouped, and how to balance appetite, proof, and conversion without making the site feel noisy.
What Claude helped with
Early page framing, content grouping, narrative flow, and visual direction prompts rooted in the brand strategy.
What I still owned
The IA, what mattered most, what to keep or reject, and the final decisions on UX, tone, and layout priorities.
Why this mattered
It made exploration faster, but the judgment layer stayed human - especially around positioning and conversion clarity.
04
Codex MCP turned the architecture into a coded website
Once the structure was clear, I used Codex MCP as the implementation partner. The important part is that Codex was not guessing the product. It was building from a defined IA and brand direction. That let the code stay aligned with the strategy instead of becoming generic landing-page output.
05
My role during coding: not just prompting, but steering
This part matters because AI-assisted implementation still needs product design leadership. I was not only asking Codex to make screens. I was deciding what the website should optimize for, what content should stay visible, which routes should exist, and how the brand should feel once it became code.
I defined
the page goals, route structure, section order, tone, conversion priorities, and what “feel-good premium” should mean on the web.
Codex accelerated
component writing, navigation, route setup, themed UI assembly, and iterative implementation once the intent was clear.
I reviewed and corrected
copy emphasis, UX hierarchy, page purpose, and whether the implementation still matched the original IA and brand logic.
What this proves
AI became a copilot, not a substitute for product judgment. The outcome depended on clear direction and strong review.
06
The site went live on Vercel
Publishing mattered because it closed the loop from research to architecture to implementation. This project did not stop at speculative design. The website was built, deployed, and made public.
Deployment
The final website was published on Vercel as a live, accessible build instead of remaining a static concept.
Live URL
crust-and-cream.vercel.app
Why that matters
It demonstrates a complete workflow: brand strategy -> IA -> AI-assisted design -> AI-assisted code -> shipped product.
In plain terms
This case study is now about the website as a real product outcome: marketing research shaped the intent, the Figma IA shaped the structure, Claude helped accelerate the early design direction, Codex MCP helped turn that direction into code, and Vercel made it live. My role was to hold the strategy and UX together through every one of those steps.