E-Commerce Website Proposal

WebsiteProposal
SITENAME:
http://scooterandpearlclothing.com
CLIENT: Scooter+Pearl
Prepared by: Cecilia Pamfilo
Project Starts: 27 Mar 2015
Project Ends: 01 May 2015

Project Overview
PROJECT DESCRIPTION
This is a website design for Scooter+Pearl’s existing and potential customers. The site will
provide detailed information about the products, services, shop location and enable
visitors to order on-line.
Scooter + Pearl produces high quality hand crafted clothes by Christina Goss, a clothing
designer.
SITE PURPOSE
The E-commerce technology
• To market online the Scooter+Pearl clothing lines and attract potential customers.
• To break geographic barriers that slows down the sales of Scooter+Pearl clothing
lines.
• To provide important information to potential customers - location, contact details,
shop hours, about the designer and how the business started.

Target Audience
Scooter+Pearl is owned by Christina
Goss, a clothing designer who
carefully designs and handmade
clothes for women.
The Target Audience of this website is
hard working, busy and fashionable
women. Ages 33-43 years old.
These women are fashionable. They
prefer to shop online because of their
busy lifestyle and nature of
profession.

ProjectRequirements
and Limitations
These are some of the client’s requirements in the website:
• This is a dynamic web site that responds to devices of different widths, utilising HTML5, CSS3, PHP
scripting & MySQL.
This website includes some features of an E-commerce, such as:
• Online shopping (basket and checkout);
• Online transaction processing (payments using credit cards or debit cards);
• Product List and Images; and
• Internet Marketing through Social Medias, like Facebook and Instagram.
The Admin, which is the business owner, can have access to the website so she can add, update or
delete the products.
The Contact page displays the contact details, business hours, and shop location (google map).
Limitation
There is no sign up or login page for customers. They can proceed shopping online, securely.

Client Success Criteria
GENERAL
1. Consistent style between pages within the site is present
2. Layout has a defined grid and is clearly discussed in documentation
3. Eye flow is led naturally by hierarchy of page elements
FONTS
1. A hierarchy of Clear Fonts (headings and subheadings), 3 at most
2. Text Layout rules followed (no more than 500px width, adequate guttering and margins
3. between text blocks and neighbouring elements)
4. Standard minimum page width is 960px
COLOUR
1. Contrast is sufficient for clear readability across all text on the site
2. Colours relate to the client's logo or the client's brand
USABILITY
1. Site's Purpose is clear (first three seconds rule)
2. Clear and Simple navigation menus
3. Follows the Guiding Principles for Usability (see "Don't Make Me Think" by Steve Krug)
4. Site has been reviewed by independent 3rd party

Timeline
CLIENT DEVELOPER
TASK
DESCRIPTION
TARGET
DEADLINE
TASK
DESCRIPTION
TARGET
DEADLINE
Website Proposal
Client feedback
27 Mar
Website Proposal
Concept Development and Planning
27 Mar
Implementation
Involves the Technical and Testing Phase
of the Project
Implementation
Involves the Technical and Testing
Phase of the Project
Content Acquisition
Content, Graphics, Images, and Text
2 and 14 April
Data Integration
Integrate content into the website
15 April
Project Review
Client feedback
17 April
Front End and Back End Coding
HTML CSS, Javascript, PHP, MySQL
Deliverable:
Partially completed Website.
17 April
Change Request
NOTE: The client can request for minor
changes on the aesthetics - colour, text
and images only. Other changes like
additional pages or functions should be
made during Content Acquisition.
20 April
Changes Integration
Apply changes in the Aesthetic part
of the website.
27 April
TESTING Phase
28-29 April
Completed Website 30 April

Sitemap
Admin Access Home
Collection
Autumn
Product
Details
Winter
Product
Details
About Us
History
Media
Sale My Bag
Checkout
Summary of
Payment
Order
Confirmation
Header

Sitemap
Shop
Personal
Shopping
Gift Voucher
Find Us
Facebook
Instagram
Help
Shop
Location
Contact Us
FAQ
Delivery/
Returns
Terms &
Conditions
Size Guide
Footer

Research
Most online shopping sites have almost the same
features and aesthetics. These are the following
• Minimalist design that focuses on the photos of
the products;
• Simple and clean. White background colour,
and big black fonts only;
• Big images and no texture in the background ;
• Brief description of the product;
• Buttons are either black or white only
Add to cart button is shown when the visitor
selected a colour and size
• Cart page and Checkout page has continue blue
buttons that do not specify if continue with
payment or continue shopping.
• No option button to continue shopping. Can’t
find the alter or update option if the visitor
suddenly changes her mind
• Order Confirmation page only shows the place
order button. I had a hard time looking for the
return button if there is a need to make
changes.
• Coloured buttons in payment confirmation can
be easily seen.
http://www.kowtowclothing.com/ is a mobile friendly site.
You can do your shopping on a mobile device.

http://repertoire.co.nz
Based on Google’s mobile friendly test
• Not mobile friendly
• Text are too small to read
• Content wider than screen
• Links are too close together
• Mobile viewport not set
This pages uses 7 resources which are blocked by
robots.
Research

Research
http://katesylvester.com
Based on Google’s mobile friendly test
• Not mobile friendly
• Links are too close together

