Case study · e-commerce · Shopify · client work

The store looked like every other coffee site online.
I rebuilt it into a brand people actually come back to.

A full redesign and Shopify rebuild for an artisanal coffee roaster, spanning the whole storefront: editorial product pages, a three-tier subscription, brewing guides, limited drops, merch, and a bean-level traceability tool. Solo on design and the Liquid front-end, working inside locked brand assets. The client reported a +20% conversion lift after launch.

Role: Solo designer + Shopify front-end Client: Bean 2 Ground Coffee (paid) Platform: Shopify · Liquid + sections Scope: Full brand storefront · 16 page types Result: +20% conversion · client-reported

The problem

An artisanal roaster with an out-of-the-box store

Bean 2 Ground had built a real reputation in the cup: small-batch roasting, sourcing relationships with growers, the kind of detail that earns a premium over the bag in a supermarket. The online store said none of that. It was a default Shopify theme with square product photos, a name, a price, and an add-to-cart. Customers arriving from Instagram or word-of-mouth landed on a page that could have been selling any coffee, anywhere.

On paper the brief was a redesign. The real job was making a templated theme behave like a premium brand across the entire store, from the first product page to the subscription, the brewing guides, and the limited drops, without reshooting the photography, redoing the wordmark, or rewriting the brand voice. All three were already locked and approved, so the work had to happen inside those guardrails, in Liquid, on Shopify.

Visual

The store read like every other coffee site

An out-of-the-box Shopify theme with square product photos, a name, and a price. Nothing on the page told you the roaster sourced single-origin lots, roasted in small batches, or was worth a premium over the bag on a supermarket shelf.

UX

Product pages did not sell the product

Coffee is a sensory, story-driven purchase, built on origin, varietal, process, roast level, and brew method. The PDP gave customers a photo and a price. The buying decision was happening elsewhere, on Google, Instagram, and YouTube, because the product page had none of the context that earns the click.

Retention

Nothing brought the customer back

A roaster lives on reorders, but the store was built for one-off purchases. No subscription worth choosing, no account worth logging into, and no reason to re-engage between bags. Every sale started from zero.

The constraint

The brand assets were locked, so the design had to work around them rather than replace them

The photography library, wordmark, and brand voice were already produced and signed off before the engagement began. The roaster had paid for the shoot, approved the visual identity, and written the copy line that runs across the site. None of it was on the table. The job was to take a templated Shopify theme and a fixed set of brand assets and make the resulting store feel like a real brand across every page, through layout, type, IA, and the editorial templates that surround the existing assets. Every decision below was made inside that boundary.

The decisions

Three calls that shaped the storefront

These are the points where I had credible options to choose between. For each one I've laid out what was on the table, why I picked what I did, and what it cost.

Decision 01

Turn the product page into a salesperson.

The options on the table

  1. 01 Keep the default PDP: photo, name, price, add-to-cart. Fastest to ship and lowest visual risk, but the page would still say nothing about the product.
  2. 02 Add a single description paragraph below the photo. Modest improvement, but customers still had to leave the page to find origin, roast, and brewing context.
  3. 03 A full editorial PDP: a From Volcano to Cup origin story, a What You'll Taste tasting-note set, a four-step process strip, a grind selector, and a subscribe-and-save option, all built as a Liquid section the roaster edits per blend.

Why this one

Research kept surfacing the same thing in every interview. Customers weren't leaving because they didn't want the product. They left because they didn't know enough to commit. Coffee at a $22-a-bag price point has to teach before it can sell. The editorial PDP turned the page from a transaction receipt into the salesperson the brand didn't have in the room: the origin story sets the scene, the tasting-note cards give people language for what they'll get, the four-step process answers how it's made, and the subscribe-and-save option catches the highest-intent moment without a hard sell. It all lives inside a Shopify section the client edits per blend, so the format scales without me writing a new template each time.

The trade-off

PDPs got long. Scroll depth went up, which made the above-the-fold question real, because the add-to-cart had to sit in the right spot at every breakpoint or the page would bury the action. The mobile-sticky add-to-cart and tighter image cropping on small screens both came out of that. I'd take it, since the alternative was a page that loaded fast and converted no one.

