Elm Coffee Roasters
Subscription Flow Redesign
Redesigning the subscription experience for a Seattle specialty roaster — making it easier for coffee lovers to discover, customize, and commit to recurring deliveries with clarity and confidence.
Elm's Coffee
Roastery
E-commerce &
Subscription
Redesign
A UX/UI Case Study
MY ROLE
UX Designer & Researcher
ORGANIZATION
Elm Coffee Roasters
TIMELINE
3 Months · Sept–Dec 2024
TOOLS
Figma, FigJam, Canva
TEAM
Solo Designer, End-to-End
BACKGROUND
Project background
Elm Coffee Roasters is a specialty coffee shop and roastery in Seattle's Pioneer Square, known for light roasts, transparency in sourcing, and a minimalist aesthetic that reflects the craft behind every bag. With a loyal local following and a clean, distinctive brand, Elm has become a fixture of Seattle's specialty coffee scene.
While the existing website successfully communicated Elm's brand identity and product catalog, the subscription experience hadn't received the same level of care. The flow for discovering, customizing, and committing to a recurring coffee delivery was unclear — creating friction that discouraged sign-ups and left users uncertain about what they were getting.
This project focused specifically on redesigning the subscription flow — from initial discovery through plan customization to checkout and ongoing management. The goal was not to redesign the entire website, but to bring the subscription experience up to the same standard of clarity and intention that defines Elm's broader brand.
“How might we redesign Elm's subscription experience so that coffee lovers can discover, customize, and manage a recurring delivery with the same clarity and care that defines the brand?”
The existing experience created friction in key moments
Through research and review, several recurring challenges became clear. Users were not just looking for information — they needed confidence in their choice, clarity on pricing, and a smoother path to subscribing.
What we set out to achieve
Three research objectives guided the project — ensuring every design decision was grounded in real user needs rather than assumptions.
Who the experience is for
Elm's subscription audience spans loyal locals who already love the café and want recurring deliveries, curious specialty coffee drinkers exploring Seattle roasters online, and convenience-focused buyers looking for a flexible subscription they can adjust freely.
What these users share is a desire for clarity before commitment. They want to understand what they're getting, how much it costs, and how easily they can pause or cancel. For many, subscribing is an emotional choice — supporting a brand they believe in — and the experience needs to honor that trust.
Research revealed most users browse on mobile during short windows. The subscription flow needs to be fast, scannable, and trustworthy from the first interaction.
Research methods & approach
Five complementary research methods provided the foundation for the redesign — combining qualitative depth with behavioral and competitive data to ensure the subscription flow was grounded in real patterns, not assumptions.
The research phase spanned the first four weeks of the project. Each method was chosen to address a specific gap — from individual motivations and mental models to macro-level industry patterns and live usability friction within the existing subscription flow.
RESEARCH METHODS — DETAILED
Each method was selected to fill a specific knowledge gap. Together, they revealed how users discover, evaluate, and commit to coffee subscriptions — and where the current experience falls short.
Semi-structured interviews explored user needs, past subscription experiences, pain points, and desired features. Participants ranged from daily coffee drinkers to occasional specialty buyers, all based in Seattle. Sessions were conducted remotely and transcribed for thematic analysis.
Participants were asked to navigate Elm's existing website and complete three tasks: find subscription options, customize a plan, and complete a sign-up. Screen recordings captured navigation patterns, hesitations, and moments of confusion. Think-aloud protocol captured real-time decision-making.
A feature-by-feature comparison assessed subscription customization, pricing transparency, management flexibility, visual presentation, and mobile experience. Each competitor was evaluated on 8 criteria including online ordering, subscription availability, customer reviews, and language settings.
A survey distributed through coffee community channels gathered quantitative data on subscription habits, feature expectations, and willingness to pay. Questions covered frequency preferences, customization priorities, deal-breaker frustrations, and what would make participants more likely to subscribe.
Analysis of existing website data tracked user drop-off points, page engagement times, and navigation patterns. Particular attention was paid to the subscription funnel — from landing page through checkout — to identify where users lost interest or abandoned the process.
Research Summary
Click on any card to reveal key takeaways • Hover for emphasis
How Elm's subscription compares
A feature comparison across five Seattle-area roasters revealed clear gaps in Elm's subscription offering — particularly around subscription availability, customer reviews, and management flexibility.
← Scroll to compare →
| Online Ordering | Subscription | Café Atmosphere | Reviews | Languages | |
|---|---|---|---|---|---|
Elm Coffee(this project) |  |  | | | |
Caffe Vita | | | | | |
Seven Coffee | | | | | |
Kuma Coffee | | | | | |
- •All competitors offer online ordering, establishing it as a table-stakes feature
- •Only Caffe Vita offers subscriptions among the analyzed competitors
- •Customer reviews and language settings are inconsistently implemented
- •Elm has an opportunity to differentiate through subscription features
What the research revealed
Across all five methods, six interconnected findings emerged. Each one pointed to a specific design opportunity within the subscription flow — and together they formed the strategic foundation for the redesign.
A clearer path from discovery to subscription
The redesign strategy centered on three principles: reduce friction in the subscription flow, increase transparency at every decision point, and ensure the new experience felt native to Elm's existing brand and website design system.
The information architecture was refined to make subscription options more discoverable within the existing site structure — surfacing the "Elm Club" subscription more prominently under Shop without disrupting the broader navigation. Card sorting validated how users expected subscription content to relate to the product catalog.
The user task flow was rebuilt around the persona of Jordan Lee — a convenience-focused coffee enthusiast who values eco-conscious sourcing and flexible subscriptions. The improved flow introduced flexible frequency options (weekly, bi-weekly, monthly), streamlined checkout with clear subscription management, and visible decision points from browsing through confirmation.
Three Core Design Principles
01 — REDUCE FRICTION
Streamline the subscription flow with clear steps and minimal barriers
02 — INCREASE TRANSPARENCY
Show pricing, terms, and options upfront at every decision point
03 — BRAND CONSISTENCY
Ensure the experience feels native to Elm's existing design system
USER TASK FLOW
From friction to clarity
The redesign introduced a new subscription path within the existing purchase flow. By comparing the current and improved flows side by side, the structural changes become clear — more decision points, more flexibility, and a smoother path to confirmation.
SOLUTION HIGHLIGHTS
Designed for clarity, built for trust
Each solution directly addresses a pain point uncovered in research — reducing friction, increasing transparency, and giving users the control they need to subscribe with confidence.
01
Streamlined Subscription Flow
Clear steps, progress indicators, and visual previews reduce uncertainty and help users subscribe with confidence at every stage of the process.
02
Flexible Customization
Users select delivery frequency, grind type, and roast preferences with visual aids — making choices feel tangible, personal, and easy to change.
03
Transparent Pricing
Total costs, shipping details, and discount structures are visible upfront — eliminating surprises and building trust before the commitment point.
04
Subscription Management
Pausing, modifying, and canceling are accessible from a clear dashboard — giving users the flexibility they asked for without hidden barriers.
05
Clearer Entry Points
Subscription discovery is surfaced more prominently on the homepage and product pages — reducing the steps needed to find and evaluate the offering.
06
Mobile-Optimized Flow
Typography, spacing, and touch targets refined for mobile — supporting the majority of users who discover and evaluate subscriptions on their phones.
ELM'S DESIGN SYSTEM
Working within an established brand
Elm's Coffee already had a strong visual identity — clean typography, muted naturals, and a minimalist product aesthetic. The redesign wasn't about creating something new; it was about extending what already existed into a subscription flow that felt native to the brand.
Every color, tag, card, and button in the new subscription screens was drawn from Elm's existing palette and component language — ensuring users experienced a seamless transition from the browsing experience they already knew into a new, more capable purchasing flow.
ELM'S BRAND PALETTE & ELEMENTS
Core Palette
Black
#181818
RGB 24, 24, 24
Primary text, buttons, product names
Off-White
#F5F5F2
RGB 245, 245, 242
Cards, panels
White
#FFFFFF
RGB 255, 255, 255
Cards, panels
Warm Gray
#E2DCD4
RGB 226, 220, 212
Borders, accents, dividers
Flavor Note Tags
Each coffee uses color-coded tags to surface tasting notes at a glance — helping users understand flavor profile before they click.
Product Card Pattern
The subscription flow uses the same product card pattern as the main shop — flavor tags, bag imagery, serif product name, and a clear add-to-bag action — creating visual continuity across the entire site.
Design Principles Applied
Visual Continuity
Every screen uses the same card structure, typography scale, and color palette — creating a cohesive feel across browse, configure, and checkout.
Minimalist Restraint
White space and a tight color palette keep the focus on products and decisions, without visual clutter or competing elements.
Product-First Layout
Product imagery and names dominate every card and screen — reinforcing the quality and craft that Elm's brand is built on.
Clear Hierarchy
Bold product names, light labels, and subtle tags create a clear reading order so users can scan and decide quickly.
REFLECTION
What this project taught me
This project reinforced that even a focused redesign — a single flow within a larger system — requires the same rigor as a full product overhaul. Understanding Elm's existing design language, respecting their brand constraints, and designing within those boundaries made the subscription experience feel seamless rather than bolted on.
One of the most valuable takeaways was learning how much transparency matters in subscription commerce. Users weren't just looking for a simpler flow — they wanted to feel confident that the brand respected their time, their preferences, and their ability to change their mind. Designing for that kind of trust shaped every screen.
Working within an established design system was itself a design skill. Rather than introducing new visual ideas, the challenge was to extend Elm's existing patterns into a new context — proving that good subscription UX doesn't require a brand overhaul, just thoughtful, user-centered execution.
NEXT STEPS
Usability testing with real café customers to validate the redesigned subscription flow end-to-end
High-fidelity prototype development for implementation review and developer handoff
Introducing a loyalty program and referral incentives to increase long-term subscriber engagement
Exploring seasonal subscription tiers tied to Elm's rotating single-origin releases
Next Case Study