Case study 01 / Hospitality / Portland, OR
ProperPint
Three neighborhood taprooms that had to stay three neighborhoods. One system, no house style flattening the rooms.
properpint.beer →
The brief
A neighborhood bar, three times over. Same hospitality, three genuinely different rooms.
01
Find the nearest one fast. Woodstock, Multnomah Village or Slabtown, with directions one tap away.
02
Let each room keep its own material story. Black walnut, Oregon white oak, mahogany and copper.
03
Move off WordPress without losing the local search ranking three taprooms depend on.
Cream, gold,and the wool
Pulled off the Pendleton wool and the brass in the rooms, not out of a palette generator.
#F4F3EF
Cream, the page
#404040
Charcoal
#AA9247
Gold, every action
#2F3A2E
Forest
#DDDDDD
Divider
Warm cream instead of white, so the room photography reads as evening rather than showroom. Gold is reserved. It only ever appears on something you can press.
A proper pint
Montserrat · 700 · 66/50/36/24px · +0.04em
Every heading is Bold with positive tracking. Four sizes, nothing between.
If it's a pint, it's a true pint. We pour what we charge for.
Jost · 400 · 16/24 body · 20px quiet link
A geometric sans for everything that is read rather than scanned. One size, one leading, on every page.
Four parts,three rooms
A card, a table, a button, a divider. Swap the photography and the room changes; the site doesn't.
Woodstock
Neighborhood taproom, long tables, the original room.
A tall 683×1024 portrait with the location badge hung off the bottom-left corner, overhanging the frame by 50px.
Hours
- Monday2–9 PM
- Tuesday2–9 PM
- Wednesday1–11 PM
- Thursday1–11 PM
- Friday12 PM–12 AM
- Saturday12 PM–12 AM
- Sunday12–11 PM
Seven rows, one source. The same file feeds the visible table and the OpeningHoursSpecification in the structured data, so Google and the door never disagree.
Gold for the thing you want them to do, charcoal for the second option, a plain underlined Jost link for everything else. 3px radius, 0.08em tracking, and directions clicks fire as conversions.
A proper pint
Same cut, every section change.
One SVG path, a 10:1 sliver, flipped and rotated per use. It is the only non-rectangular thing on the site. Every section change is this same 0.6° cut rather than a new color block.
Underthe hood
Off WordPress, onto typed content files. The local rankings came with it.
Framework
Next.js on Vercel, migrated off a WordPress install. The old export still sits in the repo for reference.
Content
Locations, hours and FAQs are typed content files. One location object drives its card, its page, its map and its schema.
Local SEO
Per-location LocalBusiness and FAQ structured data, canonical URLs and a dedicated page per neighborhood.
Tracking
Directions, tap list and phone taps are tagged at the button, so the owner sees which room people are actually driving to.
Tap lists
Untappd holds the live list per location. We link out rather than rebuild a menu that changes daily.
Events
Events stay on Facebook, where the regulars already are. The site points at them instead of duplicating a calendar.
Three rooms, one system.