Client
Client
Trade Coffee
Trade Coffee
Industry
Industry
Subscription e-Commerce
Subscription e-Commerce
Transforming Trade Coffee’s Web-Heavy Experience into a Personalized Mobile UX
Transforming Trade Coffee’s Web-Heavy Experience into a Personalized Mobile UX
MOBILE APP ◇ SUBSCRIPTION MANAGEMENT ◇ 2025
MOBILE APP ◇ SUBSCRIPTION MANAGEMENT ◇ 2025
As a systems-minded UX designer, I conceptualized a native app that transformed Trade Coffee’s mobile-optimized website into a more intentional app experience. By addressing key usability gaps in queue management, personalization, and discovery, I created streamlined interactions and reusable patterns that support long-term engagement and scalable iteration, which is especially critical in subscription-based products.
As a systems-minded UX designer, I conceptualized a native app that transformed Trade Coffee’s mobile-optimized website into a more intentional app experience. By addressing key usability gaps in queue management, personalization, and discovery, I created streamlined interactions and reusable patterns that support long-term engagement and scalable iteration, which is especially critical in subscription-based products.
Trade Coffee is a subscription-based marketplace that helps people discover and enjoy better coffee. It curates beans from over 55 of the country's top independent roasters and offers personalized recommendations based on each user's taste preferences.
Industry
Subscription e-Commerce
Client
Trade Coffee
Transforming Trade Coffee’s Web-Heavy Experience into a Personalized Mobile UX
MOBILE APP ◇ SUBSCRIPTION MANAGEMENT ◇ 2025
As a systems-minded UX designer, I conceptualized a native app that transformed Trade Coffee’s mobile-optimized website into a more intentional app experience. By addressing key usability gaps in queue management, personalization, and discovery, I created streamlined interactions and reusable patterns that support long-term engagement and scalable iteration, which is especially critical in subscription-based products.
Trade Coffee is a subscription-based marketplace that helps people discover and enjoy better coffee. It curates beans from over 55 of the country's top independent roasters and offers personalized recommendations based on each user's taste preferences.
The
Problem
The
Problem
The
Problem
On paper, Trade offers an ideal solution for coffee lovers—a personalized subscription that brings fresh, curated beans straight to your door.
But in practice, its desktop-first experience doesn’t translate well to mobile. While feature-complete, core tasks like updating an order, reordering a favorite, or discovering new blends often feel cramped and unintuitive on smaller screens.
What should be a simple, routine interaction often becomes frustrating for busy, mobile-first users.
On paper, Trade offers an ideal solution for coffee lovers—a personalized subscription that brings fresh, curated beans straight to your door.
But in practice, its desktop-first experience doesn’t translate well to mobile. While feature-complete, core tasks like updating an order, reordering a favorite, or discovering new blends often feel cramped and unintuitive on smaller screens.
What should be a simple, routine interaction often becomes frustrating for busy, mobile-first users.
The
Opportunity
The
Opportunity
The
Opportunity
I set out to reimagine Trade’s mobile experience with streamlined, scalable interactions. But the deeper I went, the clearer it became: this wasn't a retrofit.
It was a case for a dedicated mobile app that gives subscribers a faster, smarter, more personal way to engage with their coffee on the go.
My Role &
Process
My Role &
Process
My Role &
Process
In this self-initiated project, I acted as both researcher and designer by auditing the existing experience, shaping the user journey, and building a scalable design system.
I approached the work through four interconnected phases:
In this self-initiated project, I acted as both researcher and designer by auditing the existing experience, shaping the user journey, and building a scalable design system.
I approached the work through four interconnected phases:
1.
HEURISTIC AUDIT
HEURISTIC AUDIT
I evaluated how Trade’s desktop-first flows translated to mobile, revealing key friction points across personalization, discovery, and queue management.
2.
MAPPING KEY FLOWS
MAPPING KEY FLOWS
I charted four core user flows—editing the queue, rating past coffees, browsing favorites, and discovering new blends—to surface the moments most prone to user friction and guide the mobile app design.
I charted four core user flows — editing the queue, rating past coffees, browsing favorites, and discovering new blends — to surface the moments most prone to user friction and guide the mobile app design.
3.
SYSTEM DESIGN
SYSTEM DESIGN
I built a scalable UI system of components, typography roles, and interaction patterns to drive visual consistency and design efficiency. Each element was built for clarity, flexibility, and long-term scalability.
4.
PROTOTYPING
PROTOTYPING
I brought each flow to life through interaction-driven prototypes that model real user behavior. From repurchasing to rating, every moment is designed to feel intuitive, responsive, and personalized.
Research &
Insights
Research &
Insights
Research &
Insights
With the overall process defined, I first examined Trade's current experience and how key UX issues showed up across specific user flows related to subscription management.
With the overall process defined, I first examined Trade's current experience and how key UX issues showed up across specific user flows related to subscription management.
RESEARCH APPROACH
RESEARCH APPROACH
RESEARCH APPROACH
Blending Personal Insight with Structured Evaluation
Blending Personal Insight with Structured Evaluation
Blending Personal Insight with Structured Evaluation
I approached research through a hybrid lens: as a longtime Trade subscriber and as a UX designer looking critically at how the experience supported returning users, especially on mobile. I mapped the core subscriber journey—browse, manage, rate—and noted friction at every turn.
My goal wasn’t just to identify visual gaps, but to uncover structural UX issues:
I approached research through a hybrid lens: as a longtime Trade subscriber and as a UX designer looking critically at how the experience supported returning users, especially on mobile. I mapped the core subscriber journey—browse, manage, rate—and noted friction at every turn.
My goal wasn’t just to identify visual gaps, but to uncover structural UX issues:
Where were users forced into unnecessary decisions?
Where did the interface collapse under the weight of its own rigidity?
And where were personalization, memory, and agency simply missing?
Where were users forced into unnecessary decisions?
Where did the interface collapse under the weight of its own rigidity?
And where were personalization, memory, and agency simply missing?
Where were users forced into unnecessary decisions?
Where did the interface collapse under the weight of its own rigidity?
And where were personalization, memory, and agency simply missing?
KEY INSIGHTS
KEY INSIGHTS
KEY INSIGHTS
Disrupting the Ritual: What Should Be Seamless, Isn't
Disrupting the Ritual: What Should Be Seamless, Isn't
Disrupting the Ritual: What Should Be Seamless, Isn't
Needless Friction in Queue Management
Trade’s queue (Figure 1.1) functions as a static list, not a flexible tool. Rearranging through modal windows (Figure 1.2) breaks flow, and swapping is limited to existing items or My Matches. What could be discovery feels like maintenance.
With deliveries shipping one at a time, only the first card truly matters—yet every one looks equally urgent. The same lack of hierarchy extends across the site, where sections like My Trade, My Queue, Past Deliveries, and My Subscription overlap in purpose but compete for attention. What should guide the user instead forces them to guess.
Needless Friction in Queue Management
Trade’s queue (Figure 1.1) functions as a static list, not a flexible tool. Rearranging through modal windows (Figure 1.2) breaks flow, and swapping is limited to existing items or My Matches. What could be discovery feels like maintenance.
With deliveries shipping one at a time, only the first card truly matters—yet every one looks equally urgent. The same lack of hierarchy extends across the site, where sections like My Trade, My Queue, Past Deliveries, and My Subscription overlap in purpose but compete for attention. What should guide the user instead forces them to guess.
Together, these choices make the queue feel more like a system to work around rather than a subscription designed to adapt to the user.
Figure 1.1. A weak visual hierarchy places the burden on action buttons to convey that Emporium House Blend is the most urgent coffee in the queue.
Figure 1.1. A weak visual hierarchy places the burden on action buttons to convey that Emporium House Blend is the most urgent coffee in the queue.
Figure 1.1. A weak visual hierarchy places the burden on action buttons to convey that Emporium House Blend is the most urgent coffee in the queue.
Figure 1.2. A two-step replace flow starts with a redundant prompt, then expands into a clunky full-screen modal—making a thoughtful swap harder than it needs to be.
Figure 1.2. A two-step replace flow starts with a redundant prompt, then expands into a clunky full-screen modal—making a thoughtful swap harder than it needs to be.
Figure 1.2. A two-step replace flow starts with a redundant prompt, then expands into a clunky full-screen modal—making a thoughtful swap harder than it needs to be.
Confirmation patterns for queue changes is also inconsistent (Figure 1.3). Sometimes swapping a coffee triggers a modal that exits the flow; other times a toast banner appears while the modal stays open, leaving it unclear if the change worked.
These mixed signals are disorienting, especially within the same interaction flow. The second pattern also hints at a broader discovery issue explored in the next section.
Figure 1.3. Two separate swaps produce different confirmations — one closes the modal entirely (left), while the other (right) allows continued edits via inline toast. With no clear rationale for the variation, the feedback system feels inconsistent and disrupts flow continuity.
Figure 1.3. Two separate swaps produce different confirmations — one closes the modal entirely (left), while the other (right) allows continued edits via inline toast. With no clear rationale for the variation, the feedback system feels inconsistent and disrupts flow continuity.
Figure 1.3. Two separate swaps produce different confirmations — one closes the modal entirely (left), while the other (right) allows continued edits via inline toast. With no clear rationale for the variation, the feedback system feels inconsistent and disrupts flow continuity.
Discovery Feels Disconnected
Trade’s discovery experience feels fragmented and hidden—more catalog than curation.
Users can technically browse subscription coffees, but only through indirect or buried paths. The My Matches carousel sits below the queue, repeats across four sections (My Trade, My Queue, My Subscription, Past Deliveries), and still fails to show the full offering (Figure 2.1). If discovery is the draw, why is it so hard to find?
Discovery Feels Disconnected
Trade’s discovery experience feels fragmented and hidden—more catalog than curation.
Users can technically browse subscription coffees, but only through indirect or buried paths. The My Matches carousel sits below the queue, repeats across four sections (My Trade, My Queue, My Subscription, Past Deliveries), and still fails to show the full offering (Figure 2.1). If discovery is the draw, why is it so hard to find?
Figure 2.1. The My Matches carousel is repeated across four separate pages buried below content like Past Deliveries, Payment Methods, and Account Settings, making coffee discovery feel fragmented and redundant.
Figure 2.1. The My Matches carousel is repeated across four separate pages buried below content like Past Deliveries, Payment Methods, and Account Settings, making coffee discovery feel fragmented and redundant.
Figure 2.1. The My Matches carousel is repeated across four separate pages buried below content like Past Deliveries, Payment Methods, and Account Settings, making coffee discovery feel fragmented and redundant.
Even more frustrating is the Shop Coffee section—the one place that should simplify browsing—but it offers no filter for subscription eligibility. Users guess, click, and hit dead ends (Figure 2.2).
What should inspire discovery instead becomes tedious trial and error,
an odd failure for a subscription-first platform
Figure 2.2. Neither the nav menu nor the Browse Coffee filters account for subscription eligibility, leaving users to guess which coffees can actually be added to their queue.
Figure 2.2. Neither the nav menu nor the Browse Coffee filters account for subscription eligibility, leaving users to guess which coffees can actually be added to their queue.
Figure 2.2. Neither the nav menu nor the Browse Coffee filters account for subscription eligibility, leaving users to guess which coffees can actually be added to their queue.
No System Memory or Long-Term Recall
Each delivery on Trade feels disconnected from the last. The site never shows whether a coffee is in your queue, one you’ve tried, or one you’ve rated. Without visual indicators or prompts, users are left to remember what the system should track.
Favorites only deepens the confusion. Favoriting a coffee happens automatically when a user choses "I loved it" while rating a coffee, but it happens silently with no confirmation. Even the Favorites page (Figure 3.1) feels lifeless, functioning more like a reorder list than a reflection of personal taste.
No System Memory or Long-Term Recall
Each delivery on Trade feels disconnected from the last. The site never shows whether a coffee is in your queue, one you’ve tried, or one you’ve rated. Without visual indicators or prompts, users are left to remember what the system should track.
Favorites only deepens the confusion. Favoriting a coffee happens automatically when a user choses "I loved it" while rating a coffee, but it happens silently with no confirmation. Even the Favorites page (Figure 3.1) feels lifeless, functioning more like a reorder list than a reflection of personal taste.
Figure 3.1. Favorites are presented like past orders with a static layout, vague metadata, and little context or personalization.
Figure 3.1. Favorites are presented like past orders with a static layout, vague metadata, and little context or personalization.
Figure 3.1. Favorites are presented like past orders with a static layout, vague metadata, and little context or personalization.
On top of this, revisiting a coffee shows no trace of the user's history with it (Figure 3.2). Without that context, browsing feels detached and forces the user to shoulder the work of remembering what the platform should.
Trade's subscription functions like a one-way pipeline: coffees go out, but insight never comes back in.
Figure 3.2. Even after being rated and favorited, The 45 Blend shows up again with no visual memory of past interaction in neither My Matches nor on its product page.
Figure 3.2. Even after being rated and favorited, The 45 Blend shows up again with no visual memory of past interaction in neither My Matches nor on its product page.
Figure 3.2. Even after being rated and favorited, The 45 Blend shows up again with no visual memory of past interaction in neither My Matches nor on its product page.
Together, these patterns reveal a platform that delivers premium coffee, but struggles to deliver a premium experience. These gaps became especially clear when viewed through the lens of our primary user.
Persona &
Problem Definition
Persona &
Problem Definition
Persona &
Problem Definition
With a clearer understanding of the current experience and its shortcomings, I needed a way to focus my direction and define the core problems more clearly. I created a persona to represent common patterns from my research, then mapped their journey through Trade’s existing flow.
These tools helped translate broad insights into more specific design challenges.
With a clearer understanding of the current experience and its shortcomings, I needed a way to focus my direction and define the core problems more clearly. I created a persona to represent common patterns from my research, then mapped their journey through Trade’s existing flow.
These tools helped translate broad insights into more specific design challenges.
PERSONA
PERSONA
PERSONA
Anchoring the Experience in a Coffee-Literate User
Anchoring the Experience in a Coffee-Literate User
Anchoring the Experience in a Coffee-Literate User
I anchored my design decisions around a primary persona:
A curious but time-starved coffee drinker who values variety and personalization, but wants their subscription to feel effortless.
This lens helped frame the problems not just as system gaps, but as barriers to a seamless, user-centered ritual. I also mapped this user’s journey to better understand where friction tends to show up.
This lens helped frame the problems not just as system gaps, but as barriers to a seamless, user-centered ritual. I also mapped this user’s journey to better understand where friction tends to show up.
Seeing the experience through this user’s eyes helped clarify where the product was falling short. The issues went beyond clunky screens or missing features. At its core, the system simply didn’t support an engaging ongoing relationship with the user.
Seeing the experience through this user’s eyes helped clarify where the product was falling short. The issues went beyond clunky screens or missing features. At its core, the system simply didn’t support an engaging ongoing relationship with the user.
PROBLEM DEFINITION
PROBLEM DEFINITION
PROBLEM DEFINITION
A Value Proposition Build on Curation and Constrained by UX
A Value Proposition Build on Curation and Constrained by UX
A Value Proposition Build on Curation and Constrained by UX
Trade positions itself as a subscription-first company, but the actual experience doesn’t reflect that focus—especially for returning subscribers.
Four core UX breakdowns define the problem:
Trade positions itself as a subscription-first company, but the actual experience doesn’t reflect that focus—especially for returning subscribers.
Four core UX breakdowns define the problem:
Queue management lacks flexibility and context
Managing the queue takes more mental effort than it should due to poor flow, weak visual cues, and inconcistent system logic.
Subscription discovery is limited and disconnected
Users can’t easily find coffees eligible for their subscription—filters and pathways are missing, turning discovery into trial and error.
Favorites are a missed opportunity for personalization
There’s no persistent space for favorites—missing a key anchor for personalization and return engagement.
Without memory, Trade forgets its user
Without persistent memory or visual feedback, the experience resets with every delivery. Nothing builds on what came before.
Queue management lacks flexibility and context
Managing the queue takes more mental effort than it should due to poor flow, weak visual cues, and inconcistent system logic.
Subscription discovery is limited and disconnected
Users can’t easily find coffees eligible for their subscription—filters and pathways are missing, turning discovery into trial and error.
Favorites are a missed opportunity for personalization
There’s no persistent space for favorites—missing a key anchor for personalization and return engagement.
Without memory, Trade forgets its user
Without persistent memory or visual feedback, the experience resets with every delivery. Nothing builds on what came before.
Queue management lacks flexibility and context
Managing the queue takes more mental effort than it should due to poor flow, weak visual cues, and inconcistent system logic.
Subscription discovery is limited and disconnected
Users can’t easily find coffees eligible for their subscription—filters and pathways are missing, turning discovery into trial and error.
Favorites are a missed opportunity for personalization
There’s no persistent space for favorites—missing a key anchor for personalization and return engagement.
Without memory, Trade forgets its user
Without persistent memory or visual feedback, the experience resets with every delivery. Nothing builds on what came before.
Together, these problems reveal a core misalignment between Trade’s promise and its product. The system manages transactions, not relationships. A subscription model should evolve with the user—remembering, adapting, and guiding. Instead, Trade’s experience feels static and disconnected, offering control without connection.
The next step was to turn these gaps into opportunity. Each issue revealed its counterbalance: rigidity needed flexibility, forgetfulness needed memory, and fragmentation needed cohesion.
These became the blueprint for reshaping Trade’s system into something more personal, intuitive, and continuous.
Together, these problems reveal a core misalignment between Trade’s promise and its product. The system manages transactions, not relationships. A subscription model should evolve with the user—remembering, adapting, and guiding. Instead, Trade’s experience feels static and disconnected, offering control without connection.
The next step was to turn these gaps into opportunity. Each issue revealed its counterbalance: rigidity needed flexibility, forgetfulness needed memory, and fragmentation needed cohesion.
These became the blueprint for reshaping Trade’s system into something more personal, intuitive, and continuous.
Design Process
Design Process
Design Process
I wanted to reimagine the system around the behaviors and gaps that mattered most. Instead of treating each pain point as a one-off, I reframed them as broader UX challenges that spanned discovery, queue management, and system feedback.
From there, I defined a focused set of design goals to guide the work ahead.
I wanted to reimagine the system around the behaviors and gaps that mattered most. Instead of treating each pain point as a one-off, I reframed them as broader UX challenges that spanned discovery, queue management, and system feedback.
From there, I defined a focused set of design goals to guide the work ahead.
DESIGN GOALS
DESIGN GOALS
DESIGN GOALS
A Blueprint for a More Curated, Adaptive Experience
A Blueprint for a More Curated, Adaptive Experience
A Blueprint for a More Curated, Adaptive Experience
Clarify priority and reduce decision fatigue
Display only one upcoming queue deadline to guide user focus
Highlight the next actionable item with clear CTAs
Use structured visual hierarchy to guide task order
Tie CTAs to delivery timing to help users prioritize based on urgency
Support flexible, intuitive queue management
Introduce "Edit Queue" mode with drag-and-drop reordering
Replace coffees via a lightweight bottom sheet modal
Add contextual overflow menus for swapping, skipping, or removing items.
Provide real-time feedback for queue changes to reinforce action and build trust in the system
Make discovery contextual
Clarify intent: Home tab shows queue-eligible coffees; Discover tab shows full catalog
Surface relevant coffees via recommendation carousels
Use adaptable carousel templates for varied themes: roasters, promotions, brew types, seasonal highlights
Add visual tags to show user's history and interaction with coffee
Bring favorites back to life
Elevate Favorites to primary tab in main nav
Add persistent favorite icons to coffee cards on product pages
Allow favoriting manually (via heart icon) and automatically (during rating flow)
Make Favorites a brew companion with prep notes, last ordered date, and one-tap reordering.
Create a reusable and scalable system
Unify coffee card component and build tag system for metadata
Apply consistent CTA styling, spacing, and typography to reduce visual noise
Establish semantic type roles to separate brand storytelling from system interactions
Clarify priority and reduce decision fatigue
Display only one upcoming queue deadline to guide user focus
Highlight the next actionable item with clear CTAs
Use structured visual hierarchy to guide task order
Tie CTAs to delivery timing to help users prioritize based on urgency
Support flexible, intuitive queue management
Introduce "Edit Queue" mode with drag-and-drop reordering
Replace coffees via a lightweight bottom sheet modal
Add contextual overflow menus for swapping, skipping, or removing items.
Provide real-time feedback for queue changes to reinforce action and build trust in the system
Make discovery contextual
Clarify intent: Home tab shows queue-eligible coffees; Discover tab shows full catalog
Surface relevant coffees via recommendation carousels
Use adaptable carousel templates for varied themes: roasters, promotions, brew types, seasonal highlights
Add visual tags to show user's history and interaction with coffee
Bring favorites back to life
Elevate Favorites to primary tab in main nav
Add persistent favorite icons to coffee cards on product pages
Allow favoriting manually (via heart icon) and automatically (during rating flow)
Make Favorites a brew companion with prep notes, last ordered date, and one-tap reordering.
Create a reusable and scalable system
Unify coffee card component and build tag system for metadata
Apply consistent CTA styling, spacing, and typography to reduce visual noise
Establish semantic type roles to separate brand storytelling from system interactions
Clarify priority and reduce decision fatigue
Display only one upcoming queue deadline to guide user focus
Highlight the next actionable item with clear CTAs
Use structured visual hierarchy to guide task order
Tie CTAs to delivery timing to help users prioritize based on urgency
Support flexible, intuitive queue management
Introduce "Edit Queue" mode with drag-and-drop reordering
Replace coffees via a lightweight bottom sheet modal
Add contextual overflow menus for swapping, skipping, or removing items.
Provide real-time feedback for queue changes to reinforce action and build trust in the system
Make discovery contextual
Clarify intent: Home tab shows queue-eligible coffees; Discover tab shows full catalog
Surface relevant coffees via recommendation carousels
Use adaptable carousel templates for varied themes: roasters, promotions, brew types, seasonal highlights
Add visual tags to show user's history and interaction with coffee
Bring favorites back to life
Elevate Favorites to primary tab in main nav
Add persistent favorite icons to coffee cards on product pages
Allow favoriting manually (via heart icon) and automatically (during rating flow)
Make Favorites a brew companion with prep notes, last ordered date, and one-tap reordering.
Create a reusable and scalable system
Unify coffee card component and build tag system for metadata
Apply consistent CTA styling, spacing, and typography to reduce visual noise
Establish semantic type roles to separate brand storytelling from system interactions
Design Exploration
& Buildout
Design Exploration
& Buildout
Design Exploration
& Buildout
Using everything I learned, I began with low‑fidelity sketches to test ideas to establish visual direction and key layout patterns. As the concepts evolved, I transitioned into medium‑fidelity wireframes to better understand how screens, components, and hierarchy interacted across the flow.
Using everything I learned, I began with low‑fidelity sketches to test ideas to establish visual direction and key layout patterns. As the concepts evolved, I transitioned into medium‑fidelity wireframes to better understand how screens, components, and hierarchy interacted across the flow.
MEDIUM FIDELITY WIREFRAMES
MEDIUM FIDELITY WIREFRAMES
Add Coffee to Queue
Reorganizing Queue
Reorganizing Queue
Add Coffee to Queue
Reorganizing Queue
Reorganizing Queue
Add Coffee to Queue
Reorganizing Queue
Reorganizing Queue
Working in medium fidelity brought on a new layer of complexity. I had to think more critically about flow—how screens connected, how users moved, and how hierarchy guided that movement.
At times, I found myself polishing individual moments without fully understanding the system they lived in. This phase pushed me to design more holistically, and to start thinking beyond UI toward the experience as a whole.
Working in medium fidelity brought on a new layer of complexity. I had to think more critically about flow—how screens connected, how users moved, and how hierarchy guided that movement.
At times, I found myself polishing individual moments without fully understanding the system they lived in. This phase pushed me to design more holistically, and to start thinking beyond UI toward the experience as a whole.
Final Designs
Final Designs
After weeks of iteration, the final prototype felt like the moment everything clicked. flows aligned, hierarchy made sense, and the experience finally felt whole.
After weeks of iteration, the final prototype felt like the moment everything clicked. flows aligned, hierarchy made sense, and the experience finally felt whole.
Reflections
& Next Steps
Reflections
& Next Steps
Reflections
& Next Steps
What I Learned
This project became a crash course in intentional design, the kind that feels effortless to the user because it was anything but for the designer. I learned how much clarity depends on structure, and how every small decision shapes the larger experience.
The goal was to make the system feel invisible, but getting there meant learning to notice every detail, again and again.
Looking Ahead
If I continued this work, I’d focus on:
Validating the new flows through lightweight user interviews or surveys to better understand how the experience aligns with real customer needs.
Exploring subtle ways to re-engage users, like push notifications that remind them to rate a coffee, highlight seasonal blends, or share new picks from a favorite roaster—keeping the experience alive between deliveries.