Initial Design Plan
FIRST DESIGN
COLOURS
These colours are consistent with the client’s preference – clean and should focus on the
products.
FONTS
Headings and Nav
20px font-family: Copperplate / Copperplate Gothic Light, sans-serif;
Body
14px font-family: ‘Lucida Console’, Monaco, monospace;
#333366 #333366 #ffffff #999999 #000000

Initial Design Plan
SECOND DESIGN
COLOURS
These colours are consistent with the client’s preference – clean and should focus on the
products.
FONTS
Headings and Nav
20px font-family: Copperplate / Copperplate Gothic Light, sans-serif;
Body
14px font-family: ‘Lucida Console’, Monaco, monospace;

Scooter
+pearl Home Collection About Us Sale
PHOTO
My Bag $0.00

Scooter
My Bag $0.00
Photo Photo
Photo Photo

Scooter
My Bag $0.00
Photo
Photo Photo

Scooter
My Bag $0.00
PHOTO
This page gives more information about the
Scooter+pearl business, of how it started, the
target market and a brief information about the
designer.
This page gives more information about the
Scooter+pearl business, of how it started, the
target market and a brief information about the
designer.

Scooter
My Bag $0.00

Scooter
My Bag $0.00
Dress Tops
Trousers Knitwear

PHOTO
This area will
have the text
part of the page.
My Bag $0.00Scooter
+pearl

This area will
have the text
part of the page.
My Bag $0.00
Winter
CollectionPHOTO
Scooter
+pearl
Home
About
Collection
Contact

Internal Documentation
Online Shop
CLIENT: Scooter+pearl
Project Starts: 27 March 2015
Project Ends 01 May 2015
Prepared by: Cecilia Pamfilo

Developer Success Criteria
*Check domain name availability
CODING STANDARDS
1. No code repetition
2. Functions and classes are always commented showing expected input and output
SECURITY
1. Site is not vulnerable to XSS or SQL injection (all inputs are filtered and escaped)
2. No logic errors displayed on publicly accessible pages
3. All passwords are stored in hashed form
4. Database connection details are in config.php file which is saved above the web root
5. All administration pages must only be accessible by authorised visitors
6. Secure data and login indicators are stored in sessions rather than cookies
BROWSER TESTING
1. Site displays properly on IE8, Firefox, Safari and Chrome
SERVER SIDE PRODUCTION
1. Database is normalised
2. Single and double quotes are properly handled (not truncated and no slashes appear)
3. Form fields are sticky, validated and clear and appropriate application feedback to users is displayed.
4. PHP codes written in OOP style, Uses IDE only for text editing and script execution and not for debugging (codes should be
debugged manually)
5. PHP Uses string rather than regexp functions when applicable (eg. str_replace instead of preg_replace, explode rather than
split or preg_split, etc)
6. PHP Function calls inside loops are avoided as much as possible
7. SQL NO use of SELECT*

Files Structure
Js
•Main.js
JS
•addProduct.php
•adminView.php
•basketView.php
•catalagoue.php
•checkoutView.php
•deleteProduct.php
•editProduct.php
•deleteProduct.php
•homeView.php
•productView.php
•viewClass.php
Views
Config.php
•Index.php
WWW
•Styles.css
CSS
•basketClass.php
•databaseClass.php
•formsClass.php
•modelClass.php
•uploadClass.php
•validateClass.php
Classes

Database
ordered_products
ordered_productID int(10) UNSIGNED AUTO_INCREMENT PRIMARY KEY
orderID mediumint(8) UNSIGNED NOT NULL
productID smallint(11) UNSIGNED NOT NULL
quantity tinyint(4) NOT NULL
price decimal(4,2) NOT NULL
orders
orderID mediumint(8) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title varchar(20) CHARACTER SET utf8 NOT NULL,
first_name varchar(50) CHARACTER SET utf8 NOT NULL,
last_name varchar(50) CHARACTER SET utf8 NOT NULL,
email_address varchar(50) CHARACTER SET utf8 NOT NULL,
phone varchar(16) CHARACTER SET utf8 NOT NULL,
address varchar(255) CHARACTER SET utf8 NOT NULL,
city varchar(30) CHARACTER SET utf8 NOT NULL,
total double NOT NULL
status enum(paid, fail, shipped complete) CHARACTER SET utf8 NOT NULL,
receipt varchar(16) CHARACTER SET utf8 NOT NULL,
time timestamp NO CURRENT TIMESTAMP NOT NULL

Database
products
productID smallint(5) UNSIGNED AUTO_INCREMENT PRIMARY KEY
productname varchar(20) CHARACTER SET utf8 NOT NULL
description text CHARACTER SET utf8 NOT NULL
image varchar(60) CHARACTER SET utf8 NOT NULL
price decimal(4, 2) NOT NULL
users
userID tinyint(4) UNSIGNED AUTO_INCREMENT PRIMARY KEY
username varchar(16) CHARACTER SET utf8 NOT NULL
password char(40) NOT NULL
access enum('admin','user') NOT NULL
pages
pageID int(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
page varchar(16) NOT NULL,
title varchar(40) NOT NULL,
heading varchar(40) DEFAULT NULL,
description tinytext,
content text

E-Commerce Website Proposal

More Related Content

What's hot

Viewers also liked

Similar to E-Commerce Website Proposal

More from Cecilia Pamfilo

E-Commerce Website Proposal