Website design and development

1.

WEBSITE DESIGN &
DEVELOPMENT
THE SPICE MARKET
SHYANE BENAZIR
[email protected]
647-382-5958
1

2.

THE SPICE MARKET
PROJECT SCOPE
PROJECT SCOPE
The "Insert your company name" will design and build a new modern,
responsive ecommerce site for The Spice Market.
Based on our current understanding, the site will include all new content that will be defined in UX to ensure the
design and development phases go well. A heavy focus will be placed on ensuring header and footer navigation design,
home page, interior page and shop content are all well organized for the best user experience and conversions (sales).
Fully define the interactive elements with a comprehensive set of wireframes before proceeding to the design phase, so
some of the content structure outlined below may change during discovery.
HOME/ LANDING PAGE
This page will be re-organized and designed to pull relevant content from other parts of the site. This may include:
*
Animated hero banner/carousel
*
Strong product and shop calls to action (CTA)
*
Strong blog/recipes CTA (or other prominent content)
*
Recent news section
This page will be animated with smooth transitions, scrolling and text effects (without being over-the-top).
A mega-menu to display content on the main navigation will be used for short summaries and quick access to interior
pages.
ABOUT US PAGE
A well-organized landing page with sub-navigation to sections such as:
*
Our Story | Our Mantra | Press | Charitable Work
ABOUT THE SPICE MARKET
A landing page with an introduction that leads users to the sub-page content that clients are looking for. Whether
the following will be stand alone pages or subsections will be determined in the Discovery phase:
*
Intro
*
The Spice Market’s story
*
Press section
*
Call to actions for relevant information like Charities and Recipes
RECIPES
A page dedicated to The Spice Markets recipes. This page will likely be setup in a ‘blog style’ with the ability for
users to filter and search recipes.
CHARITIES
A well-organized landing page with information about charities The Spice Market supports, links to the charities and
how contributions can be made (as a potential ‘add- on’ in the cart).
BLOG
Blog-style landing page with links to interior articles.
CONTACT US
A form submission page with accompanying contact details, if required.
*
We will explore the best way to organize and display necessary information on this page during the IA/UX
phase of the project.
2

3.

THE SPICE MARKET
PROJECT SCOPE CONT’ D
PROJECT SCOPE - CONTINUED
ADDITIONAL PAGES & FEATURES
SHOP
The product pages will serve as the online shop. All items can easily be added to the user’s cart.
May need to implement a ‘fly-out’ cart during the experience, if this make sense, so the user is
never removed from their experience (see www.livlite.co)
*
Social media integration (links to outside content)
*
Instagram banner
Explore how best to navigate through the content
*
Static Page Templates:
including:
*
Categories / filters, if required
*
Featured items with description and pricing
*
Privacy Policy | Terms of Sale | Shipping Terms | Gift Certificates | Testimonials | Order
Policy | Returns | Etc.
INDIVIDUAL PRODUCT/ MENU PAGES
*
Multiple images, description, price and additional details
*
Simple variable options (quantity, size)
*
Easily accessible add-ons
*
Summary and add to cart call to actions
*
Related products at the bottom of the page pulled from related categories
*
Related recipes
CHECKOUT (SHOP)
Shopify check-out including the following standard flow. Please see ASSUMPTIONS in the below
section for more details.
*
New user registration / returning user login
*
Billing / Delivery details
*
US and CDN tax calculation
*
Payment information - Stripe/PayPal, Apple Pay and Shop Pay (if available)
*
Order confirmation (page display & email)
*
Order history
3

4.

