Avon Protection | Website Redevelopment Proposal

01

Introduction

Following the initial proposal, Avon's authorised budget for this engagement is $130,000 USD. Of this, $27,000 represents 527 hours already purchased with Intuji and held on account. Those hours will be redirected from ongoing support to this project, leaving approx. $103,000 in new spend. Combined, the total resourcing is comparable to Intuji's original estimate of $149,000 to $197,500.

As the 527 pre-purchased hours will be directed to this project, any support requirements for existing Avon sites during the engagement will need to be arranged separately on a needs basis.

Three add-on modules are in scope for this financial year: the Product Configurator, Knowledge Hub, and Interactive Map. The Gated Partner Portal will be planned and properly scoped for the next financial year. The precise feature scope and effort split for each module will be confirmed in Discovery. Where needed, certain features may be simplified, agreed with Avon before any build work begins.

1 Unified Website

3 Project Phases

3 Modules This FY

02

Recap

Building on the previously selected solution, Avon and Intuji have agreed on the full project scope and confirmed the plan to move forward.

Original Selection

Avon selected the Standard Shopify Build to consolidate the marketing website and ecommerce store on a single, unified platform.

Core website redesign on Shopify Liquid
Marketing site and ecommerce store merged under one domain
Buy Now and Enquire Now dual customer paths
Shopify as the central engine for content and commerce

Confirmed Scope This FY

The working investment for this engagement is approx. $103,000 USD, with 527 pre-purchased hours (valued at $27,000) redirected from support to cover development. Discovery will confirm the exact feature scope for each module.

Product Configurator: A compatibility kit-builder to help customers identify the correct product system. No pricing or checkout flow.
Knowledge Hub: A structured content platform for articles, guides, and thought leadership. Scope to be simplified where needed.
Interactive Map: A visual locator for global sales representatives and distributors.
Zendesk Integration: Contact forms and enquiry flows connected to Avon's existing Zendesk instance.
Gated Partner Portal: Deferred to the next financial year for full scoping.

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
Knowledge Hub
Interactive Map
Zendesk Integration

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

Phase 1: Discovery

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 and content types.
Agree on website pages, information architecture, and navigation.
Discuss third-party app integration requirements.
Define Product Configurator requirements, including compatible product combinations and selection steps.
Define Interactive Map requirements, including how dealers and distributors are displayed and searched.
Define Gated Partner Portal requirements, including login access, user roles, and content migration from Showpad.

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.
Detailed specifications for the map, configurator, and partner portal features.
A Showpad migration plan with content mapping and timeline.

Project Phases

Phase 2: Design

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 used across the entire website.
Design all pages across desktop, tablet, and mobile.
Design the interactive map, product configurator, and partner portal.
Build a clickable Figma prototype so the Avon team can test the experience before development.
Hold 2 feedback sessions to review designs and address all feedback.
Hold a final review meeting to obtain signoff before development begins.

What You Receive

A clickable Figma prototype of the complete website, including all modules.
A design system with all reusable components, colours, and typography.
The information architecture and page structure for the website.
Complete design files for the map, configurator, and partner portal.

Project Phases

Phase 3: Development

4 Sprints

4 Review & Feedback

What We Will Build

Build the frontend 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 article management.
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.
Connect the website with Klaviyo, Docebo, and Zendesk.

What You Receive

UAT access after every sprint to test and provide feedback.
A production-ready website and CMS ready for launch.
All four modules tested and ready for launch: interactive map, product configurator, partner portal, and Knowledge Hub.
Guides and manuals to operate the website and CMS independently.

05

Technical Approach

The Standard Shopify Build uses Shopify's native theme for the website frontend, with Shopify powering commerce, checkout, and admin throughout.

Standard Shopify Build

This approach uses Shopify's native Liquid theme for the website frontend. The backend remains fully powered by Shopify and custom Node.js apps for specialised modules.

A purpose-built Shopify theme delivering the Avon brand within budget.

Frontend

Shopify Liquid

CMS

Theme Editor

Commerce

Shopify

Modules

Node.js / React

Solution Options

Solution

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

Pros & Cons

Understanding the trade-offs of the Standard Shopify Build.

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.

06

Solution Evaluation

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

Core Pillar	Standard Shopify Build	Score
UI/UX	The frontend is built using Shopify Liquid templates. Design is customised within the constraints of Shopify's theme architecture. This means highly fluid animations and fully bespoke layouts will require more technical effort to implement cleanly.	4 / 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
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
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

