Redesigning a Meal Kit Subscription Experience for Conversion
Scope
Complete responsive website redesign for desktop, tablet, and mobile
Role
Lead Product Designer
Duration
14 months (Nov 2021 - Dec 2023)
Team
2 Founders, Development Team, Investor Creative Team
I led the complete redesign of The Cumin Club's e-commerce platform, a responsive website across desktop, tablet, and mobile that drove 33% conversion improvement.
33%
conversion improvement
16%
click-through rate increase
10%
session duration increase
The Cumin Club offers regional Indian dishes carefully prepared by expert chefs, freeze-dried, and shipped to your doorstep. Customers prepare meals in just 5 minutes with hot water. The company had just completed a rebrand and needed a website that could convert visitors into subscribers.
Business Goals
01
Establish consistent branding across all touchpoints and ensure that the user understands what the product is
02
Expand customer base beyond core users of Indian expats and Indian-Americans to people who don't have a cultural connection with the food
03
Increase conversion rate by at least 1%.
Discovery
Competitive Analysis
I analyzed six leading D2C food subscription websites, applying heuristic evaluation principles to identify best practices and usability gaps. I also gathered insights from customer reviews across Reddit and Trustpilot to understand what users loved and hated about existing options.
The key takeaway from this was that subscription flexibility was a non-negotiable. Users need to be able to easily skip deliveries, pause, and cancel subscriptions. Any friction here creates frustration and negative reviews.
User Research
I conducted interviews with seven target users to explore attitudes toward food subscriptions and related frustrations. I synthesized qualitative data with survey results through empathy mapping to reveal core pain points.
User Research Sessions
01
"Healthy" Means Different Things
Users prioritize health-conscious food choices, but definitions of "healthy" vary widely.
02
Subscription Control is Critical
The ability to skip, pause, or cancel must be effortlessly available.
03
Personalization vs. Paralysis
Users want to be able to customize their boxes, but too many choices can cause overwhelm.
Additional user-requested features like detailed meal plan modification and extensive subscription customization were documented but deferred for future development due to time constraints.
The Homepage
The investor creative team owned branding and visual identity, including initial wireframes for the homepage and about page. I built the design system around their established patterns and extended it for tablet and mobile using Material Design standards. My primary focus was the account management and subscription experience.
Initial Homepage Design
The Problem
Usability testing revealed an issue: users found the homepage unmemorable. We tested with both new visitors and existing customers, but no one felt compelled to explore further. Existing customers expressed clear disappointment.
More concerning, many new users didn't understand what The Cumin Club actually offered. Some thought it was a restaurant. Others assumed it was fresh meal delivery. They didn't realize they'd be receiving meal kits.
What Wasn't Working
01
Low Visual Energy
The colors and imagery didn't grab attention or convey the vibrancy of Indian cuisine.
02
Unclear Value Proposition
Users couldn't quickly understand what product they'd actually receive.
03
Brand Expression Over Conversion
The initial design prioritized brand storytelling but didn't guide users toward the subscription flow.
In addition, complex scroll animations were causing jank and loading issues, particularly in mobile, where most of our traffic came in from.
My Proposal
After usability testing revealed the conversion issues, I proposed an alternative approach. I would take the visual assets and brand identity the creative team had established and design a homepage optimized for conversion while maintaining brand expression. The founders chose this approach because it could be built faster by our development team while delivering the visual impact we needed.
Proposed Homepage Design
The Solution
01
Vibrant Color Palette
Brighter colors that grabbed attention and conveyed the energy of Indian cuisine.
02
Ambient Video Hero
A video background showing meal preparation, solving the "what is this product?" confusion.
03
Explanatory Copy
A new 'How It Works' section took center stage after the hero to provide support to the video.
04
Static Sections
Complex scroll animations were replaced with simpler static sections to reduce dev lead and avoid any loading issues.
04
Micro-Animations on Scroll
The food was made the focus, with subtle rotating motions on scroll that added life without overwhelming or slowing the page.
Upon getting this proposal approved, I collaborated with the investor's creative team on a new ambient video background that showed what the product actually was: meal kits being prepared. This homepage design met with higher approval and more understanding from test users, and was ultimately used for MVP.
Homepage Evolution
Due to the time crunch, we had not had time to stress-test the ambient video and it ended up having loading issues on mobile. This was quickly replaced post-MVP with a temporary static image until we could run a new round of food-focused creative. With this and additional social proof, I brought the homepage to what became its final form.
Subscription Flow
While the homepage got users in the door, the subscription flow was where conversion actually happened. This was my primary focus throughout the project: designing a path from landing to plan selection to checkout that felt clear, providing options and flexibility without causing overwhelm.
Design Principles
01
Keep It Linear
Guide users through a clear sequence without overwhelming them with choices.
02
Show, Don't Tell
Use visual hierarchy to help users understand what they're getting.
03
Choice & Information
Filters for dietary preferences, spice levels, and information on portion sizes and nutrition.
This was a fully responsive website. I created a design system using the initial homepage wireframes provided by the investor's creative team and extended it for tablet and mobile using Material Design standards, ensuring the subscription flow worked seamlessly across all devices.
The key screens included:
Plan Selection:
Clear presentation of subscription options with pricing, frequency, and what's included.
Menu Browsing:
Visual menu with clear indicators and filters for dietary preferences, spice levels, and available tools.
Cart & Checkout:
Streamlined checkout with clear order summary, delivery information, and payment.
After launch, analytics showed users moving back and forth between steps 1 and 2, changing box size or dropping off. We hypothesized they wanted to adjust box size and verify cost per meal, which changed based on selection.
I combined steps 1 and 2, managing the information load using anchor point scrolling. This allowed users to see pricing update in real-time as they adjusted their box size, reducing friction and drop-off.
Launch
We launched in August 2022 and immediately began monitoring user behavior through Mouseflow, Hotjar, and Google Analytics. Technical issues emerged that disrupted the user experience. Conversion dropped from the 3.0% baseline to 2.2%. I worked closely with developers and founders, analyzing session recordings and analytics to identify where users dropped off. We moved quickly to stabilize the experience.
The Problems
01
Checkout Failures
Users encountered bugs at checkout preventing subscription completion.
02
Performance Issues
The hero video caused loading problems, particularly in mobile. Users bounced before seeing the subscription entry point.
03
Dropoffs While Selecting Meals
Users were dropping off during the meal selection process, either to oscillate between Steps 1 and 2, or after opening and closing product overlays.
We divided and conquered. I handled any and all issues that could be fixed with design, while the developers handled the technical bugs. The biggest changes made were:
01
Replaced the Video Hero
Swapped the video background with a temporary high-quality static image, maintaining visual impact until we could replace it with a more appropriate food-focused hero image
02
Reduced Complexity
Temporarily removed animations to decrease technical complexity until core functionality stabilized.
03
Combined Subscription Steps
Combined Steps 1 and 2 into a single page, using anchor point scrolling to maintain information load while allowing users to make changes to their box without having to navigate.
The most critical bugs were resolved within 2-3 weeks. Over the following four weeks, conversion climbed as the experience stabilized.
Post-Launch
Cart Redesign
Every meal originally came with free sides: rice, rotis, chutney, or papad. User feedback revealed many customers weren't using them. Meanwhile, the business was absorbing significant costs for items that were going to waste.
I redesigned the cart to make sides optional add-ons:
Marketplace Integration:
Users could browse and add sides from the product catalog
Smart Suggestions:
When users added meals, the system displayed associated sides as suggested add-ons
Separate Pricing:
Sides became individual purchases rather than bundled items
No Flow Disruption:
The core subscription journey remained unchanged
Cart Redesign - Mobile
The change provided financial relief for the business while giving users more control over their orders.
The Cumin Pantry
User feedback indicated demand for authentic Indian snacks and beverages. The founders saw an opportunity to expand the offering and increase order value.
I designed:
New Marketplace Page:
Product catalog with cards, descriptions, and imagery for Pantry items, including sweet and savory snacks, teas, and coffees
Strategic Placement:
Positioned at the end of the subscription flow as a "before you go" moment
Cart Integration:
Seamless addition of Pantry items to subscription boxes
Clear Subscription Messaging:
Copy clarifying that Pantry items would recur in subsequent boxes unless changed, addressing potential confusion preemptively
The Cumin Pantry - Mobile
The Pantry feature increased average order value and created a new revenue stream.
Results
33% Conversion Improvement
Conversion went from 3% baseline to 4%, meeting that 1% improvement business goal.
16% Click-Through Rate Increase
Users engaged with the subscription flow at significantly higher rates.
10% Session Duration Increase
Users spent more time exploring content and products.
Beyond the core metrics:
The cart redesign reduced costs by eliminating unwanted sides.
The Pantry feature created a new revenue stream and increased average order value.
The stabilized platform supported continued business growth.
Reflection
01
Ship and Iterate
Getting something live and learning from real users beats endless refinement in isolation.
02
Technical Constraints are Design Constraints
The video hero looked beautiful but caused performance issues. Design decisions must account for infrastructure realities.
03
Collaboration Across Teams
Working with founder expectations, investor creative teams, and development constraints required ongoing communication. The best design only matters if it can be built.
This project reinforced that simplification is harder than addition. Showing less, and making that case to stakeholders, required more rigorous thinking than showing more ever would have.