Website
Redevelopment
Proposal

Prepared by
Date 8 June 2026
Version 1.1
Scroll
01

Introduction

Following our previous proposal, Avon selected the "Good" tier and requested additional features to be included in the initial launch. This final proposal reflects that expanded scope. It presents two solution approaches, each evaluated against the same four pillars, with the project divided into core functionalities mandatory for launch and add-on modules that extend the platform.

The solution consolidates the marketing website and the ecommerce store on Shopify as a single, unified platform. Avon confirmed this direction as the right fit for the current stage of internal process refinement.

In addition to the core website redesign, four new modules have been added: Product Configurator, Gated Partner Portal, Knowledge Hub, and Interactive Map. The investment and timeline in this proposal reflect the complete, updated scope.

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

Recap

In our previous proposal, we presented three solution tiers. Avon selected the "Good" option and requested additional features to be included. This is the final proposal reflecting that expanded scope.

Previously Selected Option: Good Tier

Consolidate the marketing website and ecommerce store on Shopify as a single, unified platform. Avon confirmed this direction as the right fit for the current stage of internal process refinement.

  • Core website redesign on Shopify Liquid
  • Marketing + shop merged under one domain
  • Shopify as the central engine for content and sales
  • Buy Now + Enquire Now dual customer paths
  • No Product Configurator

Now Added

Following the team review, four additional modules have been confirmed for the initial launch.

  • Product Configurator: A guided tool to help customers build compatible product systems.
  • Gated Partner Portal: A secure resource hub replacing Showpad for partners and media.
  • Knowledge Hub: An enhanced blog area positioned as a thought-leadership platform.
  • Interactive Map: A visual locator for sales representatives and distributors.

Note: As the scope of the project has increased, this will increase the overall project resources and investment accordingly.

03

Scope of Work

The new 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.

  • Full website redesign and responsive frontend rebuild
  • Marketing site and ecommerce store merged under one domain
  • B2B and B2C customer paths
  • Knowledge Hub replacing the existing blog
  • CMS page builder for marketing team autonomy
  • SEO migration and redirect strategy
  • WCAG 2.2 AA accessibility compliance
  • GDPR compliant data handling
Additional Modules

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.

  • Product Configurator
  • Interactive Map
  • Gated Partner Portal
04

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 the B2B user journey from first visit to enquiry.
  • Map the B2C user journey from first visit to purchase.
  • Discuss design direction, visual identity, and brand experience.
  • Define the Knowledge Hub structure, content types, and editorial flow.
  • Agree on website pages, information architecture, and navigation.
  • Discuss third-party app integration requirements.

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

  • Discuss the Product Configurator requirements, including compatible product combinations, selection steps, and pricing rules.
  • Discuss the Interactive Map requirements, including how dealers and distributors are displayed and searched.
  • Discuss the Gated Partner Portal requirements, including login access, user roles, and content migration from Showpad.

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.
05

Solution Options

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

A

Standard Shopify Build

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
Our Recommendation B

Custom Front-End Build

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 | Standard Shopify Build

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 | Standard Shopify Build

Pros & Cons

Evaluating the trade-offs of the monolithic storefront approach.

What You Get

  • A fresh, custom design built for your brand within a Shopify Liquid theme, rather than a generic store template.
  • Much cheaper to build because we use existing systems instead of coding everything from scratch.
  • Quicker to build, reducing the risk of project delays and helping you meet your target launch date.
  • Everything stays inside Shopify, making it simple and familiar for your internal team to manage.
  • Your marketing team can easily update content and images within the pre-built custom templates.

What You Do Not Get

  • Strict theme rules force us to negotiate on design elements. The website will lack the fluid, unique feel of top-tier global brands.
  • Customer tools are basic, relying on simple forms, a clunky map, and forced file downloads rather than easy online previews.
  • Your marketing team cannot create new pages on their own. They will need technical support to build any new layouts or campaign structures.
  • Future growth is highly limited. Adding Phase 2 features like 3D products or complex portals will likely force a costly, full rebuild.
Solution Options
Solution B | Custom Front-End Build Our Recommendation

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 Front-End Build Our Recommendation

Pros & Cons

Evaluating the trade-offs of the headless architecture approach.