Solution Evaluation

Evaluation #2: Product Configurator

Core Pillar	Standard Shopify Build	Score
UI/UX	Operating within standard template constraints means the product configurator will function as a multi-step form. Dynamic image changes and advanced animations are technically achievable but require careful scoping. The exact interaction model will be confirmed in the Design phase.	4 / 10
Automation	A custom Shopify application handles backend processing. Configuration selections automatically generate a single Shopify order with accurate pricing, requiring zero manual intervention.	8 / 10
Configurability	Your team will manage product rules using a form-based interface within the Shopify admin. While functional, it relies on manual data entry without visual previews, making complex updates slower.	6 / 10
Future Capability	Introducing advanced capabilities like 3D product modelling or augmented reality in Phase 2 will likely require significant rework or a rebuild of the configurator module.	3 / 10

Solution Evaluation

Evaluation #3: Interactive Map

Core Pillar	Standard Shopify 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 search experience with no smooth animations or fluid transitions when a customer searches for a location.	4 / 10
Automation	The primary purpose of this tool is discovery, allowing users to visually locate regional sales representatives. Backend automation is inherently minimal and handled effectively within this approach.	5 / 10
Configurability	Your team will manage and update global distributor locations using standard Shopify data fields. This provides a functional, straightforward administrative process.	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

Solution Evaluation

Evaluation #4: Gated Partner Portal

Core Pillar	Standard Shopify 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
Automation	Shopify's native authentication system securely manages 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 a custom resource management application within the Shopify backend. The administrative process to manage and distribute these files is straightforward.	8 / 10
Future Capability	This setup is limited strictly to basic file hosting for PDFs, images, and videos. It cannot support in-browser media playback or advanced file previews, restricting how users interact with your assets moving forward.	4 / 10

Solution Evaluation

Solution: Evaluation Scorecard Summary

An assessment of the Standard Shopify Build across all four evaluation pillars.

Evaluation Pillar	Standard Shopify Build
UI/UX	4 / 10
Automation	7 / 10
Configurability	6.3 / 10
Future Capability	3.3 / 10
AVERAGE SCORE	5.1 / 10

This score reflects the inherent trade-offs of building within Shopify's native theme architecture. Intuji will work to maximise quality within these constraints, prioritising the frontend experience throughout the project.

18

Budget Consideration

Why the original estimate of $149,000 to $197,500 is now achievable within the confirmed budget, and how Intuji plans to deliver it.

The Numbers

Avon's authorised budget for this engagement is $130,000 USD. Of this, $27,000 represents 527 hours already purchased with Intuji and held on account.
Those 527 hours will be redirected from support to this project. The remaining working investment is approx. $103,000 USD in new spend.
Of the 527 hours, 37 hours are allocated to Zendesk integration. The remaining approx. 490 hours are directed to the website build.
Discovery will confirm the precise effort split across all modules. Where the detailed scope exceeds what is achievable, options for deferral to the next financial year will be agreed with Avon before any build work begins.

How Intuji Will Manage It

The frontend website experience is the highest priority. All design and interaction quality decisions will protect the customer-facing result first.
Where necessary, admin tooling or back-end functionality may be simplified to protect the quality of the frontend. Any such decisions will be flagged and agreed with Avon before implementation begins.
The exact feature scope for each module will be agreed during Discovery and validated during Design before development begins. There will be no surprises.
Intuji will deliver the highest quality result achievable. The goal is a premium, production-ready platform that represents the Avon Protection brand.

Investment

Working investment of approx. $103,000 USD, plus 527 pre-purchased hours directed to this engagement. Final figures confirmed following Discovery.

Phase / Module	Estimated Timeline
BasicPhase 1: Discovery	15 Jun – 26 Jun (10 Business Days)
BasicPhase 2: UX/UI Design	29 Jun – 10 Jul (10 Business Days)
BasicPhase 3: Core Feature Development	06 Jul – 14 Aug
Add-onInteractive Map	5 – 7 days (Within Core Dev)
Add-onProduct Configurator	8 – 10 days (Within Core Dev)
Working Investment	~$103,000 USD
Pre-purchased Hours (incl. 37 hrs Zendesk)	527 hrs

Investment

Project Timeline

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

Fixed Investment $130,000 USD

Evaluation Score 5.1 / 10

09