Website
Redevelopment
Proposal

Prepared by
Date 2 June 2026
Version 1.0
Scroll
01

Introduction

This proposal outlines two options for Avon to redesign their marketing website and merge it with the shop website. After analysing the requirements against the strict go-live date, Intuji has divided the project scope into two distinct categories: the core functionalities mandatory for the initial launch, and the advanced add-on modules that can be integrated post-launch. .

To achieve the premium design Avon requires, standard Shopify templates are insufficient. Both options separate the visual interface from the backend, using your existing Shopify setup strictly to process transactions. Because the new frontend and the advanced add-on features are built independently, they will require dedicated external server hosting. .

The two approaches detailed below allow Avon to choose the best long-term management strategy: adapting its current Shopify backend ecosystem (Option 1) or transitioning to a centralised, enterprise-grade NestJS administration platform (Option 2). .

2 Solution Options
3 Project Phases
3 Add-on Modules
02

Scope of Work

The scope has been categorised into two groups to facilitate a phased, risk-managed rollout. .

Non-Negotiables

Core Activities

The foundational works required to redesign the frontend, merge both websites, and deliver a fully operational global platform. Mandatory for the initial launch. .

Additional Moduels

Add-on Activities

High-value, specialised modules developed and integrated independently. Not blockers for go-live; can be selected, sequenced, or phased based on operational readiness. .

03

Project Phases

The project follows a structured three-phase methodology. Each phase has defined deliverables for both core launch requirements and optional add-on modules. .

Discovery

Deep-dive into requirements, user journeys, third-party integrations, and content architecture to define the complete technical specification.

Design

Create the premium visual identity, responsive page templates, and complete UX flows for all B2B, B2C, and content experiences.

Development

Build production-ready frontend code, CMS components, ecommerce logic, API integrations, and all backend systems.

Project Phases

Discovery: Core Activities

3 Virtual Sessions

What We Will Cover

  • Map how B2B leads and B2C customers move through your website from first visit to sale.
  • Define what your marketing team needs from the CMS to create and manage pages.
  • Discuss the design direction, colours, and overall experience.
  • Cover the product configurator requirements including business rules and pricing.
  • Plan how the Knowledge Hub organises and displays articles.
  • Define how the website connects with Klaviyo, Docebo, and Zendesk.

What You Receive

  • A detailed requirements document covering what the website will do and how it will work.
  • A clear summary of the business goals, priorities, and success criteria for the project.
Project Phases

Discovery: Add-On Activities

What We Will Do

  • Plan how the dealer and distributor locator works on the interactive map.
  • Define how the product configurator works, including which items can be combined, the selection steps, and pricing.
  • Plan how partners log in and access protected documents, replacing Showpad.
  • Prepare a migration plan for moving existing Showpad content into the new portal.

What You Receive

  • Detailed specifications for the map, configurator, and partner portal features.
  • A Showpad migration plan with content mapping and timeline.
Project Phases

Design: Core Activities

2 Design Reviews

What We Will Do

  • Design how a single website serves both B2B and B2C users with tailored journeys.
  • Create reusable design components that will be used across the entire website.
  • Design all pages that will go on the website across desktop, tablet, and mobile.
  • Build a clickable Figma prototype so the Avon team can test the experience before development.
  • Hold 2 feedback sessions to review the designs and address all feedback.
  • Hold a final review meeting to review all designs and obtain signoff.

What You Receive

  • A clickable Figma prototype of the complete website.
  • A design system with all reusable components, colours, and typography.
  • The information architecture and page structure for the website.
Project Phases

Design: Add-On Activities

What We Will Do

  • Design the interactive map so visitors can find dealers and distributors near them.
  • Design the product configurator with step-by-step selection, pricing, and bundled checkout.
  • Design the Partner Portal with secure login, dashboard, and document downloads.

What You Receive

  • Complete design files for the map, configurator, and partner portal features.
Project Phases

Development: Core Activities

4 Sprints
4 Review & Feedback

What We Will Build

  • Build the frontend presentation layer as per the approved Figma designs.
  • Build the CMS and page builder so the marketing team can update pages and content.
  • Build the B2C shopping experience on Shopify with cart, checkout, and customer accounts.
  • Build admin pages to view and manage B2B enquiries.
  • Build the Knowledge Hub with admin pages for article management.
  • Connect the website with Klaviyo, Docebo, and Zendesk.

What You Receive

  • UAT access after every sprint to test and provide feedback on the modules developed.
  • A production-ready website and CMS ready for launch.
  • Guides and manuals to operate the website and CMS independently.
