User Story

In order to easily decide wheter if a product is available to puschase, as a user, i want to easily see what i've searched for and the number of products

Acceptance criteria:

• Feature must be accessed from the header

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive
• Functionality

User Story

In order to receive a confirmation email after checking out, as a shopper, i want know the confirmation of what i've purchased

Acceptance criteria:

• Include all the order data and delivery information

Tasks

• Design layout
• Create HTML and CSS code
• Functionality

User Story

As a user, i want to subscribe to a newsletter in order to receive news, discounts and deals

Acceptance criteria:

• Subscription form displayed on home page
• Re-direct the user to home page
• User receive a confirmation email
• New subscriber is created

User Story

In order to find the best-priced or best-rated product in a specific category
or sort the products in that category by name, as a shopper, i want to be able to short products by name in a specific category

Acceptance criteria:

• Feature must be accessed from all product pages
• Feature must be accessed from burger menu

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive
• Functionality

User Story

In order to checkout quickly and with no hassles, as a shopper, i want to easily enter my payment information

Acceptance criteria:

• Easy and clean checkout form

Tasks

• Design layout
• Create HTML and CSS code
• Functionalty

User Story

In order to adjust quantity of indicidual items in my bag, as a user, i want to easily make changes to my purchase before checkout

Acceptance criteria:

• Add increment and decrement quantity buttons
• Update item stock when item quantity changes
• Added a remove item button to fully remove it from the bag

Tasks

• Design layout
• Create HTML and CSS code
• Functionality

User Story

As a user, i want to see all the products on a single page

Acceptance criteria:

• Display 3 products per row
• Products card contain product image link, product title and price
• Products image link direct the user to the correct product detail page

User Story

As a user I can view the navigation bar on every page so that I can navigate easily around the application.

Acceptance criteria:

• Navbar displayes at the top of all pages
• Navbar displays different icons/links depending on whether a user is logged in or logged out
• All links work and take the user to the correct url
• Hamburger menu present and working on screen sizes and below

User Story

User Story

As a store admin, i want to delete products from the site's interface

Acceptance criteria:

• Display detele link on the products card only if user is staff user
• Delete the product from the page and dababase

User Story

provide value content and and make a good firts impression, as a developer, i can create a hero image section with value information and call to action

Acceptance criteria:

• 2 columns layout
• 1 Images bunner
• 1 static image
• Imges linked to products page

Tasks

• Design layout
• Choose images
• Create HTML and CSS code
• Fully responsive

User Story

In order to select products to purchase, as a user, i want to see a list f products

Acceptance criteria:

• Products rendered on cards
• Cards contain product image, title, product name and price
• 3 products per row on Desktop screens
• 2 products per row on tablets and mobile screens

Tasks

• Design layout page
• Design layout product cards
• Create HTML and CSS code
• Fully responsive

User Story

In order to to view an order confirmation after checkout, as a shopper, i want to verify that i haven't nade any mistakes with an order confirmation

Acceptance criteria:

• Include all the data from the order and delivery information

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive

User Story

As a user, i can navigate through different categories

Acceptance criteria:

• Display categories link on home page
• Directs user to the correct products category page

User Story

As a user, i can the products i added to my shopping bag all together, modify the quantity or remove them from the bag

Acceptance criteria:

• Display one product per row
• Decrement button disabled if quantity is 1
• Increment button disabled if quantity is 3
• Increment and decrement quantity by one
• Product's price is incremented or decremented acccordingly to the quantity of the products
• Remove link removes all the products quantity
• Total grand displays the sum of the total of every product row
• Any quantity modification will modify the product stock in the database
• Checkout button directs the user to the checkout page

User Story

As a user, i can see the lates products arrived into the store

Acceptance criteria:

• Display carousel on home page
• Carousel slides correctly when clicking on indicators
• Products image link directs user to the corret product detail page

User Story

In order to navigate through the site, as a user, i want a nice and minimalist navbar

Acceptance criteria:

• Must contain:
  1. Logo
  2. Searcher
  3. Profile icon link
  4. Wishlist icon link
  5. Cart icon link
  6. Expandable burger icon with categories menu

Tasks

• Design layout navbar
• Design logo
• Create HTML and CSS code
• Fully responsive

USER STORY TESTING

As a (returning) user I can log in with my authentication credentials so that I can access all features available to signed up users.

Acceptance criteria:

• Link to login form present in navigation bar
• Upon logging in, all functiinality is availabe to logged in user

User Story

In order to provide value content, as a deveoper, i can provide value information about shipping, returns and subscriptions

Acceptance criteria:

• 3 columns layout:
  1.Shipping
  2. Returns
  3. Subscriptions(add call to action button)
• Elements must be over 300px height and width
• Background images if possible or nice icons instead

Tasks

• Design layout
• Choose images or icones
• Create content with value information in each element
• Create HTML and CSS code
• Fully responsive

User Story

As a user, i want to enter my delivery address and make a payment to complete the order

Acceptance criteria:

• Display a form with all the fields required
• Order will not be submitted if any required field is empty or misentered data
• If the user is authenticated and previously saved delivery information, this data will fill the form fields automatically
• Order summary is displayed
• Credit card validation works when entering wrong card number or data.
• Sing in /Sing up links whenuser is not authenticated direct the user to the correct page
• If order is made successfully the user is redirected to the success checkout page
• If order is made successfully the user receives an email with the order details

User Story

