E-Commerce Website Proposal
-
Upload
cecilia-pamfilo -
Category
Internet
-
view
767 -
download
0
Transcript of E-Commerce Website Proposal
Website Proposal
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.
Project Requirements 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
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 +pearl Home Collection About Us Sale
My Bag $0.00
Photo Photo
Photo Photo
Scooter +pearl Home Collection About Us Sale
My Bag $0.00
Photo
Photo Photo
Scooter +pearl Home Collection About Us Sale
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 +pearl Home Collection About Us Sale
My Bag $0.00
Scooter +pearl Home Collection About Us Sale
My Bag $0.00
Dress Tops
Trousers Knitwear
Scooter +pearl Home Collection About Us Sale
My Bag $0.00
PHOTO
This area will have the text
part of the page.
My Bag $0.00 Scooter +pearl
This area will have the text
part of the page.
My Bag $0.00
Winter Collection PHOTO
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