Project Phases

Development: Add-On Activities

What We Will Build

  • Build the interactive map so visitors can find dealers and distributors near them.
  • Build the product configurator with real-time pricing and bundle checkout.
  • Build the Partner Portal with secure login, account management, and document access.

What You Receive

  • Fully working map, configurator, and partner portal features tested and ready for launch.
04

Solution Options

Both solutions use Shopify as the backend for commerce, checkout, and admin. The only difference is how the website is built.

A

Native Shopify Storefront

This approach uses Shopify's native theme for the frontend, which requires simplifying the premium design and embedding the configurator via iframes to meet the deadline. Behind the scenes, the backend remains powered by Shopify and custom apps.

Cheaper and faster to launch, but compromises the premium design.

Frontend
Page Builder / CMS
Commerce Engine
Additional Modules
B

Custom Headless Architecture

This approach replaces the frontend entirely with a custom React application to deliver the uncompromised design on time with a natively integrated configurator. Behind the scenes, the backend remains powered by Shopify and custom apps.

Delivers the uncompromised design, but requires a higher budget.

Frontend
Page Builder / CMS
Commerce Engine
Additional Modules
Solution Options
Solution A | Native Shopify Storefront

Introduction

This approach uses Shopify's native theme for the frontend, which requires simplifying the premium design and embedding the configurator via iframes to meet the deadline. Behind the scenes, the backend remains powered by Shopify and custom apps.

Cheaper and faster to launch, but compromises the premium design.

Frontend Shopify Liquid

Built within Shopify's native template system.

Page Builder / CMS Shopify Theme Editor

Drag-and-drop editing for your marketing team.

Commerce Engine Shopify

Handles products, cart, checkout, and payments.

Additional Modules Node.js, Remix, React

Product Configurator, Dealer Locator, and Partner Portal, embedded via iframes.

Shopify Monolithic Platform
Coupled Architecture: Native Shopify
Core Pages
Home, Product
Product Configurator
Loaded via Iframe
Store Map
Loaded via Iframe
Partner Portal
Loaded via Iframe
Direct Connection
Unified Shopify Platform Backend
Page Builder / CMS Shopify Theme Editor
Commerce Management
Products, Orders, Checkout, and Payments
  • Product Configurator Data
  • Store Map Data
  • Partner Portal Data
Solution Options
Solution A | Native Shopify Storefront

Pros & Cons

Evaluating the trade-offs of the monolithic storefront approach.

What You Get

  • Lower upfront development cost and reduced initial investment.
  • Automatic payment security and checkout compliance handled natively by Shopify.
  • Ability for the marketing team to edit text and images within default theme settings.
  • Access to standard plug-ins directly from the Shopify App Store.

What You Do Not Get

  • Premium design layouts, as designs must be simplified to fit strict theme templates.
  • Smooth page transitions, which requires full browser page reloads on every click.
  • Native module interfaces, since the configurator, locator, and partner portal must load in iframes.
  • Page layout flexibility, as the marketing team is restricted to updating content in pre-set default theme limits.
Solution Options
Solution B | Custom Headless Architecture

Introduction

This approach replaces the frontend entirely with a custom React application to deliver the uncompromised design on time with a natively integrated configurator. Behind the scenes, the backend remains powered by Shopify and custom apps.

Delivers the uncompromised design on time, with a natively integrated configurator.

Frontend Next.js (React)

Custom-built for the full premium design with fast page loads.

Page Builder / CMS Custom Puck.js Application

Visual page builder inside Shopify Admin. No extra fees.

Commerce Engine Shopify

Headless commerce backend via API for checkout and payments.

Additional Modules Node.js, Remix, React

Product Configurator, Dealer Locator, and Partner Portal, natively integrated.

Custom Hosting Layer: Cloud
Headless Architecture: Next.js
Core Pages
Home, Product
Product Configurator
Built Natively
Store Map
Built Natively
Partner Portal
Built Natively
API Bridge: GraphQL
Managed SaaS Engine: Shopify Cloud
Unified Shopify Platform Backend
Page Builder / CMS Custom Puck.js Application
Commerce Management
Products, Orders, Checkout, and Payments
  • Product Configurator Data
  • Store Map Data
  • Partner Portal Data
Solution Options
Solution B | Custom Headless Architecture

Pros & Cons

Evaluating the trade-offs of the headless architecture approach.

