Business Requirements documentation to develop online sales
Introduction: Ken Consulting has business model to develop and promote proprietary software for eventual sale to customers who have auto body parts sales business.
Following is a detailed description, with web page shots of a manual that has been put together to guide a developer to build a website. This website will be used eventually by Birmingham Autobody Parts Supply’s customers. It will guide the customer to select and order parts different automobiles and also give the pricing and delivery dates.
Objective: The objective of this project is to implement online sales software for wholesale or retail stores who sells Auto body parts.
Header: Header must be centered and place it on all our web pages followed by the same design like this picture. When customer clicks on “Birmingham Autobody Parts Supply” logo or Home button, it will take you to the home page (if you are not at on Home Page). There are four buttons in the heading, they are Home (represents home page), Auto Body Parts (represents Auto Body Parts page), View Cart (represents view cart page) and Contact Us (contact us page). When you click on these buttons, you will open a related page. Example: If you click on Contact Us: Contact us page should be displayed. http://kenconsulting.files.wordpress.com/2010/02/heading1.png
Foot Note: Foot note is shown at the bottom center of the page. Please display Visa, Master Card, Amex, Discover card and PayPal logos. Bottom line should have link buttons for Home, Auto Body Parts, View Cart and Contact Us pages. These buttons should work as same as header buttons do. Please show The Lowest Price Guaranteed message as show in the picture here. http://kenconsulting.files.wordpress.com/2010/02/footnote1.png
Please develop following pages: Each of the pages will have three sections; Header and Footer are going to be repeated on all of the pages and body will be different for each page.
1) Home Page
2) Results Page
3) Add to Cart Page
4) View Cart Page
5) Check out Page
6) Contact Us Page.
7) Auto Body Parts Page
Home Page: It is the entry point to our website; we organize links or information to customer when a web browser starts from this point.
1) Home page design: http://kenconsulting.files.wordpress.com/2010/02/home_page1.jpg
Search Criteria: Customer will specify the search criteria for the parts he/she wants to buy or to view. This task is called searching for parts. On our website, customer can perform search in two ways.
- Key word search: It lists all parts related to the customers search criteria. Example: If customer typed “bumper” and clicks on go button, it lists all bumpers regardless of his/her vehicle.
- Narrow Search, it is the fastest way to get parts for his/her vehicle.
Key Word search: Customer will enter/type text in the text box (notice enter your search here), which is in the heading section and clicks on “GO” button. The customers do query the data base based on Part name or part description or vehicle’s model. In case if customers do not enter any word in the text box and clicks search then display a message, “Please enter part name or choose from the drop down list”.
If your query do not find any parts, clear the home page’s body and display a message saying that “Your search did not match any products” and please give Key word search option and Narrow search option in the middle of the screen as shown here in the Home page – Un-successful search page. http://kenconsulting.files.wordpress.com/2010/02/home_page-un-successful-search1.jpg
If we find auto body parts for customers’ search criteria, open results page and pass query results to the results page.
Narrow search: Here customers will choose Step 1 to 3. (Step 1 = Year, Step 2 = Auto Maker and Step 3 = Model). When you select a year from the list (Step 1), vehicle manufactures needs to be populated in Step 2(Data is already existed in the database, customers just need to present that data), when customers select an item from the Step 2 drop down box, related models for the make should be re-populated automatically. If customer selected only Step 1 and or Step 2 and then clicks a “Find My Part” button, please show a message “Please select a Step 3 (Model) and click on search”. When customers select data from all three drop down boxes, a new page (Results Page) should be displayed with results based on the customers’ search criteria (customers don’t have to click find my part button and you should query the database based on Year, Make and model). Example: Step 1 is 2009, Step 2 is Honda and Step 3 will show all of models by Honda. If customers do not find any parts, follow Un-Successful search criteria; refer to Home Page – Un-Successful search page. If you find parts, open results page and pass the results to Results page.
Use following tables/views to populate data on this page: Year_List for year drop down list, V_PRODUCT_MAKE for make, V_PRODUCT_MODEL for model drop down list. To show most popular parts use V_PRODUCT_TYPES. When you query database for any search criteria, use V_PRODUCT_LIST.
1. User cannot change anything on this section, except key word search box and or selecting values from the list (Step 1 thru 3). 2. When customer places a cursor in the search box “Enter your search here” word should disappear. When customer clicks go button, search results should display in Results page.
Please display the following message right below Narrow search criteria:
“Quality replacement parts at wholesale prices.
The industry’s most comprehensive catalog of:
Bumpers, Grilles, Fenders, Hoods, Door Handles, Window Regulators, Bumper Covers, Radiator Supports, Mirrors, Headlights, Tail Lights, Cornering Lights and more!
High Quality OEM replacement at wholesale prices! “
Display the most popular parts with pictures as shown in Home Page design (set the first character in each word to uppercase and the rest of the characters to lowercase for all replacement parts): Most popular parts are: Bumper, Bumper cover, Fender, Grille, hood, door handle, window regulator, bumper cover, radiator support, mirror, headlight, tail light and corner light. When customer clicks on the picture, you should pass part/product details to Add to Cart page and open Add to Cart Page.
2) Results Page: Once customers perform search on home page, home page will pass result set (retrieved data from the database) to this page and we will present the results here on this page.
Move Narrow search option to top left corner of the body and place Browse by Part name right below narrow search. This search criterion should work same as home page’s search criteria, but results will be displayed on the same page (refresh the page with new results).
Browse by Part name results are same as search criteria’s results, only difference is that developers will put number of parts/product types in the parenthesis (this number includes all kinds of vehicle). Developers need to show only part name here.
Back (button/link in the body): When customers click on this button, it goes to previous page.
Change Vehicle (button/link in the body): Take to home page.
2008 Dodge Caliber (in the design): This is just to display purpose only.
When customers click on the part name, pass product information to Add to Cart page and open Add to Cart page.
Take a look into Results Page: http://kenconsulting.files.wordpress.com/2010/02/results_page1.jpg
3) Add to Cart Page: Customer adds auto body parts to the cart on this page. Customers can open this page from two places. 1. From Home Page: If customers click on any image in Most Popular Parts area, 2. Results Page: home and results page should pass part/product information to this screen. Based on the part/product information, query the database to collect product related information and show it here with pictures.
Move current Narrow search criteria to left top corner of the body as shown in the picture and Browse by part name should be listed right below Narrow search criteria.
Show product’s image as large icon and this icon can be maximized by clicking on the image or clicking on magnifying glass. If you click on image or magnifying glass, open the picture in a new window for each part.
Rest of the controls on this page: Part description, Part warranty (Description and warranty must be bolded), comments, kind of metal used for this product during manufacturing (example: chrome), location (where it fits to the vehicle), parts link number and in stock. If available quantity is > 0 then show the quantity in green color or display Out of Stock in red color.
List these items in a small box and should be bolded: “List price” and dollar amount (strikeout amount here), “sale price” and dollar amount (amount should be red color), “you save” and dollar amount (use green color to amount), “quantity” and text box (user can change the quantity, by default quantity should be one and allow customers to enter only numbers) and “add to cart” button.
When customers click on “Add to Cart” button, take the product information, the value from the Quantity text box and add it to shopping cart and then, open “View Cart Page”. Use V_AVAILABLE_QUANTITY view to display content.
Take a look into Add to Cart Page: http://kenconsulting.files.wordpress.com/2010/02/add_to_cart1.jpg
4) View Cart Page: This screen will show list of products in the customers’ shopping cart. Customers can update the quantity and/or remove part/product completely from the shopping cart. Parts/products in the shopping cart must be saved temporarily until customers complete the order process or close the browser. If there are no items in the cart, please show “Your shopping cart is empty” in red color.
Continue Shopping button or link: When customers click on this button it should take back to Add to Cart page. In case if customers come here by clicking on View Cart button in the header, then take back to home page.
Controls that need to be there on this page: Standard header, Continue shopping link button, standard footer, shopping cart grid, subtotal label, subtotal amount, shipping label, shipping amount, handling label, handling amount, total, total amount, grid (we will show cart details in grid view)and checkout button.
Shopping cart grid columns: SKU, Description, Quantity, price and total. These are column headings. Values in the grid should represent the actual product information. All grid columns are “read only” except Quantity column.
SKU column must contain SKU number and a picture for that product/part.
Description column: it should have four rows
Row 1) Description of that product
Row 2) which vehicle this product fits to
Row 3) Additional notes, if there is any (An item may be shipped through ground only. Example: Bumper,
Row 4) if available quantity is greater than zero then show this message “In Stock: Usually ships within 24 hours” otherwise show “Out of Stock” in red color.
Quantity column: This column should have 3 rows
Row 1) Text box with default quantity of one or updated quantity. This can be editable. Customers can update quantity here, only numbers are allowed.
Row 2) Update Button (customers can change the quantity and click on it).
Row 3) Remove button (customers can remove the item completely from shopping cart).
Price column: price of the product.
Total column: represents total for the product (Quantity * Unit Price).
Subtotal: Subtotal for all products in the grid (Sum of “Total” column in the grid).
Shipping: Shipping cost for all products in the grid.
Handling: Handling cost for all products in the grid.
Total: Total amount (subtotal + shipping + handling).
Checkout button: When customers click this button, “Checkout Page” will be displayed.
If customers want to buy more quantity than the available inventory, then display a message with available quantity. Even though if customers want more quantity, then add a message to shopping cart saying that “Your order could be delayed, please call us for more information”.
Take a look into View Cart Page: http://kenconsulting.files.wordpress.com/2010/02/view_cart1.jpg
5) Checkout Page: Customers will enter the information on this page to buy automobile body parts. Before processing for payment, please make sure that all required fields are filled.
Once customers enter their details such as name, address and etc., please verify whether they are existing customers or not (use V_CUSTOMERS view). If the customer is an existing customer, get customer ID and store it in a variable.
These are the controls which developers use in this screen: Standard heading on top of the page and remaining controls are: Billing Address label (font size 14), first name label, first name text box (customer will enter data in all text boxes), last name label, last name text box, Company label, company text box (optional, customer may or may not enter data in this column), Address Line 1 label, address line 1 text box, address line 2 label, address line 2 text box (optional), city label, city text box, state label, state drop down box (this should list all states in U.S.A.), zip code label, zip code text box, phone number label, phone number text box, email address label, email address text box, Shipping address label (font size 14), option buttons first one should say “Ship to my billing address” and second one is “Ship to different address”, if user selects ship to different address then we should enable ship to different address columns/text fields“), first name label, first name text box (customer will enter data in all text boxes), last name label, last name text box, Company label, company text box (optional, customer may or may not enter data in this column), Address Line 1 label, address line 1 text box, address line 2 label, address line 2 text box (optional), city label, city text box, state label, state drop down box (this should list all states in U.S.A.), zip code label, zip code text box, phone number label, phone number text box”, payment method label and a line under it, Card type label, drop down box for credit card types, credit card number label, credit card text box, expiration date label, drop down boxes for month and year, security code label, security code text box, picture of an example credit card, checkout button, message/hint “* = Required fields” and a foot note “By placing your order, you agree to Birmingham Autobody part supplies privacy notice and conditions of use. Your order is not complete until you click the Place Order button. Once you have placed an order, we will send an email confirmation of your order”.
Please allow 16 digits for VISA, Master Card and Discover cards and for security code allow 3 digits, for American Express allow 15 digits and 4 digits to security code.
Credit card number field should take only numbers and expiration date must be greater than or equal to current month.
Month drop down should have 1 to 12 in the list, year drop down should have current year and next four years (example: 2010, 2011, 2012, 2013 and 2014).
If customer selects previous month and current year, then you should display a message “Invalid expiration date”, and place the cursor in Year drop down box.
Once customers click on Place Order button, if customers do not meet required criteria, please display error message and do not pass information to payment gateway otherwise (all required fields are filled) process credit card transaction. Credit card transaction has to go through Payment Gateway, for more information about payment gateway please visit: http://www.merchantexpress.com/pdf/SIM_guide.pdf.
If credit card transaction fails, show the error message to customer.
If credit card transaction is successful, (in case of new customer, save customer details into CPW_CUSTOMER table, get the customer id and store it in variable) save invoice details in the database (use INVOICE_HEADER to store invoice number, customer id, type of credit card used and order date. If customer uses ship to different address then save that ship to different address details in this table, to save product details such as product id, sales amount and quantity use CPW_SALES table and to update available quantity use CPW_STOCK table), update quantity and give a confirmation number to i.e. invoice number and display a message “Thank you for placing order, we will ship it within 24 hours. In case of weekend or holiday, we will ship it in next business day”. And send an Email with confirmation number and invoice details to customers as well as to sales person at Birmingham Autobody Parts Supply.
Note: We are not processing PayPal transactions at this time, so ignore PayPal option for now.
Take look into Checkout Page: http://kenconsulting.files.wordpress.com/2010/02/checkout1.jpg
6) Contact Us Page: Some customer may want to contact us through email; they can fill required fields here and tells us about his purpose to reach us.
All labels are read only labels and text fields are editable on this page.
Please format phone number to (XXX) XXX-XXXX format and if customer enters less than 10 digits, please show “Invalid Phone Number, please enter your 10 digit phone number” (same format and condition applies to Fax too).
Email address: make sure that it is a valid email address.
When customers click on Submit button, make sure that all required fields are filled and then take customers’ input/message and email it to customer service personnel at Birmingham Autobody Parts Supply.
Take a look into Contact Us Page: http://kenconsulting.files.wordpress.com/2010/02/contact-us-page1.jpg
7) Auto Body Parts Page: This page tells about Aftermarket Auto Body parts.
Please display following message in the center of the screen. “Birmingham Autobody Part Supplies is your source for top-of-the-line auto body parts. Our store carries core supports, which sit under the heater and fit in the front of the car between the fenders. The products we offer are brand new with prices that are lower than the junkyard’s due to our lower overhead. From Japanese cars to pickup trucks, Birmingham Autobody Part Supplies has all the parts your vehicle needs. Stop by our store in Birmingham, Alabama, to view our selection”.
Aftermarket parts include: Hoods, Grills, Fenders, Bumpers, Lights and Mirrors.
We carry parts that work with: Chevy™, Ford™, GMC™, Dodge™, Nissan™, Honda™, Toyota™
Take a look into Auto Body Parts Page: http://kenconsulting.files.wordpress.com/2010/02/auto-body-parts1.jpg
All controls must run at server side.
Use following font, size and color on all pages: Font name = Arial, font size: 11 for the content on the page, font color = black (we will mention if we need a different font color or font size) and on heading section/part: font size = 16 for company name, color = “Dark Blue”, use shadow for company name and must be bolded. For “Low Price Guarantee” use the following: Font size = 12, color = “Orange” and it should be bolded.
Follow best coding practices and use listed ASP.Net controls:
Label (use labels wherever we display message or a text): System.Web.UI.WebControls.Label. Customer cannot change anything on these labels. Label name should start with lbl and followed by the text/message which we display on the page. In case of long message or text use your best judgment. Example: if you are displaying Year, label name should be “lblYear”.
Text Box: System.Web.UI.WebControls.TextBox. Use text boxes wherever customers input data. Text box name starts with txt and followed by the type of data which customers are going to enter. Example: In order to identify customer’s name we will show “Customer Name” label and followed by a text box, this text box name should be txtCustomerName.
Check Box: System.Web.UI.WebControls.CheckBox. Customers can either check or uncheck this check box. Check box name should start with chk. Example: chkRemove. We are using it in Add to cart page.
Button: System.Web.UI.WebControls.Button. Customers can press the button. When customers press a button, button press event should be fired. Button name should start with btn. Example: btnAddtoCart.
System.Web.UI.WebControls.DropDownList. when customers visit our website, drop down boxes must be populated before home page is loaded. Customers can select an item from the given list. Drop Down List or Combo box name should start with cbo. Example: cboYear. This Drop Down List can be called as Drop Down List or Drop Down Box or Combo Box.
System.Web.UI.WebControls.HyperLink: Customers can click on the link or they can copy the link. Hyper Link name should start with lnk.
System.Web.UI.WebControls.Image: Customers can click on the image to maximize an image or they can copy the image. Image name should start with img. Example: imgTyFoglightR (Ty stands for Toyota and R stands for Right Side). All images are preloaded in the database.
System.Web.UI.WebControls.LinkButton: : Customers can click on the link button or they can copy the link. Link Button name should starts with lnkbtn.
System.Web.UI.WebControls.ImageButton: Customers can click on the image to maximize an image. Image Button name should start with imgbtn.
Note: All information on these pages is “read only” otherwise specified. Header and Foot note should be existed on all pages and follow given format/design. If you need any help or if you need more information, please contact your project manager.
For best coding practices refer to:
- .NET Framework General Reference – Naming Guidelines (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpgenref/html/cpconcapitalizationstyles.asp).
- Coding Techniques and Programming Practices ( ) http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnvsgen/html/cfr.asp
- Group:Microsoft.public.dotnet.* – Developer Community Recommendation.
- For ASP.NET Security Guidelines http://msdn.microsoft.com/en-us/library/ms998258(v=MSDN.10).aspx