Decision 02

Split the site into three jobs: shop, learn, and chase scarcity.

The options on the table

  1. 01 Mirror the old IA (Home, Shop, About, Contact) and bolt new things on as they come. Familiar, but it flattens a catalog, a content library, and scarce drops into one undifferentiated shop.
  2. 02 Run one big Shop page with filters and tuck everything else into submenus. Better than a flat list, but it buries the brewing content and the limited drops that do the brand-building and the urgency.
  3. 03 A focused three-pillar nav: Coffee, Brewing Guides, and Limited. The catalog filters by roast and origin, the guides act as a discovery and trust engine, and Limited is the scarcity channel. Subscriptions run across all three as the retention path.

Why this one

Customer interviews showed a sharp split. About a third of buyers knew exactly which bag they wanted, and two thirds were browsing. One undifferentiated shop served neither group well. The three pillars give each one a clear job: the decided buyer filters the catalog by roast or origin and checks out, the browser reads a brewing guide and learns enough to trust the roaster, and the enthusiast watches Limited for a micro-lot drop. Keeping those separate meant each surface could be designed for the way that audience actually shops.

The trade-off

Three content streams to keep alive instead of one. The catalog, the guides, and the drops all need feeding, which is an ongoing cost the roaster has to carry rather than a one-time build. I'd still make the call, because collapsing them into a single shop would have buried the two things that build the brand and create urgency.

Decision 03

Make the subscription the spine, and give buyers a reason to come back.

The options on the table

  1. 01 Sell one-off bags only. Simplest to run, but every sale starts from zero and the roaster lives order to order.
  2. 02 Add a basic subscribe-and-save toggle on the PDP. Captures some recurring revenue, but there's no account to manage and no reason to engage between deliveries.
  3. 03 A full retention layer: three subscription tiers, an account with loyalty points and one-click reorder, and a Trace Your Beans tool that turns a bag's batch code into the farm's story, so the brand keeps earning attention between shipments.

Why this one

A roaster's economics are in the second, fifth, and tenth bag, not the first. Coffee is the canonical repeat purchase, so the redesign had to do more than win one checkout. Subscribe-and-save sits on the PDP to capture the highest-intent moment as recurring revenue, the account gives subscribers somewhere worth logging into (loyalty progress, saved coffees, reorder in a tap), and Trace Your Beans makes the product itself a reason to come back, since the batch code on the bag opens the exact farm, grower, and lot it came from. All of it runs inside Shopify.

The trade-off

It's a lot more surface: subscription management, an account area, loyalty, and a traceability page that needs a farm story for every new batch. That last part is an ongoing content cost, not a launch task. Worth it because retention is where a premium roaster actually makes its money, and a one-and-done store leaves most of that on the table.

What I built

A full storefront: catalog, subscription, content, and a traceability tool, all inside Shopify