What You Get

  • Delivers the uncompromised premium visual experience and fluid animations required to position Avon as an elite global brand.
  • Instant, app-like page speed transitions to maximise visitor retention.
  • Product Configurator, Dealer Locator, and Partner Portal built natively into the storefront codebase for a seamless user experience.
  • Direct, visual page creation and editing freedom using Puck.js layout blocks in the admin panel.
  • Elimination of recurring third-party CMS subscription fees, saving monthly operational costs.

What You Do Not Get

  • Low-cost implementation budget, as it requires a higher upfront development investment compared to templates.
  • Separate hosting requirements, as the customer-facing storefront must be hosted on its own cloud servers.
  • Zero-maintenance code, requiring an ongoing developer budget for framework security updates.
  • One-click app store plugins, meaning additional Shopify apps must be connected manually via API endpoints by developers.
  • Limitless page layouts, since the marketing team must stick to pre-approved blocks and creating new visual blocks requires a developer.
Evaluation Pillars
05

Solution Evaluation

Each solution is evaluated across four core pillars using a score of 1 to 10, where 10 represents complete alignment with the project requirements.

UI/UX

How premium, customised, and visually engaging the website looks and feels to your users.

Automation

How much manual, operational work the system handles automatically for your team behind the scenes.

Configurability

How easily the marketing team can build pages, update modules, and manage the site without needing a developer.

Future Capability

How scalable the website foundation is to easily add complex new features later without needing to rebuild.

Scoring Key

1 – 3 High Friction
4 – 6 Partial Alignment
7 – 8 Moderate Alignment
9 – 10 Complete Alignment
Evaluation Pillars
05

Assessment: Core Website

Scroll to view full table
Evaluation Pillar Solution A: Monolithic Native Shopify Solution B: Headless Custom Next.js
UI/UX 5 / 10 Rigid Liquid templates restrict complex front-end transitions. Page layouts are limited to standard Shopify themes, diluting the premium brand feel. 9 / 10 Custom Next.js frontend delivers an uncompromised, elite global brand experience. Supports fluid page transitions, complex scroll animations, and bespoke layouts.
Automation 8 / 10 Utilises native Shopify automation for payments, order processing, and customer emails. Operational workflows are smooth with zero manual sync required. 8 / 10 Uses the exact same automated Shopify API backend. Integrates with the custom frontend to ensure identical operational efficiency with zero manual overhead.
Configurability 7 / 10 Core pages are managed easily using the native Shopify Theme Editor. However, custom blocks are restricted to Shopify templates, limiting layout independence. 9 / 10 Integrates Puck.js as a no-code visual page builder. Marketing team can rapidly build pages and update layouts independently without risking design breaks.
Future Capability 4 / 10 Hit a technical ceiling. Adding highly interactive custom features in future phases will require developer workarounds or theme rewrites, reducing long-term ROI. 9 / 10 Decoupled, modular architecture protects long-term ROI. The frontend can be updated or expanded with new React libraries and sub-platforms without rebuilding the backend.
Evaluation Pillars
05

Assessment: Product Configurator

Scroll to view full table
Evaluation Pillar Solution A: Monolithic Native Shopify Solution B: Headless Custom Next.js
UI/UX 4 / 10 The configurator must be embedded as an iframe widget, leading to a disjointed visual flow that feels separate from the main site. 9 / 10 Configurator is built as a native React component, resulting in fluid interactions and zero loading lag for a premium customer journey.
Automation 8 / 10 Custom Node.js backend handles compatibility calculations and automatically sends configured bundles to the Shopify checkout. 8 / 10 Uses the identical automated Node.js rules engine to automatically sync configuration options with stock levels, ensuring zero manual admin work.
Configurability 3 / 10 Updating product rules or options requires manual changes to the hardcoded javascript inside the theme files, requiring developer support. 9 / 10 A dedicated visual admin dashboard allows non-technical administrators to configure compatibility rules and edit product options.
Future Capability 3 / 10 The iframe approach makes future enhancements, like three-dimensional visualisations or augmented reality, difficult to integrate. 9 / 10 Standard React structure allows Avon to easily scale the configurator to support three-dimensional rendering and augmented reality in Phase 2.
Evaluation Pillars
05

Assessment: Interactive Map

