!

Detailed Specs
The Basics
Elance Project Title
Ajax-powered simplistic e-commerce site (programming only)

Basic Description
I’m looking for a provider to program a simplistic e-commerce site that sells bottled drinks. The key to
the site is an online, AJAX-powered page that allows users to drag and drop their drinks into a virtual
box. See mockup of intended end-result at www.penndrinks.com/preview/.

Provider must have experience with AJAX. The site’s functionality will somewhat resemble this site:
http://www.panic.com/goods/.

Important Notes:
- All the page designs have already been created and Photoshop files will be provided to provider
- Payment processing via Google checkout
- Back-end drink/user/order/stat management needed (MySQL database)
- Possible future projects if satisfied with this one

To be completed within 3 weeks. For a clearer understanding of the business, see old/non-functional site
at www.penndrinks.com.

Skills/Knowledge Required
AJAX, SQL, PHP (preferably), Google Checkout integration

Long Term Goal / Possible Future Projects

• “Subscription” service where boxes are automatically ordered on a regular basis (prob monthly),
but contents of boxes could change
• Larger network of sites—PennDrinks, HarvardDrinks, etc.—with same site design but different
logos; combined massive backend

General Design Feel

• See http://www.penndrinks.com/preview/ for mockup of main drink-adding tool
• Similar design to www.panic.com/goods/
• AJAX heavy (like an online app)
• KISS = Keep It Simple Stupid

Pg 1!
! Detailed Specs
Page Descriptions
We will provide the page designs in Photoshop format. We will email you the Photoshop files and would
like you to add the following functionality to the specified pages below.

Front-End Pages
1. Front Page
a. Ability to edit a block of text from the back-end
b. Circles in logo should be animated (Flash?) so that the liquid jumps around (?)

2. Drink Adder (AJAX heavy)

a. Ajax-powered collapsible side menu listing drink categories and images of the drinks
underneath. User can click the headings to expand/collapse each section. (example here)
b. Drink options and which category they
belong in should be retrieved from an SQL
database
c. Drinks’ images and which category they
belong in should be managed from the
backend
d. Slider bar indicating how many drinks should
be moved with each drag (1 to 20) – live
updating via Ajax (example here)
e. Virtual Box (main section)
i. “Virtual box” showing 20 slots for
drinks, filled as drinks are dragged in
(see right)
ii. Box with live count of how many
drinks left to fill (i.e. 17/20, to right)
iii. “Drag to remove” drinks area
iv. “All done” button: activated once a
box is full (then added to “My Boxes” page)s
v. Editable box
f. Pricing distinct to type of drink (i.e. soft drinks are $20, water is $10) and prices
changeable in admin

3. My Boxes
a. View boxes
b. Rename boxes
c. “Open” (aka edit) box
d. Delete box
e. Change box quantity
f. Checkout button

4. Payment Processing
a. Confirm box order
b. Shipping & billing info (filled in automatically if user has previously entered info)
c. Credit card payment via Google Checkout
d. Order confirmation page & confirmation email

5. Order History
a. List of past orders with little lights indicating status
b. Click an order to see order info (pop up on right)

Pg !2
! Detailed Specs
c. Status is updated from admin and from Google Check out

6. Account Info
a. User can fill in as much as he/she wants to (shipping, billing address, etc.)
b. Change email / change password
c. Show address on map & visually show which zone they are in (?).
d. Email preferences

7. Company Info
a. Google map showing delivery zones
b. Enter address to see if you are within the zones (and which one) (?)

8. User registration / log-in

a. Only email and password required
b. Confirm email
c. Forget your password?

9. Polls/Surveys
a. Simple polls (i.e. “what type of drink would you like?”) manageable in admin

10. FAQ
a. Categorized list, editable via admin

Back-End / Admin
1. Manage drink categories (add/edit/delete) and their prices (i.e. $20 for soft drinks)

2. Manage which category drinks are in (i.e. Coke is a soft drink)

3. Replace a drink’s image by uploading a new one

4. Manage orders
a. See if payment was received (querying Google checkout)
b. Easily edit expected delivery date (ability to apply to multiple orders at once)
c. Change status of 1 or more orders at once
d. Generate printable list of orders to deliver, sorted by zone # (Google Maps? i.e. 1, 2, 3)
e. Generate printable label to apply on boxes with order info and picture of box contents
f. Text message when sent to delivery (?)

5. Manage users
a. Reset password
b. Mass-message users (?)
c. Export user info to XLS (?)

6. Statistics
a. Graph of web traffic over time
b. Graph of user sign ups over time
c. Integration with Google analytics (?)
d. View graphs of diff types of drinks ordered over time
e. View graphs of different categories of drinks ordered over time
f. Exportable to XLS (or CSV)

7. Manage administrators & keep track of who did what (i.e. change order status)

Pg !3
! Detailed Specs
8. Add/edit polls and view their results

Terms
Time
• Rapid development schedule, as follows:
o Week 1: 8/1-8/7
• Clarification of specs
• Mockups of all pages
• Initial versions (especially of Drink Adder)
o Week 2: 8/8-8/14
• Working versions of all pages
• Functioning backend that updates front end
o Week 3: 8/15-8/22
• Testing/ QA / Improvements
• Completed by August 23

Payment
• 25% on appointment/selection
• 25% on halfway completion (all pages functioning)
• 40% on completion
• 10% one week after uploaded to live server
• $100-300 bonus depending upon satisfaction upon completion (?)

Communication
• Daily/nightly communication via email and AIM/Skype
• Expected response time to email <8 hours

Future
• Many possible future projects if satisfied with this one

Pg 4
!
! Detailed Specs
Other Stuff
Things to Add (but where?)
• Can do everything without logging in (all sites viewable)…except once you want to save a box,
then it asks you to create an account and saves the box you were working on in that account
• Mixed box idea
• Zone explanation/further integration

Random ideas
• Little icons next to categories, ie. “ICON Soft Drinks”
• Total health content of boxes
• For Box Management page
o Share with friend (?) ! click a button, enter an email, and that person can add the box to
their account (might be overkill)
o Count of how many times ordered (?)

Pg !5