Planning

[pope410211]

TIY-Catalog: Team-Badass Plan

---

User Story - Category Search

• Show Results Box - Left side, listing all available categories a user can pick from
• Refine your search option - Left side, under Show Results Box
  • User can refine search based on Item Type, Price, Color, Ordering Options, Location, & Ship-To
  • Users select via check box or entering information
• Product Items Display
  • 3 items per row, Page 1 with a total 14 rows
  • Product images and info box are all the same size
  • Product Details - Image, Price, Seller User Name, Item Title
  • Hover State - Allows user to favorite item and access a hamburger menu to select a user wish list
  • Bottom of page - Page Selector
• User can jump to a specific page of product results
  • Feature/Category List
• Header: "Show results for: "
  • Container:
    with
    • : Includes an links to a specific category
    • Feature/Refine Your Search
  • Header: "Refine you search: "
    • Container:
    • Item Type - Includes
    • with embedded
    • Price - Includes two from low to high, that submits price
    • Filter by Color - Includes linked to specific color result by hexadecimal color
    • Ordering Options - Includes header and like checkboxes
    • Shop Location - Includes header and options of Anywhere, United States
    • Choose a custom location - Input field pops up to replace Anywhere, United States option Submit button after entering custom location, Cancel to exit custom location Ship To - BIG ASS tag featuring countries to ship to Feature/Product Results

      Header: Showing number of results, Sort by option

      - most recent, highest price, lowest price Product Listing: Per page, 3 products per row, 14 rows per page Feature/Product Template

      Image: Square, all products have same size image Product Info: Title, Seller Name and Price below image Seller Name: Link to seller store and product Image: Link to seller store and product Hover state: Heart to click to like product, hamburger menu to select user wish list Container: Listings are inline-block, listings are 3 to a row Feature/Page Selector

      Span: Shop suggestions - lists shop recommendations Page selector: Pagination! Back Button Page numbers Last page number Forward Button Feature/Product Details

      Header Row: Top Left - Image for Seller Store, Links to store page when click image

      Shop Name - Link to Seller Store - Stacked on top of a to 'favorite' a store Includes basic text and a heart icon Hover state: Background made darker when hover Right side of header - Line of 5 evenly shaped boxes, represent for item images on left Box on right lists number of items available in store, hyperlink to store, and every item has hover effect Items left hover darker - opacity black - one on right hovers blue Body - 2 columns, 3/5ths and 2/5ths ?

      Left column - 3/5ths Everything stacks! 100% width for left column Block - includes a 'favorite'

      with heart icon, hover effect - gets darker

      takes up entire height of box, element on right is broken into 2 stacked boxes Boxes on right are about 80% of entire width of block, favorite button 20% ? BIG ASS image of the product img 570 x 570 One button on left, one on right - hover effect on each, change to blue color, inline with image Below image, box of small thumbnail images - alternate pictures of product To right of thumbnail images, a zoom tag and magnify glass icon Tab Row - 3 tabs included, inline-block, no space between tabs Middle tab has star icons Below tab row, border bottom Inactive tabs are darkgrey Right column - 2/5ths BIG section - bordered with faint green, thick border, border radius Category tags assigned to item - 100% width of BIG section Box with two elements - Price and Currency Selector ($ USD) Ask a Question - gets darker on hover Line for quantity - display: block, below is selector to select quantity Below is word 'color', selector for color - placeholder text is 'Select a color'

      • list titled with overview - individual list items take up their own line - block elements? Links for users who have left feedback and favorited item BIG ASS green button below BIG section - Add to cart - hover effect as green gets darker Social box - grey box with thick grey border - two buttons aligned left Favorite button with heart icon, hamburger menu icon, 'Add to' and down arrow, hover effect - darker Below social box, 4 different icons - Twitter, Pinterest, Tumblr, Facebook 'like' BIG ASS green box with thick light blue border - border radius Block level element - Seller store logo, below is Seller Store name, below is Seller location Block elements - 50% width, 2 per line, each element has the following: Image, full width (100% of 50%) Listing Title full width (100% of 50%) Line for the Item Price - green, full width (100% of 50%) Hover effect - Image, Title, Price surrounded by a border, border becomes darker Hover effect - Heart icon to favorite, hamburger menu