Scroll to view full table
Evaluation Pillar Solution A: Monolithic Native Shopify Solution B: Headless Custom Next.js
UI/UX 4 / 10 Rigid third-party widget structure with limited layout control. Does not support fluid animations or custom dark-theme maps. 9 / 10 Custom React Mapbox component styled with Avon brand colours. Offers fluid pan animations, search indicators, and premium info cards.
Automation 8 / 10 Syncs automatically with dealer database. Updates can pull from a shared Google Sheet or API feed to minimise manual entry. 8 / 10 Utilises the same automated data pipeline. Map markers and dealer lists update in real time with zero operational overhead.
Configurability 3 / 10 Map styles and card details are hardcoded in the widget. Modifying layout elements requires developer retainer hours. 9 / 10 Custom visual settings dashboard allows marketing teams to adjust filters, update dealer lists, and change markers without code.
Future Capability 4 / 10 Restricted widget logic cannot support future features like direct dealer quoting or local inventory checks. 9 / 10 Decoupled API architecture allows Avon to expand the map to support local inventory lookups and automated quote routing.
Evaluation Pillars
05

Assessment: Gated Partner Portal

Scroll to view full table
Evaluation Pillar Solution A: Monolithic Native Shopify Solution B: Headless Custom Next.js
UI/UX 4 / 10 Basic Shopify customer pages serve as the portal. Layouts are rigid and simple, failing to convey an elite partner experience. 9 / 10 Completely custom React dashboard designed for distributors. Features elegant file search grids, high-speed document downloads, and customised welcome panels.
Automation 8 / 10 Partner accounts authenticate using standard Shopify logins. Secure access links automatically generate upon admin approval. 8 / 10 Identical secure token auth via Shopify Customer API. Automatic registration validation and instant document access permissions.
Configurability 3 / 10 Adding portal resource sections or updating layout logic requires editing Liquid files, meaning ongoing developer assistance. 9 / 10 Integrates with the custom CMS dashboard. Marketing staff can edit menu sections, upload new assets, and set role permissions with no code.
Future Capability 3 / 10 Hit a functional ceiling. Standard Shopify themes cannot support nested partner hierarchies or secure file storage without a full platform rebuild. 9 / 10 Built as a modular React application, ready to scale to direct partner ordering, custom ERP connections, and secure distributor portals.
Evaluation Pillars
05

Solution: Evaluation Scorecard

An aggregate assessment of both solution architectures across the four decision-making criteria.

Scroll to view full table
Evaluation Pillar Solution A: Monolithic Native Shopify Solution B: Headless Custom Next.js
UI/UX 5 / 10 9 / 10
Automation 8 / 10 8 / 10
Configurability 7 / 10 9 / 10
Future Capability 4 / 10 9 / 10
AVERAGE SCORE 6.0 / 10 8.7 / 10
Solution Options
Solution A | Native Shopify Storefront

Timeline & Investment

Evaluation Score: 6.0 / 10

Scroll to view full table
Phase / Module Estimated Timeline Investment (USD)
BasicPhase 1: Discovery 15 Jun – 26 Jun
(10 Business Days)		 Fixed: $6,550
BasicPhase 2: UX/UI Design 29 Jun – 17 Jul
(15 Business Days)		 Fixed: $19,650
BasicPhase 3: Core Feature Development 06 Jul – 31 Aug $169,880 – $229,410
Add-onInteractive Map 2.5 – 3 days
(Within Core Dev)		 $8,800 – $11,890
Add-onProduct Configurator 3.5 – 5 days
(Within Core Dev)		 $14,040 – $18,900
Add-onGated Partner Portal 3.5 – 5 days
(Within Core Dev)		 $14,040 – $18,900
Total Estimated
Evaluation Score: 6.0 / 10		 15.3 Weeks
(81.5 – 97 days)		 $232,960 – $305,300
Solution Options
Solution B | Custom Headless Architecture

Timeline & Investment

Evaluation Score: 8.7 / 10

Scroll to view full table
Phase / Module Timeline Investment (USD)
BasicPhase 1: Discovery 15 Jun – 26 Jun
(10 Business Days)		 Fixed: $6,550
BasicPhase 2: UX/UI Design 29 Jun – 17 Jul
(15 Business Days)		 Fixed: $19,650
BasicPhase 3: Core Feature Development 06 Jul – 31 Aug $194,400 – $262,450
Add-onInteractive Map 2.5 – 3 days
(Within Core Dev)		 $11,420 – $15,445
Add-onProduct Configurator 4.5 – 6 days
(Within Core Dev)		 $23,680 – $32,010
Add-onGated Partner Portal 3.5 – 5 days
(Within Core Dev)		 $17,500 – $23,680
Total Estimated
Evaluation Score: 8.7 / 10		 15.3 Weeks
(85.5 – 101 days)		 $273,200 – $359,785
06

Investment & Timeline Summary

Discovery and Design timelines and investments remain identical regardless of the selected technical architecture.

