E-Commerce Site Project Overview


This quarter, you will be creating a small, e-commerce-type site that solves a business need. Your ‘client’ is a small business that sells a product or service. They want users to be able to customize their orders so they (the users) can get exactly what they want. You will create a JavaScript enhanced front-end to the e-commerce site. Typical back-end functionality (payment processing, data storage, login/log out, etc.) will be mimicked with JavaScript. Actual server side coding is outside the scope of the class.

You will design a site that includes the following features for your ‘client’:

  • Login/logout
    • The login/logout will be hard coded, versus checking credentials against a database, to present the concept.
  • Payment and shipping information form
    • Read/write form data
    • Validate form data
    • Provide user feedback
      • Validation errors¬†highlighted
      • Confirmation message
      • Disclaimer message
  • Shopping cart
    • Add/remove items
    • Data stays persistent (cookies)
    • Total price calculated
  • Product list view
    • Displays list of items sold on site
    • Product list information read and outputted via JavaScript
    • Product list created as array or custom objects
  • Product view
    • Displays details about product
    • Allows customization of product order. For example:
      • Quantity
      • Color
      • Size
      • Add ons
    • Product price calculated based on user customization choices
    • Product data read from XML file and stored in custom object
      • This is to test reading data from another file and mimics retrieving data from a server technology like PHP
  • Shopping recommendations
    • Part of product view page
    • “You might also like…”
    • 3-4 randomly chosen products from product list

You are also responsible for creating the brand of the site (business name and visual design), along with determining the product sold and the target audience.


This project is broken up into four smaller projects or phases. Each phase will be assigned in its time. Links to each of the project’s assignments are displayed below:

Project 1

  • Project Concept
  • Payment form page (HTML)
  • Product View page (HMTL and JavaScript)

Project 2

  • TBA

Project 3

  • TBA

Project 4

  • TBA

Process Book

The process book is the compilation of process documents created over the course of the project. In this class we will focus more on prototyping, wireframing, and flowcharting and these documents will constitute the majority of the process book. The process book will be assigned towards the end of the quarter. If you keep up with your documents along the way, the process book should be a breeze to complete.

Additional Assignments

These assignments are persistent for each phase. Specifics are given with the relevant projects.

  • Paper Prototypes
  • Flowcharts

Comments are closed.