What You Get

  • An elite, uncompromised design tailored strictly for your brand. The website will have the fluid, unique feel of top-tier global brands.
  • Customer tools are highly interactive, offering smooth map searches, instant product image updates, and easy online document previews.
  • Your marketing team can create new pages on their own. They will have visual tools to build flexible layouts and campaign structures without technical support.
  • Future growth is limitless. You can add Phase 2 features like 3D products or complex portals without forcing a costly, full rebuild.

What You Do Not Get

  • The time and financial investment required are higher than the standard approach.
  • We will need to host and manage the front-end of the website ourselves.
06

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
Solution Evaluation

Evaluation #1: Core Activities

Core Pillar Solution A: Standard Shopify Build Score Solution B: Custom Front-End Build Score
UI/UX Achieving a premium design requires building custom components from scratch, which would break the fixed launch deadline. To launch on time, we must make design trade-offs and adapt to standard, pre-built layouts. This limits flexibility, restricting our ability to deliver a highly customised, elite brand experience. 4 / 10 This solution is built on a modern framework optimised for custom visual designs. It delivers a fluid, instant-loading flagship brand experience within your exact timeline and budget. 9 / 10
Automation By utilising Shopify's native capabilities, core functions like secure payments, order processing, automated customer emails, and lead data capture seamlessly integrate with your backend. This level of automation is highly effective for your current requirements and keeps manual administration to a minimum. 7 / 10 By utilising Shopify's native capabilities, core functions like secure payments, order processing, automated customer emails, and lead data capture seamlessly integrate with your backend. This level of automation is highly effective for your current requirements and keeps manual administration to a minimum. 7 / 10
Configurability Utilising Shopify as the primary CMS means your marketing team can easily manage and update pre-created template blocks. However, because the system restricts you to these native tools, creating entirely new, custom page layouts will require technical support. 4 / 10 This option includes a custom drag-and-drop visual page builder, empowering your marketing team to instantly design new layouts, launch campaigns, and update content entirely without technical support. 9 / 10
Future Capability Because the website foundation is tightly bound to standard templates, adding complex B2B portals later will force inefficient workarounds or a costly full rebuild. 3 / 10 The front-end website operates completely independently, allowing it to easily scale and support massive Phase 2 B2B portals without ever needing to rebuild the main website. 9 / 10
Solution Evaluation

Evaluation #2: Product Configurator

Core Pillar Solution A: Standard Shopify Build Score Solution B: Custom Front-End Build Score
UI/UX Operating within standard template constraints means you will receive a basic product configurator lacking animations, dynamic image changes, or 3D rendering. It functions strictly as a standard multi-step form, delivering basic retail utility rather than an engaging brand experience. 4 / 10 This option replaces basic forms with a highly interactive visual configurator. As customers select different product options, the main image updates instantly to display their exact combination. This delivers a premium, engaging experience, provided Avon supplies the necessary images for all potential product combinations. 9 / 10
Automation Both solutions utilise the same custom Shopify application for backend processing, ensuring operations remain highly streamlined. Configuration selections automatically generate a single Shopify order with accurate pricing, requiring zero manual intervention. 8 / 10 Both solutions utilise the same custom Shopify application for backend processing, ensuring operations remain highly streamlined. Configuration selections automatically generate a single Shopify order with accurate pricing, requiring zero manual intervention. 8 / 10
Configurability Your team will manage product rules (e.g., which mask pairs with which filter) using a standard, form-based interface. While functional, it relies on manual data entry without visual previews, making complex updates slower and more tedious. 6 / 10 Your team benefits from an intuitive, visual rule-setting interface. Instead of relying on basic forms, administrators can visually map and verify configuration rules, making it significantly faster and easier to manage complex product relationships. 9 / 10
Future Capability This setup hits a sharp technical ceiling. Introducing advanced capabilities like 3D product modelling or augmented reality (AR) in Phase 2 will likely require discarding this version and investing in a costly rebuild. 3 / 10 The modular foundation is inherently prepared for advanced visual integrations. Features like 3D product modelling or AR can be seamlessly plugged in during Phase 2, fully protecting your initial investment. 9 / 10
Solution Evaluation

Evaluation #3: Interactive Map

