MVP final scope

Final list of components

List of components agreed on 16-05-2022

MILESTONE 1: Piece together a single BASIC PAGE of key foundational elements 

• Container

• Grid

• Section

• Typography 

• Image

• Icon

• Heading Block

• Link

• Button

• CTA Block

• Accordion Item

• Accordion List

• Page Header

• Text box

MILESTONE 2: Add the site ‘frame’ necessary to make a multi-page deliverable

• Navigation Link

• Navigation

• Logo

• Basic Header (i.e. excl. Site Search)

• Subtle Button variant – necessary for Social Icons in Footer

• Footer

• iFrame

• Carousel

• Skip Links?

MILESTONE 3: Extend the Basic Site to Include Products 

• Product Header

• Overview

• Product Card

• Product Lists

• Picto Card

• Picto List (aka Ingredients/Benefits section)

• Image + Text

MILESTONE 4: Extend the Basic Product Site to include Article Content 

• Article Header

• Article Decoration (e.g. Pull Quotes, etc) - Image Carousel only in Figma

• Embedded Video

• Page Card

• Page List

• Teaser

• Breadcrumbs in Page Header

List of components proposed on 27-04-2022

MILESTONE 1: Piece together a single BASIC PAGE of key foundational elements

Includes things like:

• Container

• Grid

• Section

• Typography 

• Image

• Icon

• Heading Block

• Link

• Button

• CTA Block

• Accordion Item

• Accordion List

• Page Header

• Text box

MILESTONE 2: Add the site ‘frame’ necessary to make a multi-page deliverable

Includes things like:

• Navigation Link

• Navigation

• Logo

• Basic Header (i.e. excl. Site Search)

• Subtle Button variant

• Footer

• iFrame

• Carousel

MILESTONE 3: Deliver the bare minimum for a high level simple site (without products)

Include things like:

• Any components to deliver Legal (LDS) requirements - this is actually a Text box as content comes from LDS or it comes from CMS as RTE

• Any other peripheral requirements for performance, accessibility, security standards etc. - this should be a part of all components from the very beginning or part of backend.

MILESTONE 4: Extend the Basic Site to Include Products

Includes things like:

• Product Header

• Overview

• Product Card

• Product Lists

• Picto Card

• Picto List (aka Ingredients/Benefits section)

• Image + Text

MILESTONE 5: Extend the Basic Product Site to include Article Content

Includes things like:

• Article Header

• Article Decoration (e.g. Pull Quotes, etc) (Image Carousel only in Figma)

• Embedded Video

• Page Card

• Page List

MILESTONE 6: Extend the Sophistication and allow merchandising/promo of items

Includes things like:

• Teaser

• Sitemap

• Product How To + Safety Block (How To block, reference below, seems a bit complicated for markets to use it)

• Promo Strip