COMP3121 E-Commerce Technologies Richard Henson University of Worcester October 2011

Week 5: B2C E-commerce websites with Shopping Carts n Objectives:  describe the software & hardware components of a typical B2C on-line trading system  describe the stages required to capture an order on-line, produce an online invoice and receive payment on-line  apply a knowledge of the above to design a data model for the on-line payment system  explain the crucial role of the website itself in generating on-line orders and ROI

Systems for On-line Ordering n COULD be achieved via the www in a number of ways:  via  using a HTML Form that sends “semi-structured” data to an address  using a more sophisticated HTML forms system (a shopping cart) »sends data to an on-line product database »database could be local (client only system) or on a web server (client-server system) »data could be processed and presented as an online invoice »invoice could be linked to a payment system

Order via n Two possibilities:  using address given on home page  using a HTML mailto command on the home page, which allows the message header to be generated automatically n In either case…  a manual system requiring the vendor to physically read the message and send a reply...

Processes in ordering via n Customer:  initiates communication using address on web site  types out/sends an unstructured message requesting product(s) displayed on website n Vendor:  replies with an ed order »may have be inputted by hand  requests some means of payment before proceeding… »issues with security of personal data for unencrypted … »may have to be sent by post…

Processes in ordering via a simple HTML form n Customer presented with product list as a form on the web page n If properly designed, customer just needs to  type in a number for qty of each product required  submit the completed form to the vendor’s address n Because the information is structured, it can be processed automatically by software at the server end

Ordering via Shopping Cart n Intention: making ordering products as easy as possible for the customer  series a web pages with embedded programming features  all the processing happens “behind the scenes” n Transparency (and EU law!): the customer should see exactly what they are ordering…  the database should incorporate a means of systematically storing customer addresses  the shopping cart logic should total up the exact amount the customer will have to pay

E-commerce via E-marketing & Shopping Cart n A complete e-commerce website system should fulfill two main functions:  advertising & promoting the company’s products  providing a secure and robust system for encouraging people to buy those products online n Each function is a subsystem in its own right »Presentation… FRONT END »behind the scenes scripts, database, etc… BACK END

Shopping System Front End n Online equivalent of a high street shop  home page = shop window  browsing through the product web pages… the equivalent of walking round the shop n Objective (should be!)  use creative web page design to present products as positively as possible »to encourage customers to want to buy… »and to increase “hit rate”  provide a “buy” button in appropriate places!

The Shopping System Back End n The components that communicate with the remote web server:  relational database holding product, transaction, and possibly customer data  server scripts to manipulate that data, including… »connectivity string(s) to enable scripts to interact with database »SQL statements to query fields and tables n Often regarded as “the boring bit!”  but should all work perfectly, and never really be noticed… »“ transparent to the user”

Linking Front-End and Back-End n Where the shopping cart system becomes invaluable…  cart data held locally for quickness  cart display gives customer immediate feedback on what has already been bought Front end (products on view) Processing allowing purchase Cart data On-line invoice

Payment & Fulfillment n The “after ordering” or “customer service” web pages (especially important in B2C)  reports progress of order, points out problems  should “look good”, to maintain the customer’s confidence in the company as an online vendor n Consist of...  secure payment pages, that connect to a clearly identified (logo?) merchant services provider  corporate “thank you” page  system to customer with information concerning the acceptance & progress of their order

Shopping Cart Logic n The cart itself has to:  collect the order using information gathered by mouse clicks on shopping pages  store & process the order data  prepare online invoice  display invoice for customer  request some means of payment

Using local datasets & cookies n E-commerce is very big business  no expense spared in providing the best customer experience…  aim for rapid interaction, good security, minimal customer effort, fast response  in this case “small is beautiful”, because small means fast… n Makes sense to make shopping cart dataset (“VIEW” of database) as simple as possible