Core Pillar Solution A: Standard Shopify Build Score Solution B: Custom Front-End Build Score
UI/UX Relying on standard templates restricts the map to a basic embedded window. Visually, it looks like a disconnected box, and functionally, it offers a rigid, clunky search experience with no smooth animations or fluid transitions when a customer searches for a location. 4 / 10 The modern architecture seamlessly integrates the map directly into the website. Visually, it perfectly matches your elite brand identity, and functionally, it provides a highly responsive, effortless search experience with instant, smooth transitions when users interact with it. 9 / 10
Automation The primary purpose of this tool is discovery, allowing users to visually locate regional sales representatives. As such, backend automation is inherently minimal, with both solutions handling this basic requirement equally well. 5 / 10 The primary purpose of this tool is discovery, allowing users to visually locate regional sales representatives. As such, backend automation is inherently minimal, with both solutions handling this basic requirement equally well. 5 / 10
Configurability Your team will manage and update global distributor locations using standard Shopify data fields. This provides a functional, straightforward administrative process that remains identical across both solutions. 7 / 10 Your team will manage and update global distributor locations using standard Shopify data fields. This provides a functional, straightforward administrative process that remains identical across both solutions. 7 / 10
Future Capability Should you wish to introduce advanced features like real-time tracking or dynamic map updates in Phase 2, the standard templates will struggle to process smooth transitions, representing a significant technical limitation. 3 / 10 The modern framework is highly capable of handling complex visual upgrades. If you introduce real-time distributor tracking or dynamic map transitions later, the architecture will support it flawlessly. 8 / 10
Solution Evaluation

Evaluation #4: Gated Partner Portal

Core Pillar Solution A: Standard Shopify Build Score Solution B: Custom Front-End Build Score
UI/UX Working within standard templates means users will see a basic, text-heavy list of available resources. They cannot preview documents like PDFs in the browser; they must physically download the files to their device to see the contents. 4 / 10 This option provides a premium interface with engaging visual card layouts. It includes built-in preview functionality, allowing distributors and media to view PDFs directly within the browser before deciding to download them. 9 / 10
Automation Both solutions utilise Shopify's native authentication system to securely manage user logins and role-based access. The backend automatically records download logs, giving your team clear visibility over who accesses which resources without any manual tracking. 8 / 10 Both solutions utilise Shopify's native authentication system to securely manage user logins and role-based access. The backend automatically records download logs, giving your team clear visibility over who accesses which resources without any manual tracking. 8 / 10
Configurability To upload a new PDF or video, your marketing team will use the exact same custom resource management application within the Shopify backend. The administrative process to manage and distribute these files is straightforward and identical across both solutions. 8 / 10 To upload a new PDF or video, your marketing team will use the exact same custom resource management application within the Shopify backend. The administrative process to manage and distribute these files is straightforward and identical across both solutions. 8 / 10
Future Capability This setup is limited strictly to basic file hosting for PDFs, images, and videos. It hits a technical ceiling because it cannot support in-browser media playback or advanced file previews, restricting how users interact with your assets moving forward. 4 / 10 The modern architecture easily supports advanced file rendering. As you expand the portal, you can seamlessly introduce in-browser video playback and the ability to preview complex files, such as Excel spreadsheets, directly within the interface. 9 / 10
Solution Evaluation

Solution: Evaluation Scorecard Summary

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

Evaluation Pillar Solution A: Standard Shopify Build Solution B: Custom Front-End Build
UI/UX 4 / 10 9 / 10
Automation 7 / 10 7 / 10
Configurability 6.3 / 10 8.3 / 10
Future Capability 3.3 / 10 8.8 / 10
AVERAGE SCORE 5.1 / 10 8.3 / 10
Solution Options
Solution A | Standard Shopify Build

Investment

Evaluation Score: 5.1 / 10

Phase / Module Estimated Timeline Investment (USD)
BasicPhase 1: Discovery 15 Jun – 26 Jun
(10 Business Days)		 $6,500
BasicPhase 2: UX/UI Design 29 Jun – 10 Jul
(10 Business Days)		 $13,000
BasicPhase 3: Core Feature Development 06 Jul – 14 Aug $110,000 – $140,000
Add-onInteractive Map 5 – 7 days
(Within Core Dev)		 $6,000 – $10,000
Add-onProduct Configurator 8 – 10 days
(Within Core Dev)		 $10,000 – $14,000
Add-onGated Partner Portal 8 – 10 days
(Within Core Dev)		 $10,000 – $14,000
Total Estimated
Evaluation Score: 5.1 / 10 		$149,000 – $197,500
Solution Options
Solution A | Standard Shopify Build

