Award-winning Ecommerce UX for Regional Coffee Roaster
Coffeebar is a California-and-Nevada specialty coffee roaster with cafés in Truckee, Reno, and beyond — a brand whose customers are loyal in a category where loyalty is rare. We rebuilt the identity, designed a Shopify storefront engineered around storytelling instead of around SKUs, and shipped a site that won Shopify's 2017 Commerce Award for Best UX Through Storytelling against a global field of D2C brands.
Live since 2017
A specialty coffee brand whose stories didn’t live online.
Coffeebar grew the way the best regional coffee brands do — café by café, neighborhood by neighborhood, with a fanbase that knew the staff by name and the playlist by ear. The brand was alive everywhere except online. The website was a transactional storefront divorced from everything that made the cafés worth visiting in the first place: the ideology, the locations, the music, the people, the editorial point of view that the team had spent a decade earning.
The growth pressure was real. New locations opening, wholesale demand from cafés up and down the West Coast, and a coffee subscription business that customers kept asking for but the existing site couldn’t support. The visual identity also needed to scale — the signature orange-brown-tan was strong but it had to extend across new merchandise, café signage, retail displays, and packaging without losing the human, hand-touched quality that made it Coffeebar in the first place.
The brief was twofold. Refresh the brand identity so it could carry the company through three more years of growth without a rebrand. And design the e-commerce experience around the story instead of around the SKU — the kind of site where a customer arrives looking for a bag of beans and leaves with a subscription, the playlist queued up, and a plan to drive to Truckee for the weekend. Best UX Through Storytelling, before we knew we were going to win an award named exactly that.
Lead with the story. The order page comes after.
A refreshed identity that scaled with the brand.
Re-crafted the visual system around the signature orange, brown, and tan — extended with a pronounced secondary palette that captured the comfort-and-energy duality of café culture. Hand-drawn typography and illustrated badges became the ownable assets that traveled from website ornamentation to clothing patches to retail point-of-purchase without losing the human touch.
Information architecture engineered for the brand.
Reorganized the storefront into three intuitive product categories — Coffee, Goods, Tools — with PDPs that lead with story, photography, and sourcing context before the spec table. Special sections for Photos, Playlists, News, and Menus surfaced the cultural surface area of the brand alongside the commercial one. Locations got first-class treatment in the IA, not relegated to a footer link.
Custom video, cinemagraphs, and motion that earned the bandwidth.
Conducted on-location and studio photography across multiple cafés, plus cinemagraphs and timelapses that captured the working rhythm of the roastery. Custom video components built into the homepage and PDPs — designed to be the first thing a visitor sees, not a buried marketing asset. Eye-catching transitions tuned for the storytelling-first feel.
Shopify, but built for editorial-led commerce.
Shopify chosen for back-end ergonomics and analytics depth, but tuned aggressively for editorial-led merchandising. Sticky-header PDPs with embedded sourcing stories, multi-location inventory display, subscription path with frequency control, and a checkout designed for the high-AOV bundle (beans + grinder + filters) that defines the specialty-coffee buyer.
Merchandise and retail design as brand surface area.
A complete retail line — clothing, pins, mugs, patches — built using the new badge system and hand-typography. Sold both in cafés and on the new D2C storefront, with point-of-purchase displays designed to convert café customers into online buyers. The merchandise carried the brand into the customer's daily life beyond the cup.
A storefront tuned to be visited, not just transacted.
Optimized for time-on-site rather than just conversion — because the storytelling thesis only pays off if visitors actually engage with it. Page-load speed under 1.4s, video that auto-plays without auto-blasting, and an editorial cadence (playlists, blog posts, location features) that gave returning visitors a reason to come back. The site became a destination, which is what won the Shopify Commerce Award.
We didn’t sell coffee online before. Now the website tells the story — locations, ideology, the playlist, the people — and the order page is just where people land after they’ve decided we’re their brand.
Engagement summary · Coffeebar × Commence Studio
Numbers that matter for editorial-led commerce.
Brand, storefront, and retail — in production.
We didn't sell coffee online before. Now the website tells the story — locations, ideology, the playlist, the people — and the order page is just where people land after they've decided we're their brand.
Like what you see? Let's talk about your commerce stack.
A 14-day strategic diagnostic — we audit your current stack, identify the friction worth fixing first, and ship a phased plan with sized investments. Fully credited toward an engagement if we move forward together.
What you walk away with
- ✓A measured map of every friction point in your current commerce flow
- ✓Three phased options — minimum, considered, comprehensive
- ✓Sized investments and timelines, no aspirational ranges
- ✓A clear "don't hire us if…" section. We mean it.