THE SPICE MARKET
PROJECT ASSUMPTIONS
PROJECT ASSUMPTIONS & DETAILS - PART 1
It’s important to us that we’re all on the same page. The
following sections contain project specifics that outlines our
understanding of the project.
DEVELOPMENT / HOSTING
*
A CMS will be selected best suited to the projects needs during Discovery/ Requirements, a
headless CMS leveraging both Wordpress and Shopify is recommended.
*
All content can easily be updated through customized, well-organized CMS admin dashboards.
*
Front-end is built using practices such as progressive enhancement, accessibility standards, and
semantic HTML markup. Specific technologies to be used include PHP, HTML, CSS, and
JavaScript. JavaScript frameworks such as Vue, React, or jQuery may be used for certain
features and functionality depending on what the best tool is for the requirements.
*
Any 3rd party plugin, app, subscription or web font expenses (if required) will be expensed
back to The Spice Market at cost, after receiving approval.
*
The "Insert your company name" will provide CMS training. This will include video training via
Google Meet, follow-up videos/text-based training documents.
*
The site will be hosted on a suitable hosting platform for your site. For a site of this size, The
"Insert your company name" recommends hosting on "Insert your company name" managed
servers in order to monitor and manage the site. If The Spice Market chooses to host on 3rd
party servers, responsibil- ity for any downtime & maintenance lies with the hosting facility and
The Spice Market.
*
If Shopify is used for the shop, The Spice Market will be responsible for paying for a
subscription in addition to regular hosting.
*
In order for the site to send transactional emails successfully, a 3rd party service like MailGun
will need to be used as emails sent from website servers can get flagged and end up in spam
folders. These are free services that The Spice Market can sign up for and provide with the
credentials.
*
Site speed and performance optimization are a focus, and we need commitment to creating a
site with clean code, good security and proper markup.
*
We need a complete setup of the backbones for SEO in the backend of the site as part of the
site build, and The Spice Market will be responsible for inputting the meta titles and meta
description for each page.
CREATIVE / DESIGN
*
Create a sitemap and comprehensive wireframes before moving into design.
*
Website to be fully mobile responsive and optimized for page load times and optimal user
experience on all modern browsers and devices.
*
Subtle animations and transitions to be planned in conjunction with the design mock-ups and
specific examples of animations to be provided as more of the design phase sign off
documentation.
*
Design a UI kit (design system) for fonts, image styles and content block styles. This kit should
also include information on hover states, borders, paddings, and margins.
CONTENT
*
The Spice Market will provide all final website copy and content. The Spice Market will also
provide all raw content and visual assets (i.e., original photography), but expectation is to offer
technical direction, as necessary.
*
Use lorem ipsum or copy provided by The Spice Market for design and page setup. Assist with
all final copy writing and content.
*
Built in Social media sharing functionality i.e., ability for visitors to share any content on their
personal social media pages seamlessly including an Instagram carousel.
» If The Spice Market wishes to engage in keyword research and strategy services (if possible).
4

5.

