PrintCrate

Introduction

A full ecommerce website built in Django for purchasing of 3D-printed models.

The target market is primarily customers that require designed pieces to fulfil niche requirements, products that may not be available as lone pieces elsewhere (e.g. spare parts) or customisation of existing model dimensions to suit their purpose (e.g. clean attachment to desks of various thicknesses without screw-fixtures).

The webshop boasts a modern and intuitive shopping experience, providing customers with options to purchase from standard stock items or request commissions via contacting the site owner. The live deployment is available here

---

Table of Contents

• PrintCrate
  • Introduction
  • Table of Contents
  • User Experience
    • Target Audience
    • User Stories
      • Customer Stories
      • Customer Story Fulfilment
  • Design & Styling
    • Colour Scheme
    • Wireframes
      • Homepage
      • Register Page
      • Login Page
      • Products Page
      • Contact Page
      • About Page
      • Homepage
      • Register Page
      • Login Page
      • Products List Page
      • Product Detail Page
      • Contact Page
      • About Page
      • Cart Page
      • Checkout (Shipping) Page
      • Checkout (Payment) Page
      • Error404 Page
      • Error500 Page
  • Page Features
    • Home
    • Products List
    • Product Details
    • About PrintCrate
    • Contact
    • Register Account
    • Login
    • Logout
    • Cart
    • Checkout
    • Contact Us
  • Data Modelling
    • User Model
    • Products Model
    • Shipping Information Model
    • Order Detail Model
  • Testing
  • Deployment
    • Prerequisites
    • Running this project in a local environment
    • Deployment of this project to Heroku
  • Technologies Used
    • Libraries
    • Tools
    • Databases
  • Credits
    • Image Sourcing
    • Acknowledgements
      • Disclaimer

User Experience

Target Audience

• Potential buyers of the existing standard product range.
• People with product requirements that require specific customisation.
• People searching for 3D-printed products.

User Stories

Customer Stories

Key objectives/requirements for site users.

1. As a new user: I want to create an account.
2. As a returning user: I want to login to my existing account.
3. As a user browsing products: I want to navigate standard products.
4. As a user interested in a particular product: I want to expand details of a specific product to view a description.
5. As a user interested in the background of the company: I want to read more about the business.
6. As a user purchasing a product: I want to add a product to my cart.
7. As a user purchasing a product: I want to know if there is sufficient stock available for my order.
8. As a user purchasing a product: I want to view the products currently in my cart.
9. As a user reviewing my cart: I want to alter quantities of products in my cart.
10. As a user reviewing my cart: I want to remove a product from my cart.
11. As a user finalising a purchase: I want to provide shipping information and pay for my purchase.
12. As a user with finalised purchases: I want to view all of my ordered products.
13. As a returning user: I want to be able to update my account details if required.
14. As a satisfied customer: I want to be able to share PrintCrate on social networks.
15. As a development-inclined visitor: I want to view the site's GitHub repository.
16. As a customer requesting a non-standard model or with an additional query: I want to contact the site owner.

Customer Story Fulfilment

1. From any page of the PrintCrate site: selection of the "Register" button in the navigation bar loads a registration page. The registration page displays a form with validation. If the form is populated with invalid values the registration is rejected upon submission with an error message detailing why registration has failed. Upon population of the form with valid values the browser redirects away from the register page with a success feedback message displayed.
2. From a logged-out state, access to the "Profile" or "Checkout" pages is restricted. The login feature is accessed by selecting "Login" from the navigation bar, which loads the login page. The login page displays a form with validation. If the form is populated with invalid values the login is rejected upon submission with an error message detailing why login has failed. Upon login success the user is redirected to their account page with new navigation options and success modal indicating the updated user state.
3. From the site homepage, selection of the "Browse Products" button in the jumbotron or from the navigation bar loads a page of all products sold by PrintCrate. If the number of items exceeds 15 the products are split across multiple pages (pagination) to account for load times, especially if hundreds of items become available in the future.
4. Having located the product I am interested in, either by finding it as a showcase product on the homepage, in a mix of all products, or as a result of the search function: selecting either the "Product Details" button or the product's image redirects to display a more detailed view of the target product. The notable addition of the product detail page is the description and ability to add a product to a cart.
5. Selecting the "About Us" button from the jumbotron on the homepage or selecting the "About" navigation bar icon redirects to display a short description of PrintCrate and an accordion display of frequently asked questions.
6. Having located a desired product and accessing the product details display of said product, either iterating the quantity or manually typing the quantity before selecting the "Add" button results in addition of the desired quantity of that product to the cart. Form validation prevents entering a quantity less than zero, non-integers or a number exceeding the quantity of that item in stock. Upon selecting the "add" button, a redirect occurs to view the current cart contents.
7. Upon locating a desired product and selecting the "Product Details" button or the product image to acces the product details: the available quantity of the desired product can be viewed as part of the product information. If a customer wants to place an order in excess of the quantity available they can contact the store owner via the "Contact Us" form as detailed in the "About" page.
8. The current cart contents can be accessed at any time by selecting the cart icon from the navigation bar. If the cart is empty: a modal is displayed to let the user know that the cart is empty and redirects them to view all of the PrintCrate products with a prompt to add products to the cart. If there are items in the cart: the cart contents are displayed with product names, prices and quantities with the total price of all products.
9. When viewing the cart contents with items occupying the cart: the quantity input field is pre-populated with the current quantity of the specific item in their cart. This field can be selected and overwritten by using the selector iteration arrows or by manually typing the desired value. The maximum number this field allows is the available quantity of the product and the lowest number this can be changed to is 0. Upon changing the number from the original cart quantity: an "Amend" button is displayed for the user to confirm their change, upon selecting this button the page is refreshed with their new quantity and total price.
10. Upon viewing an occupied cart contents page: the user can remove an item by either decreasing the quantity to zero and confirming the removal by selecting the "Amend" button or selecting the red cross displayed to the left of any item and confirming removal by selection of the "Remove" button in the triggered modal. In either method, the user stages the removal by either setting the quantity equal to zero or clicking the red cross icon and then must confirm the deletion by selecting "Amend" or selecting "Remove" in the modal, this is designed to minimise instances of customers accidentally removing items from their cart.
11. From the cart contents page, selection of the "Checkout" button redirects to display a shipping information form if the user is logged in. If the user is not logged in they are required to create an account or login to continue with their transaction. The shipping information form is displayed with every transaction as the user may wish to send their purchase to a new address. Upon submission of valid details for the shipping information form: a payment information page is displayed, this reminds the user of the total price of their transacti