Table of Contents

Introduction 1

Interface 2

Account Registration 12

User Controls 15

Product Sale 17

Janeulle Claire B. PecsonIV-BSA

Fundamentals of Information and System Development

I. Introduction

1

II. Interface

3

Home Page

Navigation Bar

Log in and Register Panel

Body Content

1. Home Page

The home page is the main page of the company’s website. It displays an overview of the company’s products and information.

The home page contains three panels. The Navigation Bar, the Log in and Register Panel, and the Body Content.

The company website can be viewed by going to www.lovejane.com.

a. Navigation Bar

The navigation bar helps the user steer through the website. There are three sub pages that can be located through the navigation bar.

• Home - The Home is the main page of the website that displays the overview of the website.

• Shop - The Shop is where the user can browse through the products of the company.

• About Us - This page displays information as the store location, telephone number, and e-mail address of the company.

b. Log In and Register Panel

The Log In and Register Panel is used to log in an existing or create a new customer account.

•Username and Password Text field – These are used to type in an existing account’s username and password.

• Log In Button - This control is used to log in a customer’s existing account.

• Register Button - This control is used to create a new customer account. When this button is clicked, the user will be redirected to the Create a Profile page.

b. Body Content

54

2. Shop Page

Product Line Products

7

The company has 7 product lines. These are Tops, Skirts, Pants, Shorts, Dress, Shoes, and Accessories.

The user may browse through these product lines by clicking the button from the list of products

The Shop Page of the website display the product line of the company.

a. Product Line

b. Products

This portion of the website lets the users see the items being offered by the company. It displays the product’s details such as the item’s photograph, control number, and price, which are essential for the user to decide which product to buy.

Below the details of the items on sale are buttons labeled Add to Cart. These buttons are used if the customer finds an item that he/she is interested in buying, thus adding it to the user’s cart.

Items added in to the cart can be found under the View Cart option under the User Controls. 98

11

This page displays information as the store location, telephone number, and e-mail address of the company such .

3. About the Company

1. The user must first register an account by clicking on the Register button.

1312

II. Account Registration

2. After clicking the register button, a registration form will appear. The user must fill out the necessary requirements to successfully register an account and use the online order system.

After filling out the form, the user must click the Submit Button and a dialogue box confirming the registration will appear.

IV. User Controls3. Once the user have successfully made an account, the

user may now log in the account and start shopping.

Upon Log In, a welcome message will appear.

1. View Cart

The View Cart is where the user’s potential orders are listed in. It shows the Product Number, Price, and Quantity of the items that are added to the user’s cart.

1514

The total price of the items are also displayed on the View Cart option.

The user may also choose to end the shopping and buy the item(s) in the cart by clicking on the button Buy.

The user may choose to continue shopping and add more items to the cart by clicking on Continue Shopping.

2. Logout

The logout button is used to close the account.

IV. Product Sale1. The first step in purchasing an item from the website

is to first log in the customer’s account.

1716

1918

2. The second step is to choose among the product lines which kind of item to buy.

3. The third step is to select the item and click the button Add to Cart.

Once the user clicked the Add to Cart button, a dialogue box will appear.

4. Once the item have been added to the cart, it will be displayed in detail in the View Cart under the User Controls.

5. To add another item in the cart, click the link Continue Shopping to redirect to the shop page.

6. Select the item to purchase and add to cart.

Again, a dialogue box will appear when the Add to Cart button is clicked.

2120

7. Go to View Cart. 8. To Remove an Item from the Cart. Click the Remove from Cart button.

A dialogue box confirming the removal of the item from the cart will appear.

2322

9. Once the customer is satisfied with the order, he/she may now click the Buy button located at the bottom right corner of the cart.

2524