NewYouPlan
Structuring a complex bundle builder for emotional purchase decisions
Structuring a complex bundle builder for emotional purchase decisions
Structuring a complex bundle builder for emotional purchase decisions
Agency
Swanky
Role
Lead Designer
Type
Health & Wellness
The Challenge
A dated experience for a sensitive purchase
New You Plan sells meal replacement products for weight loss: shakes, soups, bars, and complete meal bundles ranging from one week to eight weeks. Their existing bundle builder was dated, with poor use of space, inconsistent imagery, and a UI that didn't reflect the quality of their products or the sensitivity of the purchase context.
The bundle builder was a critical conversion point. A place where customers committed to a weight loss journey. If the flow created friction or felt clinical, customers would abandon. If the architecture didn't scale, the business couldn't grow its product range without rebuilding.
Stakes: A poor bundle builder experience would mean lost conversions on their highest-value products and customer anxiety at the moment they needed reassurance most.
Constraints: Custom build required, 120+ products, brand accessibility issues, emotionally sensitive context.
New You Plan sells meal replacement products for weight loss: shakes, soups, bars, and complete meal bundles ranging from one week to eight weeks. Their existing bundle builder was dated, with poor use of space, inconsistent imagery, and a UI that didn't reflect the quality of their products or the sensitivity of the purchase context.
The bundle builder was a critical conversion point. A place where customers committed to a weight loss journey. If the flow created friction or felt clinical, customers would abandon. If the architecture didn't scale, the business couldn't grow its product range without rebuilding.
Stakes: A poor bundle builder experience would mean lost conversions on their highest-value products and customer anxiety at the moment they needed reassurance most.
Constraints: Custom build required, 120+ products, brand accessibility issues, emotionally sensitive context.
The Insights
Weight loss is emotional, not transactional
Customers approaching a weight loss programme carry anxiety, hope, and often previous failed attempts. A bundle builder that led with functional questions ("How many weeks?") felt cold and clinical. The experience needed to acknowledge the emotional weight of this decision while still guiding customers efficiently through complex product selection.
This insight shaped the question sequence, the visual tone, and the information hierarchy. Every decision aimed to make customers feel supported in their choice, not processed through a system.
Customers approaching a weight loss programme carry anxiety, hope, and often previous failed attempts. A bundle builder that led with functional questions ("How many weeks?") felt cold and clinical. The experience needed to acknowledge the emotional weight of this decision while still guiding customers efficiently through complex product selection.
This insight shaped the question sequence, the visual tone, and the information hierarchy. Every decision aimed to make customers feel supported in their choice, not processed through a system.
The Key Decisions
The Key Decisions
Balancing emotion with architecture
Balancing emotion with architecture
Decision 1
Emotional framing before functional choices
The bundle builder required three decisions: type, duration, and products. Leading with duration felt transactional. "How long do you want this for?" puts function before intent.
Through competitor analysis of HelloFresh and Huel, I identified that the primary question is emotional: "What kind of experience do you want?" Type first establishes intent. Duration and product selection follow naturally. This structure also filtered subsequent options, reducing cognitive load at each step.
Result: A flow that mirrors how customers think about the decision, not how the data is structured.
The bundle builder required three decisions: type, duration, and products. Leading with duration felt transactional. "How long do you want this for?" puts function before intent.
Through competitor analysis of HelloFresh and Huel, I identified that the primary question is emotional: "What kind of experience do you want?" Type first establishes intent. Duration and product selection follow naturally. This structure also filtered subsequent options, reducing cognitive load at each step.
Result: A flow that mirrors how customers think about the decision, not how the data is structured.
Decision 2
Calmed the visual experience
The brand guidelines included gradients shifting through blue, yellow, orange, red, and purple. Energetic, but overwhelming for a purchase many customers approach with anxiety.
I recommended a simplified blue gradient for the bundle builder. Still on-brand, but calmer. Product imagery (including distinctive "exploded box" shots) carried the energy. The interface itself felt trustworthy and clear. The UI supported rather than competed with the products.
Result: Visual hierarchy that lets products shine while the interface provides calm, clear guidance.
The brand guidelines included gradients shifting through blue, yellow, orange, red, and purple. Energetic, but overwhelming for a purchase many customers approach with anxiety.
I recommended a simplified blue gradient for the bundle builder. Still on-brand, but calmer. Product imagery (including distinctive "exploded box" shots) carried the energy. The interface itself felt trustworthy and clear. The UI supported rather than competed with the products.
Result: Visual hierarchy that lets products shine while the interface provides calm, clear guidance.
Decision 3
Solved the back-navigation gap
After design sign-off, the client raised a concern: customers couldn't revise earlier choices. The initial technical scoping hadn't included this. For a bundle containing 60+ products, losing progress would trigger abandonment.
I designed back-links through each step, plus an "edit bundle" function in cart that preserved all selections. Customers could revise duration or type without starting over. This wasn't minor polish. It was catching a conversion killer after sign-off.
Result: Control and momentum balanced. Customers could change their mind without penalty.
After design sign-off, the client raised a concern: customers couldn't revise earlier choices. The initial technical scoping hadn't included this. For a bundle containing 60+ products, losing progress would trigger abandonment.
I designed back-links through each step, plus an "edit bundle" function in cart that preserved all selections. Customers could revise duration or type without starting over. This wasn't minor polish. It was catching a conversion killer after sign-off.
Result: Control and momentum balanced. Customers could change their mind without penalty.
Decision 4
Applied native patterns in custom components
The bundle builder required custom development, but the surrounding site used Impact theme natively. A disconnect between bespoke and native would confuse customers and increase development overhead.
I reused theme components (quantity selectors, buttons, card patterns) within the custom build. The bundle builder felt like part of the site, not a separate application. This consistency reduced cognitive load and made QA more efficient.
Result: A bespoke experience that felt native to the rest of the site.
The bundle builder required custom development, but the surrounding site used Impact theme natively. A disconnect between bespoke and native would confuse customers and increase development overhead.
I reused theme components (quantity selectors, buttons, card patterns) within the custom build. The bundle builder felt like part of the site, not a separate application. This consistency reduced cognitive load and made QA more efficient.
Result: A bespoke experience that felt native to the rest of the site.
The Work
The Work
A guided journey through complexity
The bundle builder landing page presented two clear paths: Build Your Own or Shop Premade Plans. The stepped flow guided customers through type selection, duration, and product choice with progress indicators and running totals.
The product selection interface used tabs (Savoury, Sweet, Shakes) mapped directly to product tags, making the system maintainable as New You Plan expanded their range. Quantity selectors matched the theme pattern. Dietary signposting (vegan, gluten-free) was clear and consistent.
Mobile considerations drove layout decisions throughout. The majority of bundle purchases happened on mobile, so every element was tested at small viewports first.
The bundle builder landing page presented two clear paths: Build Your Own or Shop Premade Plans. The stepped flow guided customers through type selection, duration, and product choice with progress indicators and running totals.
The product selection interface used tabs (Savoury, Sweet, Shakes) mapped directly to product tags, making the system maintainable as New You Plan expanded their range. Quantity selectors matched the theme pattern. Dietary signposting (vegan, gluten-free) was clear and consistent.
Mobile considerations drove layout decisions throughout. The majority of bundle purchases happened on mobile, so every element was tested at small viewports first.
The Complication
Accessibility within brand
The brand's gradient palette couldn't meet WCAG standards for text contrast. The logo itself was an accessibility issue. But changing the brand wasn't in scope.
I audited the full colour system during discovery using a contrast checker plugin, identifying which combinations could be used for UI elements while remaining on-brand. Gradients were acceptable for decorative backgrounds. Text needed to sit on solid colours with sufficient contrast.
This audit produced documentation showing acceptable colour combinations. Not a redesign of the brand, but guidance for using it responsibly. The client had this reference for future work beyond our project scope.
Accessibility within brand
The brand's gradient palette couldn't meet WCAG standards for text contrast. The logo itself was an accessibility issue. But changing the brand wasn't in scope.
I audited the full colour system during discovery using a contrast checker plugin, identifying which combinations could be used for UI elements while remaining on-brand. Gradients were acceptable for decorative backgrounds. Text needed to sit on solid colours with sufficient contrast.
This audit produced documentation showing acceptable colour combinations. Not a redesign of the brand, but guidance for using it responsibly. The client had this reference for future work beyond our project scope.
Translating creative vision
The CCO had provided initial concepts that established functional direction but hadn't been fully validated for technical feasibility. My role was to preserve the experience intent while translating it into something that could actually be built.
This required ongoing dialogue. Not "this won't work" but "here's how we achieve the same goal within constraints." The bundle builder needed custom development, but every custom element had to justify its complexity against a native alternative.
Translating creative vision
The CCO had provided initial concepts that established functional direction but hadn't been fully validated for technical feasibility. My role was to preserve the experience intent while translating it into something that could actually be built.
This required ongoing dialogue. Not "this won't work" but "here's how we achieve the same goal within constraints." The bundle builder needed custom development, but every custom element had to justify its complexity against a native alternative.
The Complication
Accessibility within brand
The brand's gradient palette couldn't meet WCAG standards for text contrast. The logo itself was an accessibility issue. But changing the brand wasn't in scope.
I audited the full colour system during discovery using a contrast checker plugin, identifying which combinations could be used for UI elements while remaining on-brand. Gradients were acceptable for decorative backgrounds. Text needed to sit on solid colours with sufficient contrast.
This audit produced documentation showing acceptable colour combinations. Not a redesign of the brand, but guidance for using it responsibly. The client had this reference for future work beyond our project scope.
Translating creative vision
The CCO had provided initial concepts that established functional direction but hadn't been fully validated for technical feasibility. My role was to preserve the experience intent while translating it into something that could actually be built.
This required ongoing dialogue. Not "this won't work" but "here's how we achieve the same goal within constraints." The bundle builder needed custom development, but every custom element had to justify its complexity against a native alternative.
The Delivery
Development partnership
The bundle builder wasn't just a UI problem. It was a data structure problem. Each bundle type had different available durations. Each duration had different product quantities. Products needed clear categorisation and dietary signposting.
I worked with the developer throughout to ensure the front-end architecture matched how the data would actually be structured in Shopify. Selecting "Shakes Only" genuinely filtered to relevant durations and products, rather than hiding irrelevant options through UI trickery.
The tabs in product selection mapped directly to product tags. The filtering logic could be clean because the data model was considered from the start. This wasn't an afterthought added during build. It was designed into the system.
The bundle builder wasn't just a UI problem. It was a data structure problem. Each bundle type had different available durations. Each duration had different product quantities. Products needed clear categorisation and dietary signposting.
I worked with the developer throughout to ensure the front-end architecture matched how the data would actually be structured in Shopify. Selecting "Shakes Only" genuinely filtered to relevant durations and products, rather than hiding irrelevant options through UI trickery.
The tabs in product selection mapped directly to product tags. The filtering logic could be clean because the data model was considered from the start. This wasn't an afterthought added during build. It was designed into the system.
The Results
Design validated, delivered, and approved
While this work didn't launch, it represents a complete, approved solution for a complex product architecture challenge. The bundle builder addressed a genuine business problem: how to guide customers through 120+ products across multiple categories, in a purchase context that required emotional sensitivity, while building something technically feasible and maintainable.
Deliverables included:
Full desktop and mobile designs for the bundle builder flow
Three prototype iterations walking the client through the experience
Home, collection, and product template designs for site-wide consistency
Colour accessibility documentation
Figma file structured for efficient development handoff
Product catalogue structured into a clear bundling experience, without overwhelming customers at an emotionally sensitive decision point.
Product catalogue structured into a clear bundling experience, without overwhelming customers at an emotionally sensitive decision point.
Prototype iterations caught critical issues early, and helpd to deliver a bundle builder that reduced frictions, and focused on conversion.
Prototype iterations caught critical issues early, and helpd to deliver a bundle builder that reduced frictions, and focused on conversion.
Let's get the conversation started.
I work with a small number of brands at a time so I can give each project the attention it needs. Whether you're planning a full redesign or looking to improve what you've got, a quick call is the easiest way to see if we're a good fit.
Get In Touch
