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
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.
/
Final Design
Every rule I'd seen as a problem became a design decision I'm proud of.
The no-menu cafe page became a basics strip (hours, address, pet-friendly, parking) answering a local visitor's top three questions in the first viewport, plus a "what we serve" set of categories and a live Instagram embed that shows what's actually pouring today. No menu to maintain, and never out of date.
The bag-size confusion from the old site became one product with a format selector that updates price and photo, the same pattern reused in the cart, so there's a single mental model for "this coffee, choose your size."
The wholesale page, with no partners to show, leads with values and runs an application built like a job application, asking "who do you currently roast with" and "why Provecho," so it filters for fit instead of collecting price-shoppers.
The team built the full mobile prototype around these, roughly 38 high-fidelity screens, with placeholder photography standing in where the shoots were still pending, and the design system proving the patterns hold across all of them. The client signed off on the brief these decisions came from.
/
Reflection
Content is the bottleneck, not the design
The biggest shift from class projects was that the constraints came from the client, not the rubric, and designing around a missing piece usually made the page better than filling it would have.
The lesson I'll carry is that content is the bottleneck: the design moved fast, but real photography, pricing, and the documentary all had to come from one busy owner, so we worked with honest placeholders and a plan to swap them, never a page we couldn't confirm the client could actually fill. If I ran it again I'd lock the design system and confirm who owns each piece of content in week one, before anyone designs a screen.
To pressure-test the riskiest flows, I planned moderated think-aloud sessions on the two paths most likely to break, finding a coffee through the quiz and a local visitor checking cafe basics, the parts where a wrong guess costs the most. For a first real client, getting from nine interviews to a signed brief and a system that held across 38 screens is the end-to-end loop I want to be doing.
OTHER
PROJECTS
Get in touch