What shipped, grouped roughly by the job each surface does: sell the coffee, teach the craft, and keep people coming back. All of it real Shopify Liquid the roaster runs from admin.

  • Editorial product pages

    Every blend gets a From Volcano to Cup origin story, a What You'll Taste tasting-note set, a four-step process strip, a grind selector, and a subscribe-and-save option. Built as a Shopify section so the roaster edits each one in admin without touching code.

  • Filterable collection

    The full catalog with roast and origin filters (Light, Medium, Dark, Espresso, Single Origin), quick view on each card, and a From soil to cup sourcing strip. Browsers narrow it fast, and decided buyers add to cart in two taps.

  • Three-tier subscription system

    Essentialist, Ritualist, and Connoisseur tiers with a choose-blend, set-frequency, roast-and-ship flow and pause-or-cancel anytime. The retention spine the whole store leans on.

  • Account, loyalty, and reorder

    A dashboard with the active subscription, last order, saved coffees, and loyalty points that count toward a free bag. Order history is a clean status table with one-click reorder.

  • Brewing Guides hub + long-form guide

    Six methods, from Pour Over to Moka Pot, as a discovery engine, plus a seven-step long-form Pour Over walkthrough that opens on the 1908 Melitta Bentz story. Content that earns trust before the catalog asks for the sale.

  • The Craft Kit + gear upsell

    A curated gear product page (dripper, kettle, scale, filters) with kit-type options, an inside-the-kit breakdown, and coffee pairings. The brewing content and the gear feed each other.

  • Limited Drops

    The scarcity channel: active micro-lot releases with stock framing (fewer than 200kg of each) and a sold-out archive that makes the next drop feel worth waiting for.

  • Trace Your Beans

    A batch-code tool that turns the code on the bag into the farm behind it, with the grower, the lot, the process, tasting notes, and a map. The product becomes a reason to re-engage.

  • Merch storefront

    Apron, tote, mug, barista case, cap, and bundles, treated as a fast lane with minimal copy and product-led visuals, in the same brand voice as the coffee.

  • Our Story + the people

    Born From Obsession, the roastery's origin, and the hands behind the cup, from the farmer to the green buyer to the head roaster. The brand's trust anchor.

  • Sustainability page

    The sourcing commitments with the numbers behind them: farmers paid above Fair Trade, direct farm partnerships, compostable packaging, and 48-hour roast-to-door, plus the certifications.

  • Affiliate program

    A 15% partner program with a 30-day cookie, monthly payouts, and a two-minute application, aimed at creators, bloggers, cafés, and brewing enthusiasts.

  • Shopify build + responsive system

    Every screen shipped as real Shopify Liquid templates, sections, and snippets, not a Figma export, with a checkout reassurance pass and a responsive layer tuned per breakpoint. The roaster has run the whole store from admin since launch.

What I owned

Design end-to-end, plus the Shopify front-end

Discovery & UX

Ran the problem space end to end

There was no PM and no separate research lead. I interviewed customers and prospects, audited the analytics for drop-off, and built the three-pillar IA (Coffee, Brewing Guides, Limited) with subscriptions running across it, around how people actually shop for coffee rather than how the catalog was stored.

Visual design

Designed within locked brand assets

The photography library, wordmark, and brand voice were already produced and signed off. I designed every page and template inside those guardrails, from the editorial product pages to the subscription tiers, the brewing guides, and the traceability tool.

Shopify front-end

Liquid + theme implementation

Every surface shipped as real Shopify Liquid templates, sections, and snippets, not Figma exports handed to a developer. The editorial PDP, the subscription flow, the account and loyalty area, and the Trace Your Beans tool were all built inside Shopify's customization layer.

Conversion + retention

PDP storytelling + the subscription spine

The two places the work earns its keep. The product pages turn context into purchase confidence and the +20% lift, and the subscription, account, and traceability layer turn a first order into a habit.

The redesign

Sixteen page types, one brand the roaster can run

Bean 2 Ground homepage
Homepage: the FRESH COFFEE front door, featured blends, the brewing teaser, and the journal.
Bean 2 Ground collection page
Collection: the full catalog filtered by roast and origin, with quick view and a sourcing map.
Bean 2 Ground editorial product page
Product page: a From Volcano to Cup origin story, What You'll Taste cards, a four-step process, grind selector, and subscribe-and-save.
Bean 2 Ground subscription tiers
Subscriptions: three tiers (Essentialist, Ritualist, Connoisseur) with choose-blend, set-frequency, and pause-anytime.
Bean 2 Ground brewing guides hub
Brewing Guides: six methods as a discovery engine, plus the gear kit upsell.
Bean 2 Ground long-form brew guide
Brew guide: a seven-step Pour Over walkthrough that opens on the 1908 Melitta Bentz story.
Bean 2 Ground Craft Kit product page
The Craft Kit: a curated gear bundle with an inside-the-kit breakdown and coffee pairings.
Bean 2 Ground limited drops
Limited: the scarcity channel, with active micro-lot drops and a sold-out archive.
Bean 2 Ground bean traceability tool
Trace Your Beans: a batch code turns into the farm, the grower, and the lot behind the bag.
Bean 2 Ground merch storefront
Merch: the apron, tote, mug, and gear, in the same brand voice as the coffee.
Bean 2 Ground our story page
Our Story: Born From Obsession, the roasters and the farmers behind the cup.
Bean 2 Ground sustainability page
Sustainability: the sourcing commitments and the numbers behind them.
Bean 2 Ground affiliate program
Affiliate: a 15% partner program with a two-minute application.
Bean 2 Ground account dashboard
Account: active subscription, last order, loyalty points, and saved coffees.
Bean 2 Ground order history
Order history: twelve orders, a status table, and one-click reorder.
Bean 2 Ground contact page
Contact: a direct form, the details, and a short FAQ.

