E-Commerce Website Proposal

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

Transcript of E-Commerce Website Proposal

Page 1: 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

Page 2: E-Commerce Website Proposal

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.

Page 3: E-Commerce Website Proposal

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.

Page 4: E-Commerce Website Proposal

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.

Page 5: E-Commerce Website Proposal

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

Page 6: E-Commerce Website Proposal

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

Page 7: E-Commerce Website Proposal

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

Page 8: E-Commerce Website Proposal

Sitemap

Shop

Personal Shopping

Gift Voucher

Find Us

Facebook

Instagram

Help

Shop Location

Contact Us

FAQ

Delivery/

Returns

Terms & Conditions

Size Guide

Footer

Page 9: E-Commerce Website Proposal

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.

Page 10: E-Commerce Website Proposal

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

Page 11: E-Commerce Website Proposal

Research

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

Page 12: E-Commerce Website Proposal

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

Page 13: E-Commerce Website Proposal

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;

Page 14: E-Commerce Website Proposal

Scooter +pearl Home Collection About Us Sale

PHOTO

My Bag $0.00

Page 15: E-Commerce Website Proposal

Scooter +pearl Home Collection About Us Sale

My Bag $0.00

Photo Photo

Photo Photo

Page 16: E-Commerce Website Proposal

Scooter +pearl Home Collection About Us Sale

My Bag $0.00

Photo

Photo Photo

Page 17: E-Commerce Website Proposal

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.

Page 18: E-Commerce Website Proposal

Scooter +pearl Home Collection About Us Sale

My Bag $0.00

Page 19: E-Commerce Website Proposal

Scooter +pearl Home Collection About Us Sale

My Bag $0.00

Dress Tops

Trousers Knitwear

Page 20: E-Commerce Website Proposal

Scooter +pearl Home Collection About Us Sale

My Bag $0.00

Page 21: E-Commerce Website Proposal

PHOTO

This area will have the text

part of the page.

My Bag $0.00 Scooter +pearl

Page 22: E-Commerce Website Proposal

This area will have the text

part of the page.

My Bag $0.00

Winter Collection PHOTO

Scooter +pearl Home About Collection Contact

Page 23: E-Commerce Website Proposal
Page 24: E-Commerce Website Proposal
Page 25: E-Commerce Website Proposal

Internal Documentation

Online Shop CLIENT: Scooter+pearl

Project Starts: 27 March 2015

Project Ends 01 May 2015

Prepared by: Cecilia Pamfilo

Page 26: E-Commerce Website Proposal

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*

Page 27: E-Commerce Website Proposal

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

Page 28: E-Commerce Website Proposal

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

Page 29: E-Commerce Website Proposal

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