Helping a coffee roaster show up online, not just in person
End-to-end web design for Provecho!, a Latina-founded San Diego coffee roaster.
TIMELINE
April–June 2026 (10-week studio project)
ROLE
Product Designer
Design Systems & Brand
User Research
TOOLS
Figma
Claude
FigJam
Astro
TypeScript
Matter.js
Vercel
Sally Moon
Rayleen Marquez
Alela Rathsasombath
/
Problem
One site, four jobs, and a list of things we couldn't show
/
Research
Nine interviews and a competitor teardown pointed at two buyers
Before any screens, the team ran nine user interviews and I led the competitive analysis I presented to the class, pulling apart roasters like Stumptown, Sey, and Blue Bottle alongside culturally-confident brands like De La Calle and Fritz Coffee. Two patterns did the most work.
First, specialty buyers are skim-readers who want a shop they can scan in seconds, but they will read an origin story if you put it in front of them, so depth has to be available without being in the way. One interviewee, a professor who reorders beans every six weeks, flat out rejected formal subscriptions ("being contacted is annoying") but accepted a light restock nudge.
Second, wholesale partners decide values-first, price-second, they read your about page before they ask what a bag costs. Those findings told me the site needed two different buying mindsets designed in parallel, a decisive "buy this now" path and a slower "I want a relationship with this brand" path, not one funnel pretending to serve both.
/
Process: the Coffee Quiz
"I don't know what to order" into a quiz, not a funnel
/
Process: the design system
With four people building toward roughly 38 screens, consistency was going to break unless something held it. So I built the design system first: color and type tokens as Figma variables, a 4-point spacing scale, and a small set of components, with the bean card as the workhorse reused across Home, Shop, Subscribe, and product pages.
I also made the brand calls the system rested on. The founders' paint-chip palette had a blue called Regatta that read too "ocean" for a coffee brand, so I reverted to a deeper navy that felt grounded. I locked a display face for hero moments, set the motion to stay quiet (scroll fades, gentle hovers, no autoplay), and pitched a small animated logo character for the homepage that the client approved.
Building the system before the screens meant a fix in one place propagated everywhere, and it let the team move fast without drifting. It also taught me where systems leak: a footer bug quietly shipped to every page before we caught it, which is exactly the kind of thing a component system is supposed to prevent and exactly why you still QA the whole file.
/
Process
A 38-screen Figma prototype is a proposal. I wanted to know whether the system actually held, so I rebuilt the whole site in Astro and deployed it.
The constraints I had designed around turned into real pages. The cafe page still has no menu and no prices, because the client's drinks rotate and they did not want them copied, so it leads with a strip answering a walk-in visitor's first four questions, hours, address, whether dogs are welcome, and where to park. Nothing to maintain, and never out of date. The bag-size confusion from their old Shopify theme became one product page per coffee with the format and price stated plainly, and the cart hands checkout to their real store rather than pretending to take money.
The wholesale page is the one I changed most between the prototype and the build. In Figma it was a long qualifying application, closer to a job application, asking who you currently roast with and why Provecho. Building it, I cut it to three fields and a sentence promising a real reply from Karem or Gerardo. Two people run this roastery. A form that interrogates a potential partner before anyone has said hello is a form designed for a company with a sales team, and asking less turned out to be the more confident move.
Building it also forced decisions the prototype never had to make. White backgrounds that looked fine in Figma measured 1.08 to 1 against the cream cards sitting on them, which is not a separation at all, so cream became the only light background in the system and white was demoted to cards and controls, always carrying a hairline. I self-hosted every font rather than pulling from Google, because a coffee roaster's website should not hand a third party a record of who visited it.
The one I would defend hardest is a fix I refused to ship. Clicking between pages caused a single-frame blink, and the textbook cure is one line of CSS. It is valid, Chrome runs it, and it left the cart page permanently frozen after the add-to-cart redirect, with the quantity buttons dead. I reproduced it three times out of three, solved the blink a slower way with prerendering instead, and left a comment in the stylesheet explaining to the next person why the obvious line is not there. A fix that trades a one-frame flicker for a broken checkout is not a fix.
/
Final Design
The wordmark falls into a pile, and you can pick it up.
The first thing you see is a full-screen navy stage where the nine letters of ¡Provecho! drop under gravity and land in a heap at the bottom. You can drag them around. They stay where you leave them.
It started as a brand problem rather than a motion one. Provecho means the thing you say before a meal, closer to "enjoy" but warmer, and the founders' whole advantage is how they are in person. A static logo lockup could not carry that. Something you can put your hands on could.
The detail that took the longest is the one nobody is meant to notice. The letters collide on their real outlines, not on rectangles. Each glyph carries a collision hull sampled from the traced wordmark at build time, so the pile nests the way cut-out paper letters would, with the tail of the P tucking under the o instead of resting on an invisible box. The exclamation mark caused the worst of it: the traced glyph paints nine separate shapes, and my first version fused them into one rigid body, so the dot was welded to the stick and grabbing it did nothing. The stick and the dot are now two independent pieces, and the dot falls, settles, and drags on its own.
If your system asks for reduced motion, none of this runs. Not a disabled animation, not a shortened one. The physics engine never starts, and the letters render as a fitted row along the bottom. The point of the hero is the brand's warmth, and there is no version of warmth that is worth making someone motion-sick.
/
Reflection
OTHER
PROJECTS
Get in touch