THE SPICE MARKET
PROJECT PROCESS
PROJECT ASSUMPTIONS & DETAILS - PART 2
ECOMMERCE BUILD INCLUDES
*
Simple products and variable products.
*
Stripe or PayPal Checkout are recommended for payment processing but others (like Moneris)
may be considered. The Spice Market will be responsible for setting up a business account.
*
Subscriptions - ability to subscribe, track, cancel, extend and renew
*
Easy inventory management.
»
*
*
*
*
Out of stock, naming, quick inventory counts, reports
The checkout process will include the following functionality:
»
Add to cart
»
Account registration / returning user login
»
Separate billing and shipping details
»
Tax calculation
Complex Couponing:
*
Product Add-Ons.
»
Related items may be added during check-out.
*
USD / CDN denomination toggle (with IP detection upon first visit)
*
Gift cards
*
Wholesale Login / Checkout (please see https://youipaper.com/ as a recent example)
*
Klarna /Afterpay integration
*
Members-only area (exclusive content for members)
*
SEO on-page content / metadata entry or strategy
*
Email marketing strategy
*
Affiliate program strategy
NOT TO INCLUDE IN THE ECOMMERCE ESTIMATE:
»
Multiple promo codes can be applied to the same cart checkout.
The following features are not included in the total cost but are broken down as potential add-ons
either now or at a later date.
»
Complex enough to pick and choose which promos can be added and which
cannot.
*
Wishlist functionality
Variable rate or calculated delivery/shipping TBD
*
Personalize messages
»
The Spice Market will need to input individual product weights and sizes in order for this
feature to work
*
Advanced customization (complex variables and many options per product)
»
If product weights and sizes aren’t know, a flat rate shipping fee can be used instead
»
DHL / UPS shipping integration (including delivery zone restrictions, if any)
Custom charges during checkout for charitable donations.
»
Ability to select charity (via logos) and custom amount
5

6.

THE SPICE MARKET
PROJECT ESTIMATE
PROJECT ESTIMATE EXAMPLE
Payment Schedule Example
PLEASE NOTE THE RANGE BELOW HAS A VARIANCE THAT WILL BE PINPOINTED ONCE THE
DISCOVERY AND UX PHASES ARE COMPLETE.
.
Wordpress/Woocommerce or Wordpress/Shopify
Low Estimate
High Estimate
Discovery, Requirements, Sitemap, IA
$500
$1000
UX/Wireframes
$1,000
$2,000
Website Design
$1,500
$2,500
Front End Development & CMS Integration
$38,000
$42,000
Quality Assurance, Training & Launch
$1,500
$1,000
Total Estimate
$4,500
$6,500
Ongoing Expenses
Low Estimate
High Estimate
Ongoing Monthly Maintenance (billed as incurred)
(rush)
Hosting (billed monthly)
$15/hr
$25/hr
$120
$200
Maintenance (if approved - quarterly or semi-annual)
$300
$400
Website Payment Schedule (Monthly)
High Estimate
Statement of Work Approval (Initial Deposit)
$2,500
Progress Payment 2
$1,000
Progress Payment 3
$1,000
Progress Payment 4
$10,000
Final Payment
Remainder
Additional payment terms:
*
Payments are due 30 days after invoices are sent. Exceptions will gladly be provided with
proper notice.
*
If we choose to postpone launch, a $250 monthly administration fee will be provided to keep
the site in maintenance mode until the site is pushed to production.
Proposed Project Timelines Example
The Spice Market would like to move efficiently through the website design and development
process, so proposed timelines reflect this requirement. A more detailed work-back schedule for
the project will be provided during the requirements phase. All dates aim towards a Q1 2023
launch.
Discovery
Product Labels, Website UX & Design
Front End Development & CMS Integration
QA & Content Entry
Website Launch
Early Dec
Late Dec - Jan
Feb - Mar
April
Mid-June
6

7.

PROJECT PROCESS
THE SPICE MARKET
THE PROCESS
Using a fluid project management process, perform the build
using a phased approach, with varying degrees of client input at
each phase. Each phase to be completed with the defined
deliverables requiring client sign-off before proceeding to the
following phase:
1. DISCOVERY, INFORMATION ARCHITECTURE ( IA), USER EXPERIENCE ( UX ) & USER INTERFACE (
UI) DESIGN
In this phase, begin with discovery - conducting interviews with your team to understand business
objectives in the mid-long term and to thoroughly understand brand identity. In getting to know
us, utilize your design team to begin working on website design that will address current pain
points, make improvements to user engagement, and design a visual interface that is appealing to
the market and google friendly.
DELIVERABLES:
*
Summary of Discovery Sessions
*
Sitemap/Information Architecture
*
Wireframes
*
Visual User Interface Design
2. FRONT- AND BACK-END DEVELOPMENT & CMS INTEGRATION
Once the prior phase has completed, begin the development phase. Development will be building
out all the features discussed in the discovery documents. Implementing the designs, and
functionality needed to complete the project. A staging environment will be created for
development, and this is where the beta version of the site will be hosted.
DELIVERABLES:
*
All back end code
*
All frontend code
*
Database structure and data
*
A functioning website
*
Integration with 3rd party services as needed
*
May possibly contain visual and code bugs that will be resolved in the QA phase
3 . QUALITY ASSURANCE (QA) & CROSS-BROWSER TESTING
Once development has been completed, the site will enter the QA phase. QA will be performed by
all parties. Tests to be performed on the site to make sure it has met all the requirements and is
functioning properly. Any major bugs or discrepancies found in this stage will need to be resolved
before launch. It is possible that low priority bugs may be resolved post launch as to not delay the
launch date.
Testing on the latest versions of Chrome, Firefox, Safari. Mobile testing to be carried out for
current Android and iOS devices.
4 . LAUNCH & POST-LAUNCH SUPPORT
Once major bug fixes are carried out, move to deployment. Move the site from the development
server to its permanent location, clearing out all testing data in preparation for live user tests.
Post launch will be used as a time to fix any post launch bugs that are discovered, during QA or
after launch. It should be noted that any post launch fixes must be bugs that should have been
resolved as part of the initial build as defined by the requirements.
7