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 Laravel 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.
Technical Solutions
Two technical approaches for the platform's development. The structural differences primarily impact how the platform is built during the Development phase.
Option 1: Headless Shopify Ecosystem
We utilise the existing Shopify engine, but decouple the frontend and develop it using ReactJS, connecting with Shopify via API.
Option 1: Considerations
Key limitations and trade-offs to consider with the Headless Shopify Ecosystem approach.
Option 1: Timeline & Investment
| Phase / Module | Implementation Methodology | Capabilities & Limitations | Estimated Timeline | Investment |
|---|---|---|---|---|
| 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: $[X,XXX] |
| 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: $[X,XXX] |
| 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. |
Fixed: [X] Weeks | Fixed: $[X,XXX] |
| 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. |
[X–X] Weeks | $[X,XXX] – $[X,XXX] |
| 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. |
[X–X] Weeks | $[X,XXX] – $[X,XXX] |
| 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. |
[X–X] Weeks | $[X,XXX] – $[X,XXX] |
| Total Estimated | [Total] Weeks | $[Total] – $[Total] |
Option 2: Enterprise Laravel Architecture
Transition to a highly scalable, future-proof architecture. A single custom Laravel backend powers all content, features, and admin — Shopify handles transactions only.
Option 2: Advantages
Key advantages of the Enterprise Laravel Architecture approach.
Option 2: Timeline & Investment
| Phase / Module | Implementation | Timeline | Investment |
|---|---|---|---|
| Phase 1: Discovery | Stakeholder workshops, technical feasibility, architecture mapping | 15 Jun – 26 Jun (10 Business Days) |
Fixed: $[X,XXX] |
| Phase 2: UX/UI Design | Component-based UI design, premium user experiences unrestricted by Shopify | 29 Jun – 17 Jul (15 Business Days) |
Fixed: $[X,XXX] |
| Phase 3: Core Dev | ReactJS frontend, Laravel backend with PuckJS CMS, Shopify API for transactions | Fixed: [X] Weeks | Fixed: $[X,XXX] |
| Add-On: Interactive Map | Custom Laravel database + admin interface, ReactJS mapping component | [X–X] Weeks | $[X,XXX] – $[X,XXX] |
| Add-On: Configurator | Dedicated Laravel rules engine with visual admin, custom ReactJS interface | [X–X] Weeks | $[X,XXX] – $[X,XXX] |
| Add-On: Partner Portal | Laravel-powered RBAC, secure ReactJS routing and asset delivery | [X–X] Weeks | $[X,XXX] – $[X,XXX] |
| Total Estimated | [Total] Weeks | $[Total] – $[Total] |
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 |
|---|---|---|
| Phase 1: Discovery | 15 Jun – 26 Jun (10 days) Fixed: $[X,XXX] |
15 Jun – 26 Jun (10 days) Fixed: $[X,XXX] |
| Phase 2: UX/UI Design | 29 Jun – 17 Jul (15 days) Fixed: $[X,XXX] |
29 Jun – 17 Jul (15 days) Fixed: $[X,XXX] |
| Phase 3: Core Dev | [X] Weeks Fixed: $[X,XXX] |
[X] Weeks Fixed: $[X,XXX] |
| Add-On: Interactive Map | [X–X] Weeks $[X,XXX] – $[X,XXX] |
[X–X] Weeks $[X,XXX] – $[X,XXX] |
| Add-On: Configurator | [X–X] Weeks $[X,XXX] – $[X,XXX] |
[X–X] Weeks $[X,XXX] – $[X,XXX] |
| Add-On: Partner Portal | [X–X] Weeks $[X,XXX] – $[X,XXX] |
[X–X] Weeks $[X,XXX] – $[X,XXX] |
| Total Estimated | [Total] Weeks $[Total] – $[Total] |
[Total] Weeks $[Total] – $[Total] |
Key Considerations
Fixed Timeline Urgency
The rigid launch deadline requires immediate architectural selection and contract finalisation to prevent project slippage.
Prerequisite for Prioritisation
The Discovery phase serves as the critical alignment window, translating minute operational requirements into a mutually agreed-upon priority roadmap.
MVP Scope Management
While the advanced add-on modules offer extensive feature sets, the Discovery phase will strictly focus on the Minimum Viable Product necessary to safeguard the launch timeline.
Next Steps
Architectural Sign-off
Avon formally selects either Option 1 or Option 2.
Scheduling Confirmation
Both parties align on and lock in the definitive start date for the Discovery phase.
Operational Mobilisation
Intuji secures technical resource allocation and officially initiates the project onboarding workflow.
Document Control & Approval
| Version | Date | Author |
|---|---|---|
| 1.0 | 2nd June 2026 | Aashish Paudel |
Document Reviewed and Approved By
| Name | Maeve Taylor |
| Signature | |
| Date |