This document outlines the design specifications for Project 2. It includes site maps and descriptions for the homepage, product pages, product detail pages, shopping bag, checkout process, and order confirmation page. Key elements include interactive features on the homepage, carousels and scrolling on product pages, size selection and reviews on detail pages, and a multi-step checkout with inline validations and updates.

1. Project 2 Design Specifications
Erik Evangelista

2. Site Map

3. Homepage
Typing in school
input generates
results in
adjacent box.
School toolbar
only appears if
user is logged in.

4. Product page
Long-scroll page.
Header and
sidebar floats as
user scrolls
down.
Carousel on
featured items;
can click on
arrows to scroll
offerings.

5. Product Detail Page
Funneling size
selection.
Uniform-correct
styles marked
with “U”
Keywordsensitive review
window.
Expandable to
see full reviews

6. Shopping Bag
Adding item
activates
shopping modal
+ notification
Wishlist allows
saved items to be
added to bag
when instock/desired.
Inline shipping
calculations

7. Shopping Bag
Adding item
activates
shopping modal
+ notification
Wishlist allows
saved items to be
added to bag
when instock/desired.
Inline shipping
calculations

8. Checkout
Member prompt
for separate
workflows

9. Checkout
Long-scroll
checkout process
Floating checkout
details on the
right
In-line validation
ZIP-code location
validation
Continuing autoscrolls to next
step

10. Checkout
Updating process
window
Order details
updated based
on inputted data
Can scroll up to
previous
checkout details,
or click on
process window

11. Checkout
Final review page
summarises
details in upperright process
panel
Can edit shipping
information and
item quantities

12. Order Confirmation
Continue
shopping returns
user to last
product page or
home page