Hatchet Hill Barbecue
Website with a tray builder and pickup ordering
A site for a Texas barbecue joint in Fort Worth: meat by the pound laid out on a butcher-paper tray, sides, pickup at a set time, a catering calculator and a live “open till” line.
Problem :
Texas barbecue is sold by the pound, and a first-time guest has no idea how much brisket feeds six. Meat runs out by evening, so pickup has to be tied to a time, and catering requests usually start with a long exchange of emails about prices.
Solution :
The menu turns into a tray: every half pound of meat lays its own slice on pink butcher paper (brisket with bark, ribs with the bone, sausage links, pulled lamb, half chicken, the weekend-only dino rib). A guest counter carries the pitmaster’s tip of half a pound per person, and a bar shows whether the tray is enough. Sides come in 8 or 16 oz, the Add button turns into a counter in place, and checkout offers only real pickup days and times with Fort Worth tax and the total. Catering prices the buffet per guest from the number of meats and sides and writes the email to the catering manager with the estimate already in it.
My Role :
Art direction, design, texts and build: the brand language (wine, butter and sage, a narrow grotesque with a script wordmark), the tray drawn in SVG, the ordering logic and two first screens.
Process :
I started from how people order at a barbecue counter, drew each cut as its own shape so the tray reads at a glance, tied the pickup days to the opening hours (Thursday to Sunday, today only while there is more than an hour left), then tuned every block for phones first and checked the motion on Android and iPhone.
Outcome :
A page that answers “how much should I take” before the guest asks: the tray fills up, the weight and total roll over in the bar at the bottom, and pickup is booked for a time the pit is actually open. Two first screens (a full-bleed table shot and a script wordmark over a tall tray photo), a header that says whether the pit is hot right now and soft smoke rising over the first screen.
Tech Stack :
Next.js (App Router) + TypeScript, hand-written CSS with no UI kit, fonts through next/font. Opening hours, the live status line and every time slot are calculated in the browser in the venue’s own time zone (Intl API), so the page is right for a visitor anywhere. Animations use only transform and opacity, reveals start on a double requestAnimationFrame and nothing loops forever, so motion runs the same on Android and iPhone. Hosted on Vercel.