Project Timeline

Jun
Jul
Aug
Sep
15
22
29
7
14
21
28
4
11
18
1
8
15
22
Discovery 10 days
15 Jun – 26 Jun
UX/UI Design 10 days
29 Jun – 10 Jul
Core Development ~30 days
06 Jul – 14 Aug
Add-on Modules Within core dev
Map · Configurator · Portal
UAT Session 1 day
17 Aug
UAT Testing 10 days
18 Aug – 29 Aug
Production Release Within the week
31 Aug – 4 Sep
Leadership Updates
10 Jun
6 Jul
3 Aug
Estimated Total $149,000 – $197,500
Evaluation Score 5.1 / 10
Solution Options
Solution B | Custom Front-End Build Our Recommendation

Investment

Evaluation Score: 8.3 / 10

Phase / Module Estimated Timeline Investment (USD)
BasicPhase 1: Discovery 15 Jun – 26 Jun
(10 Business Days)		 $6,500
BasicPhase 2: UX/UI Design 29 Jun – 17 Jul
(15 Business Days)		 $19,000
BasicPhase 3: Core Feature Development 06 Jul – 31 Aug $170,000 – $230,000
Add-onInteractive Map 6 – 8 days
(Within Core Dev)		 $9,000 – $12,000
Add-onProduct Configurator 15 – 17 days
(Within Core Dev)		 $20,000 – $25,000
Add-onGated Partner Portal 10 – 12 days
(Within Core Dev)		 $14,000 – $18,000
Total Estimated
Evaluation Score: 8.3 / 10 		$238,500 – $310,500
Solution Options
Solution B | Custom Front-End Build Our Recommendation

Project Timeline

Jun
Jul
Aug
Sep
15
22
29
7
14
21
28
4
11
18
25
1
8
15
Discovery 10 days
15 Jun – 26 Jun
UX/UI Design 15 days
29 Jun – 17 Jul
Core Development ~40 days
06 Jul – 31 Aug
Add-on Modules Within core dev
Map · Configurator · Portal
UAT Session 1 day
1 Sep
UAT Testing 10 days
2 Sep – 15 Sep
Production Release Within the week
16 – 22 Sep
Leadership Updates
10 Jun
6 Jul
3 Aug
Estimated Total $238,500 – $310,500
Evaluation Score 8.3 / 10
07

Project Investment

Discovery
$6,500
$6,500
UX/UI Design
$13,000
$19,000
Core Development
$110,000 – $140,000
$170,000 – $230,000
Interactive Map
$6,000 – $10,000
$9,000 – $12,000
Product Configurator
$10,000 – $14,000
$20,000 – $25,000
Gated Partner Portal
$10,000 – $14,000
$14,000 – $18,000
Total
$149,000 – $197,500
$238,500 – $310,500

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

Solution A: Standard Shopify Build Solution B: Custom Front-End Build
08

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
09

Key Considerations

Expanded Project Scope

The scope of this project has grown beyond the original discussion. This proposal reflects the updated, expanded requirements that Avon confirmed for the initial launch.

Fixed Go-Live Deadline

The target launch date is fixed and non-negotiable. All planning, resourcing, and delivery milestones are structured around meeting this deadline without compromise.

Avon Team Availability

To meet the deadline, the Avon team must be available for reviews and approvals at the agreed checkpoints. Delays in feedback directly impact the delivery schedule.

High-Level Estimates

The investment and timeline figures provided are based on high-level requirements. Detailed requirements will be collected during the Discovery phase and further refined in Design.

Estimates Subject to Change

All figures in this proposal are estimates. They may be revised following the Discovery and Design phases as the full scope, technical complexity, and integration requirements become clear.

10

Next Steps

1

Choose a Solution

2

Sign Off and Set a Start Date for Discovery

3

Kick Off Discovery Session

Download Proposal as PDF