The texture

The surface I spent the most time on was the product page, the moment between curiosity and a confident click

The PDP decides whether a $22 bag of coffee feels like a treat or a risk. The default Shopify template treated it as a transaction surface, just photo, name, price, and add to cart, and it lost customers there in volume. What I obsessed over wasn't the animation, the typography, or the photography. It was the order in which a curious customer learns enough to feel confident. The origin story comes first, because From Volcano to Cup is the hook. The What You'll Taste cards come next, because they give the customer language to repeat back to themselves, like it's the one with caramel and dark chocolate. The roast and process details come after, for the buyers who scan more than they read. The subscribe-and-save option comes last, once the case is already made, so it reads as an offer rather than a pop-up.

Each block had to earn its scroll. The order took several rounds. The tasting-note language alone took a few passes, because it had to read like real tasting notes rather than marketing, more caramel, dark chocolate, and coconut than bold, smooth, and satisfying. And the subscribe-and-save option had to sit below the point where the buyer is already convinced, not above it, because a customer who's ready to commit shouldn't have to wade past a subscription pitch to do it.

On the surface it was just a long product page, but it's what separated a store that listed coffee from one that actually sold it.

Impact

What the rebuild delivered

+20%
Conversion rate uplift after launch
client-reported · Shopify analytics
16
Page types designed and built
shop, subscription, guides, drops, account, and more
3
Subscription tiers on one retention spine
Essentialist · Ritualist · Connoisseur
1
Templated theme rebuilt into a full brand storefront
design + Liquid, solo

The rebuild shipped as a complete Shopify storefront, not a single redesigned page: editorial product pages, a three-tier subscription, brewing guides, limited drops, merch, an account and loyalty area, and a Trace Your Beans tool, all inside Shopify's customization layer. The roaster has kept running it from admin since launch, editing blends, batches, and drops without touching code. The +20% conversion lift is the headline, and the quieter win is a store built to earn the second order, not just the first.

Shipped solo as the designer and Shopify front-end developer. The brand assets (photography, wordmark, and voice) were produced and approved by the client before the engagement. Everything from research and IA through visual design and the Liquid templates the screens render from was mine. The +20% conversion lift is client-reported from Shopify analytics after launch, not an A/B-tested measurement.

What this project reinforced about e-commerce UX.

For products that earn a premium, like coffee, wine, or anything sensory, the storefront isn't one high-leverage page, it's a system. The product page has to teach before it can sell, but the subscription, the account, and the traceability tool are what turn a first order into a habit. Customers don't bounce because they don't want the product. They bounce because they don't know enough to feel confident, or because nothing brought them back. Building for both the first confident click and the tenth reorder is what moved the numbers.

Why the designer-who-codes matters here.

Shopify is a strict platform. A theme isn't a blank canvas, since every section, snippet, and metafield has its own rules. Designing the editorial PDP, the subscription flow, and the Trace Your Beans tool without holding the Liquid would have meant a beautiful Figma file and a developer telling me which half of it had to come out. Holding both layers kept the decisions grounded in what Shopify could actually do, so tasting notes became real metafields, subscription tiers became real selling plans, and a batch code became a real lookup. The design and the build were the same conversation.

What's next.

With the subscription and traceability layers live, the next move is a guided blend-finder that turns the brewing-guide content into a short quiz, so a first-time visitor who doesn't know what they want gets pointed at the right bag in a minute. After that, a wholesale and café track, since the affiliate program already shows there's an audience that wants to sell the coffee, not just drink it.