Phase / Module Option 1
Shopify Monolith		 Option 2
Headless Shopify
Investment (USD) Timeline Days Investment (USD) Timeline Days
BasicPhase 1: Discovery $6,550 15 Jun - 26 Jun 10 $6,550 15 Jun - 26 Jun 10
BasicPhase 2: UX/UI Design $19,650 29 Jun - 17 Jul 15 $19,650 29 Jun - 17 Jul 15
BasicPhase 3: Core Feature Development $169,880 - $229,410 06 Jul - 31 Aug 34-46 $194,400 - $262,450 06 Jul - 31 Aug 34-46
Add-onInteractive Map $8,800 - $11,890 Within Core Dev 2.5-3 $11,420 - $15,445 Within Core Dev 3.5-4
Add-onProduct Configurator $14,040 - $18,900 Within Core Dev 3.5-5 $23,680 - $32,010 Within Core Dev 5.5-7
Add-onGated Partner Portal $14,040 - $18,900 Within Core Dev 3.5-5 $17,500 - $23,680 Within Core Dev 4.5-6
BasicUAT Session 04 September 1 04 September 1
BasicUAT Testing and Finalisation 07 Sep - 18 Sep 10 07 Sep - 18 Sep 10
BasicProduction Release 21 Sep - 25 Sep
(Within the week) 		2 21 Sep - 25 Sep
(Within the week) 		2
Total Estimated $232,960 - $305,300 15.3 Weeks 81.5-97 $273,200 - $359,785 15.3 Weeks 85.5-101

Note Option 1 requires fewer hours than Option 2, but the timeline remains the same for both solutions. We will allocate resources accordingly to adhere to the same timeline, making it easy to align with leadership meetings and go-live dates. .

07

Project Timeline

High-level roadmap from kickoff to launch. Exact dates will be confirmed during Discovery. .

Jun
Jul
Aug
Sep
15
22
29
7
14
21
28
4
11
18
25
1
8
15
22
Discovery 10 days
15 Jun – 26 Jun
UX/UI Design 15 days
29 Jun – 17 Jul
Core Development 34–46 days
06 Jul – 31 Aug
Add-on Modules Within core dev
Map · Configurator · Portal
UAT Session 1 day
04 Sep
UAT Testing 10 days
07 Sep – 18 Sep
Production Release Within the week
21 – 25 Sep
Leadership Updates
10 Jun
6 Jul
3 Aug
Total Duration 15.3 Weeks
Option 1 Days 81–97 days
Option 2 Days 85.5–101 days
08

Project Investment

Discovery
$6,550
$6,550
UX/UI Design
$19,650
$19,650
Core Development
$169,880 – $229,410
$194,400 – $262,450
Interactive Map
$8,800 – $11,890
$11,420 – $15,445
Product Configurator
$14,040 – $18,900
$23,680 – $32,010
Gated Partner Portal
$14,040 – $18,900
$17,500 – $23,680
Total
$232,960 – $305,300
$273,200 – $359,785

Note All prices listed above are in United States Dollars (USD). .

Option 1: Headless Shopify Ecosystem Option 2: Enterprise NestJS Architecture
09

Client Involvement

Estimated time commitment required from the Avon team across each project phase. .

Jun
Jul
Aug
Sep
15
22
29
7
14
21
28
4
11
18
25
1
8
15
22
Discovery
6 hours
Design
6 - 8 hours
Development
8 - 10 hours
UAT Session
3 - 4 hours
UAT Testing
2 Weeks
10

Key Considerations

Fixed Timeline Urgency

To stay on track for launch, we'll need to lock in the architecture choice and contract as soon as possible.

Timeline Adherence

The project must progress per the proposed timeline to meet the deadline. If any delays occur, we will reassess and adjust the plan to ensure a September 21 go-live. .

Prerequisite for Prioritisation

During Discovery, we'll work together to agree on what gets built first, so development starts with a clear, shared roadmap.

MVP Scope Management

We'll keep the initial build focused on what's essential for launch. Advanced add-on features can be layered in afterwards.

Estimation Refinement

These estimates are high-level for now. We'll lock in exact timelines and costs once Discovery and Design wrap up. The September 04 launch target stays firm.

Our Recommendation

Both solutions are priced similarly. We recommend Solution 2 because it makes future upgrades easy. For example, the Configurator can grow with your needs without rebuilding from scratch.

11

Next Steps

1
Step 1

Pick a Solution

Choose between Solution 1 or Solution 2.

2
Step 2

Lock in the Start Date

We align on a Discovery kickoff date.

3
Step 3

Kick Off the Project

Our team is assigned and work begins.

Need to share this proposal with your wider team? Download a PDF copy below. .

Download as PDF