one mobile bar.
45 minutes.
a friend runs a mobile drink trailer. this is everything that happened between "can you help" and "it's live" in one sitting. not a template. not a mockup. the actual site.
22
revision rounds, most turned around same-day with several items at once
3×
full rebuilds as the direction changed: elegant → botanical/fun → chunky type
11
font pairings tried side by side (five elegant, six chunky) before picking one
2
layouts shipped: full desktop plus a real 390px mobile build, not a squished desktop
WHAT GOT DESIGNED
▸ hero, occasions strip, services, menu, how-it-works, testimonials, booking, footer
▸ three "fun" directions on the canvas: postcard hero, limes & cherries, taped polaroids
▸ color system pulled from her photos, checkerboard motif, grain on the burgundy
▸ menu built three ways: list, editorial spread, final two-panel with cup slots & sticker lockups
▸ booking as a two-step flow: pick a package (Bar Cart · Soda Bar · Coffee Bar · Full Pour · Custom), then the form, "text me" button & deposit note
▸ logo sheet knockouts, fruit hands, cup-in-hand, trailer cut from a dark background (tires recovered), sticker sheet cleaned up
WHAT GOT SHIPPED
▸ production HTML/CSS, responsive, rolling marquee announcement bar
▸ working booking form (Netlify) + thank-you page
▸ privacy & terms pages, SEO/OG tags so it previews right in texts
▸ accessibility: real labels, focus states, reduced-motion respected
▸ compressed assets, draft-watermark toggle for proofing, launch checklist
▸ plain-language copy rewrite, sample testimonials, package tiers written out
no hourly. ever.
i don't charge by the hour. i'm fast, and a clock would just punish you for that. you pay per product — a site, a page, a brand kit — so you know the number before we start and you get it ASAP without a meter running.
as custom vinyl.
DMs → order builder.
a small custom sticker shop, owner prints every order in-house, most orders coming in through DMs. the job: make ordering feel as easy as the big sticker sites without making it feel like them. about 2.5 hours, plus a 20-minute coffee break to go get a coffee.
WHAT GOT MADE
▸ brand kit built out from the existing logo: colors, type, logo exports, favicons, app icons, social graphics, a brand guide
▸ skate-inspired design: chunky type, bright color, retro desktop windows, a folder-style portfolio, a skateboard that grinds a rail across the ordering steps
▸ six pages: home, our work, how to order, our story, FAQ, contact — plus a thank-you page
▸ a working sticker order builder: finish, size, quantity, live sample price, upload up to four designs, automatic die-cut border preview, order review, printable job sheet. enforces the shop's real rules (order minimum, size range)
▸ pricing lives in one file so the approved table is a quick swap; automated tests on the pricing and border logic
▸ all the copy: home, about, product, FAQ, contact, shipping, artwork help, customer emails, interface messages, social bios, search descriptions
▸ three concept sticker projects to fill the portfolio until real client work is cleared
▸ netlify forms contact with the topic pre-selected from wherever you clicked ("rush order," "sticker sheets")
HOW IT WENT
▸ questionnaire first: business, branding, products, pricing, ordering, shipping, policies. facts before design.
▸ the owner sent a screen recording toggling a border in photoshop. watched it frame by frame; that's how the auto-border tool got specced. researched the plugins, wrote up the plain-english options.
▸ planned netlify + shopify, then found the old site already ran woocommerce. flagged it — they might already be paying for checkout. laid out both routes, built the design to work with either.
▸ images went from ~2 MB to under 200 KB each; the phone-shot production videos from 13 MB to 2.5 MB, in a format that plays everywhere, with a fallback for low power mode
▸ nothing on the site promises what the business doesn't do yet. proof approval and a free-shipping threshold stay off until they're real, wording ready to switch on.
▸ phone-first QA: fixed the overlapping nav, squeezed closing section, small tap targets, hard-to-read labels
▸ handoff: editable site, brand kit, copy, tests, and a doc mapping every section to the file that controls it
STAGE
interactive prototype + content package done. live checkout, approved pricing, saved orders and proof approval are the next phase.
TOOLS
HTML, CSS, JavaScript, no framework. netlify + netlify forms. FFmpeg for the video. claude as the AI build partner for research, code and QA — i drive, it types.
presenter noteshow i work