Typical B2C shopping cart system… (1) n Web page displays live data from organisational web server n Cart:  customer selects product(s) and qty using hyperlinks/buttons on product pages  data from selections stored locally on cart dataset  new page created to display cart data  totals, including VAT automatically displayed on on-line order (not yet an invoice – by convention, no customer details included on dataset)

Typical B2C shopping cart system… (2)  customer chooses to buy (or not!) directly using button/hyperlink on on-line order  System requires customer to either: »log on so existing customer record can be accessed »supply new details on a new (preferably secure) web form, and details need to saved securely before proceeding  system presents on-line invoice, and requests payment

Typical B2C shopping cart system… (3) n The invoice has to comply with EU legislation (other legislation, for purchases outside the EU  no further charges beyond this point…  terms & conditions clearly displayed  customer personal data suitably protected n Hyperlink/button from online invoice to payment & fulfillment pages

resource: essential features of a shopping cart n Default shopping pages supplied - readily customizable  e.g. buttons, text, pictures etc.  important for meeting client needs! n Good practice:  enforces reading of “terms & conditions”  automatically displays shopping cart contents whenever forms data is added  captures customer data later in the process  handles tax and shipping for overseas customers  scope to link with banking network via secure payment systems, with built-in links »security of financial data handled by a trusted third party!!!

System Architecture (if interested…) n Very confusing because it uses several instances of index.html  root folder file boots the main system file, in the system folder  causes the system to be loaded »a web page informs that system is being loaded…”  finally, the home page is loaded from the pages folder n Product Data  saved within product pages as JavaScript arrays n Shopping Cart Data  set up on local hard disk as a cookie »NOT a session cookie »data remains after user has logged out, and system has been switched off!  cookie values put there by customer clicking on a pay button n Cart page itself created by calling a JavaScript routine, and placing cookie values into a HTML table  other features are also JavaScript routines

“Bookshop”– e.g. of shopping system design n Very simple design...  enables ordering of a book in at least two ways »text or image n Easy navigation:  forward (buttons at the bottom of the page)  back (hyperlinks at top and bottom) n Buttons at the bottom of the page:  Order this Book  3 Copies for 2 Offer  Review Basket

“Bookshop” Site design (more…) n Clicking on either the image of the book or the order button displays “shopping basket” n Features to note:  heading - reflect corporate image, etc.  buttons at top of every page - good navigation  hyperlink on product pages for more detail  option to go to payment page - cashier  “remove item” check box  separate form: on-line invoice  bullet pointed help

“Bookshop” Site Design On Screen Invoice n Dealing with Customer Details…  Based on “buy” hyperlink »i.e. customer commitment to a purchase  customer has to appropriately complete name, address, address fields (all validated) n “Next” from customer details selectively provides an invoice:  if customer details are not in the right format… »customer details page will instead be called n On screen invoice page:  includes all extra charges (e.g. shipping and VAT)  pay button to go to “merchant” site for payment

Handling Payment n After payment, fulfillment…  thank you page  then a goodbye page…  and (optionally) an confirmation of order... »independent of whether payment has been accepted… n Not bad for mid-1990s!!  (wonder how much the developer was paid…)

Security and E-commerce n Focused mostly on financial transaction  system needs to be designed so financial data cannot be tapped into en route or on either client or server computer  quite a challenge for a developer… often passed to 3 rd party provider »e.g. PayPal, WorldPay n However…customer requirement to supply personal data  need for protection of such data under EU legislation »many systems based on US model (no data protection legislation). Note that was British »still on “catch up” as regards shopping cart design…

Developing your own cart n Many possible solutions… n Many “skeletal” shopping cart systems already created  shopping cart components that just need to be assembled into a unique system »Charon Cart (asp) »Webthang (asp, asp.net) »WebXel (asp.net) n Still available for a “fall back” position

Developing a Shopping Cart with Visual Studio n Need data source controls & general controls to coordinate button logic n Also needs HTML  tables now frowned on by (some) client-side developers  really useful for server-side n Best data source control for working with HTML tables: n Best data source control for working with HTML tables:

Use of ASP:Repeater n Only limited use of a wizard  manual use of and  manual use of and  Syntax (hard coded): » »

Making a Start… n Which comes first… the chicken or the egg? n i.e. Which to develop first… database or server scripts? n Generally considered to be a good idea to start with the data…  that means: »identifying the ENTITIES »modelling their relationships »Adding the ATTRIBUTES

The Data Model for a Shopping System n Basic Entities:  Product  Customer n Link Entities:  Order  Order-Line n All four need to be logically linked in an appropriate way…

Possible basic data (entity) model for a Shopping System customer Order line order product Need to add 1-many ends of relationships Where does Shopping Cart fit in?

Possible Data Model with entities/attributes added

Creating the Physical Database from a Logical Design n It works on paper… n But a practical working model is needed:  create database tables  link them together, according to the Entity/relationships/attributes model you created  populate the tables with trial data of an appropriate format  make sure all is consistent…

Which Fields are necessary for the shopping cart? n These will be used as a dataset, held as a cookie on the local machine  needs to be the minimum number  needs to be non-sensitive data (held on local machine) n Which data is needed for a shopping cart?  the corresponding fields are what is required…  over to you… (something to do in study week)

Justifying the Cost of a Shopping Cart System n Many ways to create a shopping cart system:  how does the business know what is good value for money?  Internet or cloud-based systems may look attractive… »may appear to be cheaper »may appear to manage everything for the business  how well does outsourcing fit with »business objectives »legal & regulatory requirements

Business Benefits of B2C n Can generate more sales…  increase revenue n BUT how can B2C e-commerce cut costs?  data input is done by the customer »help from the shopping pages and shopping cart  data output is presented directly on the screen  cuts greatly on administration…

What makes a successful on-line B2C E-commerce site? n Needs to attract customers  and retain customers…  measured through hit rate n Good design principles:  common “look and feel”  shopping pages tasteful, but not over-elaborate  shopping system user-friendly & works efficiently n Successful e-commerce websites save/make the vendor an awful lot of money!  potentially huge ROI (wise developer requests a cut?)

B2C E-commerce: Keeping the customer satisfied… n All transaction data has to be presented digitally on-screen…  order forms (no opening envelopes and processing an order from paper)  invoices (no need to print them, put them into envelopes, or send them off by post) n Huge potential cost saving, but the screen interface must be designed FOR THE CUSTOMER!!! n If the customer is not comfortable with it, they may not buy… and may not return

Internet Marketing n Huge growth area…  Whole conferences devoted to e.g. “Technologies for Marketing” n In the early days of e-commerce, the rate of hits on website WAS the value of the company (!)  now revised downwards, but same principle applies… »formula based on (say) every tenth visitor will be a customer… n Best ways to attract visitors:  use search engines effectively  advertise URL effectively using a diverse range of media

Promoting the Website n However excellent the site may be…  the business will get no benefits from increase in sales if there are no visitors (!) n MANY ways to maximise the number of visitors to a site… n Suggestions?

Ways to Improving Hit Rate n Many applications available  Some very simple »counters »meta name generators »date/time/special effects, etc. (client end) »links to code located on other sides (e.g weather forecast) »provide more features for the site n any number of possibilities  Others more technological/sophisticated : »example: ASP Sheriff

Effective Use of Search Engines n Objective: to use appropriate techniques to cause the search engine display your site in its “top ten”  Search Engine “spiders” »crawl round the net looking out for keywords in web pages »retrieve keywords and corresponding URLs »take keywords back to the search engine database »Program automatically adds the lists of keywords to the database n right keywords MUST be presented to the spiders

Effective Use of Search Engines (2) n Longer-term Search Engine ranking also based on:  hit rate  number, and activity, of external links on site n Technologies available to help boost rankings  whole discipline e-marketing technology focuses on improving hit rate…  Like e-commerce itself this is now VERY BIG BUSINESS!