Website
Redevelopment
Proposal
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).
Scope of Work
The scope has been categorised into two groups to facilitate a phased, risk-managed rollout.
Non-Negotiables
The foundational works required to redesign the frontend, merge both websites, and deliver a fully operational global platform. Mandatory for the initial launch.
Phased Modules
High-value, specialised modules developed and integrated independently. Not blockers for go-live; can be selected, sequenced, or phased based on operational readiness.
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.
Core Activities
The following activities make up the Discovery phase. They provide the essential foundation needed to align our teams and ensure a successful website redevelopment.
Frontend Consolidation Scope
Analyse and map structural requirements for merging the marketing and shop websites into a single cohesive global frontend.
B2B User Journey Definition
Document form fields, routing rules, and notifications for the B2B lead generation workflow.
B2C User Journey Definition
Map out e-commerce cart, checkout, user account, and payment gateway requirements for the B2C flow.
CMS Architecture & Template Constraints
Map content editing requirements and audit Shopify template limits for custom landing pages.
Knowledge Hub Taxonomy
Define categories, tags, search filtering, and author attribution for the thought-leadership repository.
Third-Party Data Workflows
Map data inputs, outputs, and sync frequencies between the frontend/Shopify and Klaviyo, Docebo, and Zendesk APIs.
Add-On Activities
Optional Discovery activities that can be selected and sequenced independently. These are not blockers for launch but add significant value when included.
Interactive Map Backend & Plotting Engine
Define technical specs for a custom backend location engine and secure coordinate transmission to the frontend.
Configurator Compatibility Matrix
Define logic and admin UI for a backend rule engine mapping strict product compatibility dependencies.
Configurator Frontend Pricing
Document the user interface requirements for step-by-step part selection, dynamic pricing aggregation, and bundle checkout.
Partner Portal Role-Based Access
Map user management architecture, role definitions, access permissions, and secure document gating to replace Showpad.
Content Migration Specifications
Define data structure, metadata fields, and import schemas for bulk migration of existing Showpad assets.
Core Activities
The core design activities that translate Discovery findings into high-fidelity, responsive visual designs ready for development.
Global UI/UX Design System
Establish a comprehensive, premium digital style guide (typography, colour palette, button states, spacing rules) that elevates the Avon brand to a global standard.
Unified Navigation & Information Architecture
Design responsive global header and footer navigation menus that intuitively direct B2B and B2C traffic from a single unified entry point.
Core Page Templates (High-Fidelity)
Design responsive frontend layouts for Homepage, Category/Listing Pages, Standard Text/About Pages, and Contact Pages across Desktop, Tablet, and Mobile breakpoints.
B2B Lead Generation Flow
Design the complete UX journey for corporate and government clients, including inquiry forms, gated content access points, and confirmation states.
B2C Ecommerce Flow
Design the complete responsive Shopify integration journey: Product Detail Pages, Cart, secure Checkout interface, and Customer Account dashboard.
Knowledge Hub Interface
Design frontend layouts for the thought-leadership blog: hub index, category filtering, individual article layouts, and author profiles.
Add-On Activities
Optional Design activities for specialised modules. These can be sequenced independently based on priority and budget.
Interactive Map Interface
Design the responsive frontend map component, including location pin clustering, a searchable location list/sidebar for sales reps and distributors, and individual location detail cards.
Product Configurator Frontend
Design a step-by-step, responsive visual interface that guides users through selecting base products and filtering compatible add-ons, with bundled pricing and checkout handoff.
Protected Partner Portal
Design the secure login screen, password recovery flow, and gated frontend dashboard for authenticated users to search, preview, and download secure assets.
Core Activities
The core development work that builds production-ready code from approved designs. These are mandatory for launch.
Global Frontend Build
Translate high-fidelity responsive designs into production-ready frontend code for all core templates across all breakpoints.
CMS Component Development
Build backend administrative interfaces and modular page-builder components so the marketing team can create and manage landing pages without developer intervention.
B2C Ecommerce Logic (Shopify)
Implement the B2C transactional engine: dynamic cart slide-out, secure checkout flow, user account dashboards, and payment gateway connections.
B2B Lead Generation Engine
Program secure form capture, data validation logic, database storage, and automated routing rules for B2B corporate and government inquiries.
Knowledge Hub Development
Develop the dynamic thought-leadership repository, implementing taxonomy architecture, dynamic search/filtering logic, and automated author attribution.
Third-Party API Integrations
Program secure, automated data handoffs and API connections between the website and Klaviyo (marketing), Docebo (LMS), and Zendesk (support).
Add-On Activities
Optional Development modules that can be built independently. Not blockers for go-live; sequenced based on operational readiness.
Interactive Map
Develop the backend location database and CRUD admin interface. Build responsive frontend map with mapping API, dynamic pins, clustering, and searchable location sidebar.
Product Configurator
Develop the administrative compatibility engine and dynamic frontend application that enforces rules in real time, calculates bundle pricing, and passes grouped items to checkout.
Partner Portal
Develop backend admin for uploading datasheets/media and managing partner accounts. Build secure login gateway, role-based access logic, and gated frontend dashboard.
Solution Options
Two technical approaches for the platform's development. The structural differences primarily impact how the platform is built during the Development phase.
Headless Shopify Ecosystem
We utilise the existing Shopify engine, but decouple the frontend and develop it using ReactJS, connecting with Shopify via API.
Considerations
Key limitations and trade-offs to consider with the Headless Shopify Ecosystem approach.
Timeline & Investment
| Phase / Module | Implementation Methodology | Capabilities & Limitations | Estimated Timeline | Investment (USD) |
|---|---|---|---|---|
| Phase 1: Discovery | Stakeholder workshops, technical feasibility analysis, and system architecture mapping. | Capabilities: Delivers comprehensive Business Requirements Documents (BRD) and
Functional Requirements Documents (FRD), establishing a locked-in technical blueprint and roadmap
prior to design. Limitations: N/A |
15 Jun – 26 Jun (10 Business Days) |
Fixed: $6,550 |
| Phase 2: UX/UI Design | Component-based UI design focused on premium user experiences, unrestricted by Shopify theme constraints. | Capabilities: Provides fully approved, interactive visual prototypes optimised for
development production. Limitations: N/A |
29 Jun – 17 Jul (15 Business Days) |
Fixed: $19,650 |
| Phase 3: Core Feature Development | Custom headless frontend developed in ReactJS. Connected to Shopify's Storefront API for e-commerce transactions and Metaobjects for CMS data. | Capabilities: Achieves a premium, unrestricted frontend UI facilitating standard
B2B/B2C user journeys. Limitations: Managing complex, dynamic page layouts using Shopify's native backend fields (Metaobjects) is not as intuitive for marketing teams as a dedicated visual CMS. |
06 Jul – 31 Aug | $169,880 – $229,410 |
| Add-On: Interactive Map | Backend: Custom private Shopify app (Node.js) for location data management. Frontend: Custom ReactJS component on the headless storefront. |
Capabilities: Provides a standard, searchable distributor map displaying location
pins. Limitations: Lacks advanced rendering capabilities such as visual location clustering or complex custom data filtering. |
2.5 – 3 days (Within Core Dev) |
$8,800 – $11,890 |
| Add-On: Product Configurator | Backend: Custom private Shopify app (Node.js) to process fundamental compatibility
logic. Frontend: Custom ReactJS interface connected to the Storefront API. |
Capabilities: Executes a fundamental compatibility rules engine to ensure correct
product combinations at checkout. Limitations: Lacks a visual administrative dashboard; compatibility rules must be hard-coded and will require manual developer updates. |
3.5 – 5 days (Within Core Dev) |
$14,040 – $18,900 |
| Add-On: Gated Partner Portal | Backend: Custom logic verifying Shopify Customer API authentication status. Frontend: ReactJS routes protected by authentication checks. |
Capabilities: Restricts specified pages and assets to authenticated partner
accounts. Limitations: Lacks granular, enterprise-grade role management and secure, partitioned document hosting. |
3.5 – 5 days (Within Core Dev) |
$14,040 – $18,900 |
| Total Estimated | 15.3 Weeks (81.5 – 97 days) |
$232,960 – $305,300 |
Enterprise NestJS Architecture
Transition to a highly scalable, future-proof architecture. A single custom NestJS backend powers all content, features, and admin. Shopify handles transactions only.
Advantages
Key advantages of the Enterprise NestJS Architecture approach.
Timeline & Investment
| Phase / Module | Implementation Methodology | Capabilities & Limitations | Timeline | Investment (USD) |
|---|---|---|---|---|
| Phase 1: Discovery | Stakeholder workshops, technical feasibility analysis, and system architecture mapping. | Capabilities: Delivers comprehensive Business Requirements Documents (BRD) and
Functional Requirements Documents (FRD), establishing a locked-in technical blueprint and roadmap
prior to design. Limitations: N/A |
15 Jun – 26 Jun (10 Business Days) |
Fixed: $6,550 |
| Phase 2: UX/UI Design | Component-based UI design focused on premium user experiences, unrestricted by Shopify constraints. | Capabilities: Provides fully approved, interactive visual prototypes optimised for
development production. Limitations: N/A |
29 Jun – 17 Jul (15 Business Days) |
Fixed: $19,650 |
| Phase 3: Core Feature Development | Custom headless frontend in ReactJS. Backend powered by Laravel (with Puck JS for CMS). Connected to Shopify's Storefront API strictly for transactions. | Capabilities: Achieves a premium frontend UI. The marketing team gains full
autonomy via a drag-and-drop visual CMS, managed entirely from a centralised Laravel
dashboard. Limitations: N/A |
06 Jul – 31 Aug | $194,400 – $262,450 |
| Add-On: Interactive Map | Backend: Custom Laravel database and administration interface. Frontend: ReactJS component interacting with a dynamic mapping API. |
Capabilities: Delivers an optimised mapping interface featuring custom data
filtering, visual location clustering, and an easy-to-use Laravel admin dashboard to update
locations. Limitations: N/A |
2.5 – 3 days (Within Core Dev) |
$11,420 – $15,445 |
| Add-On: Product Configurator | Backend: Dedicated Laravel compatibility rules engine with a visual admin
dashboard. Frontend: Custom ReactJS interface passing automated bundles to the Shopify Cart API. |
Capabilities: Provides a highly sophisticated visual configuration tool for users.
The Avon team receives a visual admin dashboard to easily manage and update complex compatibility
rules without touching code. Limitations: N/A |
4.5 – 6 days (Within Core Dev) |
$23,680 – $32,010 |
| Add-On: Gated Partner Portal | Backend: Laravel-powered user authentication and role-based access management. Frontend: Secure ReactJS routing and asset delivery. |
Capabilities: Functions as an enterprise-grade standalone software platform,
featuring strict role-based asset permissions and secure document management, entirely controlled via
Laravel. Limitations: N/A |
3.5 – 5 days (Within Core Dev) |
$17,500 – $23,680 |
| Total Estimated | 15.3 Weeks (85.5 – 101 days) |
$273,200 – $359,785 |
Investment & Timeline Summary
Discovery and Design timelines and investments remain identical regardless of the selected technical architecture.
| Phase / Module | Option 1 Headless Shopify |
Option 2 Enterprise Laravel |
||||
|---|---|---|---|---|---|---|
| Investment (USD) | Timeline | Days | Investment (USD) | Timeline | Days | |
| Phase 1: Discovery | $6,550 | 15 Jun - 26 Jun | 10 | $6,550 | 15 Jun - 26 Jun | 10 |
| Phase 2: UX/UI Design | $19,650 | 29 Jun - 17 Jul | 15 | $19,650 | 29 Jun - 17 Jul | 15 |
| Phase 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-On: Interactive Map | $8,800 - $11,890 | Within Core Dev | 2.5-3 | $11,420 - $15,445 | Within Core Dev | 3.5-4 |
| Add-On: Product Configurator | $14,040 - $18,900 | Within Core Dev | 3.5-5 | $23,680 - $32,010 | Within Core Dev | 5.5-7 |
| Add-On: Gated Partner Portal | $14,040 - $18,900 | Within Core Dev | 3.5-5 | $17,500 - $23,680 | Within Core Dev | 4.5-6 |
| UAT Session | 04 September | 1 | 04 September | 1 | ||
| UAT Testing and Finalisation | 07 Sep - 18 Sep | 10 | 07 Sep - 18 Sep | 10 | ||
| Production 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.
Project Timeline
High-level roadmap from kickoff to launch. Exact dates will be confirmed during Discovery.
Project Investment
Note All prices listed above are in United States Dollars (USD).
Client Involvement
Estimated time commitment required from the Avon team across each project phase.
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.