In order to find a specific product i'd like to purchase, as a shopper, i want to search for a product by name or description

Acceptance criteria:

• Feature must be accessed from the header

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive
• Functionality

User Story

As a user, i want to contact customer service if any issu with my order happened or any other queries.

Acceptance criteria:

• Link in shown on the footer
• Link directs the user to the contact page on shows a form
• Form is submitted if all fields are filled up
• Display a success message if form is successfuly submitted
• Link to go back to home page directs the user to the home page

User Story

As a store admin, i want to edit products from the site's interface

Acceptance criteria:

• Display edit link on products card only if user is staff user.
• Categories and subcategories options are displayed on a select element
• Form is not submitted if required fields are not filled
• User can change product images uploading the files from any device
• User is redirected to products detail page if form is valid
• A toast is displayed with a message to inform the user the changes succeeded

User Story

In order to notify me after every action or purchase thoughout my activity, as a shopper, i want to receive notification messages

Acceptance criteria:

• Messages will be displayed under the navbar taking the screen width

Tasks

• Design layout
• Create HTML and CSS code
• Functionality

User Story

In order toensure i don't select the wrong product, quantity or size, as a shopper, i want to easily select the size of a product when puschaising it

Acceptance criteria:

• Product sizes must be rendered on the product detail page as cleand as possible to ease selectection
• Unavailable sizes will be desabled and crossed out

Tasks

• Design layout
• Create HTML and CSS code
• Functionality

User Story

As a user, i want to have access to a product detail page in order to know more about the item and add it to the shopping bag

Acceptance criteria:

• Display product multi images and change on click
• Display all product sizes
• Disable sizes out of stock
• Show product description and material details
• Add to bag button adds product to the bag only when a size is also selected
• Redirect the user to product detail page after adding an item
• [-] A toast is displayed to confirm product is been added.

User Story

In order to to identify product description, price, product rating,
product reviews, images and available sizes, as a shopper, i want to view individual product details

Acceptance criteria:

• Poduct detail page must contain:
  1.Main product image
  2.List of product images
  3.Sizes
  4.Add to wishlist button
  5.Add to cart button
  6.Product description
  7.Product details
  8.Subscription link
  9.Could have a carousel with deals or products of interest

Tasks

• Design layout
• Desable unavailable size choices
• Design buttons
• Create HTML and CSS code
• Fully responsive

User Story

In order tto provide value information , as a developer, i can create a nice footer in which include links to pages with value information

Acceptance criteria:

• 3 columns layout in wich include:
  1.FAQs
  2.Terms and conditions
  3.Refounds and Returns
  4.Custome service
  5.Testimonials

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive

User Story

In order to find the best-rated or best-priced products accorss broad subcategories
such as "Low heel", "High heel", as a user, i want to sort multiple products or categories simuntaneously

Acceptance criteria:

• Feature must be accessed from all product pages
• Feature must be accessed from burger menu

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive

User Story

In order to provide value content, as a developer, i can create a categories setion with nice pictures , and a carousel of new products for the new season

Acceptance criteria:

• 3 columns layout for categories images
• Images linked to category page
• Carousel of new seasson products

Tasks

• Design layout
• Design and choose type of products carousel
• Choose categories images
• Create HTML and CSS code
• Fully responsive

User Story

As a user, i want to have accecs to a further information about the site's private policy, returns and refounds, as well as FAQs

Acceptance criteria:

• Footer is displayed on every pages at the bottom.
• Links displayed on footer
• Links direct the user to the correct page

User Story

As a store admin, i want to add products from the site's interface

Acceptance criteria:

• Display Management link on the navbar only if user is staff user, and this direct the user to Add product page
• Categories and subcategories options are displayed on a select element
• Form is not submitted if required fields are not filled
• User can upload product images from any device
• User is redirected tothe product details page

User Story

In order to to feel my personal and payment information is safe and secure, as a shopper, i want to confidently provide the needed information to make a purchase

Acceptance criteria:

• Stripe as payment platform
• Ask estrictly the informtaion needed for the payment

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive
• Functionality

USER STORY TESTING

As a user I can access the Sign Up link so that I can create an account and access all features available to signed up users.

Acceptance criteria:

• Link to Sing Up present in Sign In form page
• Once the user is singed up, they are re-directed to log in page
• A user account/profile is created

User Story

As a (logged in) user I can access the log out option in the navbar so that I can log out of my account.

Acceptance criteria:

• Link to Log Out is displayed in navbar if user is logged in
• Clicking link logs user out

User Story

In order toidentify the total cost of my purchase and all items i will receive, as a shopper, i want to view all the items in my bag

Acceptance criteria:

• Items will be rendered per row and will show:
  1.Item image
  2.Item title
  3.Item size
  4.Item sku
  5.Item price
• Bag page will show the total of all the items in the bag

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive

User Story

In order to find the best-rated or best-priced products accorss broad categories
such as "sneakers", "boots", as a user, i want to sort multiple products or categories simuntaneously

Acceptance criteria:

• Feature must be accessed from all product pages
• Feature must be accessed from burger menu

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive

User Story

In order to easily identify the best rated, best priced, and categorically sort best products, as a shpper, i want to be able to sort list of products

Acceptance criteria:

• Feature must be accesed from all product pages
• Feature must be accessed from the burger menu

Tasks

• Design layout
• Create HTML and CSS code
• Fully responsive
• Funcionality