Please enable JavaScript.

Coggle requires JavaScript to display documents.

FIA1 Task breakdown V2 - Coggle Diagram

- - - - This will contain all of the public comments made on each public design. Each of these entries will link to a design in the designs table
    - - Table that contains the information of all registered accounts and also guest information for when a user does guest checkout.
    - - Contains the information of every mug purchased. This is linked to the transactions table as well. This is helpful when the user is wanting to have a look at their previous transactions and what items they have purchased.
      - This will also help in inventory management
    - - Table that contains all of the saved designs on the website. This includes public designs and other private designs which are registered to an account
    - - This table will contain of all of the transactions made by all of the users. This will have a transaction id which will help in identifying which items in the products table match with each transaction
    - - Table for keeping track of the amount of mugs depending on their size
- - - - The user can preview their design once they have finished designing it
      - They can share their design using social media
      - They can save this design to their account.
        
        They can also upload this design to the designs page and have it publicly available to anyone wanting to see it
    - - They can also view each of the items purchased in this transaction
  - - - In order to protect the user's personal details (name contact info etc.) all of their information will be encrypted.
        
        Symmetric Encryption
        
        Sender and receiver must know the secret key in order to unlock the information. This poses a risk to the information if someone has access to the key when they shouldn't.
        
        Uses a secret key which is applied to the content to change it in a particular way.
        
        Asymmetric Encryption
        
        With asymmetric encryption, two related keys are used (key-pair). One of the keys is available to the public so you can encrypt the data. Then there is another key which is then kept secret
        
        Any message that is encrypted by using the private key can only be decrypted by using the matching public key.
        
        Slower than symmetric encryption; however, you don't have to worry about passing public keys over the internet.
    - - Gurantees to the user that they are accessing the server they are supposed to
        
        Adds a level of trust to the user so that they are more likely to user your site
    - - This is a key part of my site's experience; however, it poses a large security risk if its not maintained
        
        Even checking the file extension can be passed by using a double extension like image.jpg.php
        
        I will also separate the upload file folder and the root folder
        
        The file could be renamed on upload or to change the file permissions; however, I could create a htaccess file that will only allow access to set files preventing the double extension attack
    - - Header that tells the browser to limit the amount of Script executed on the page
        
        Protects against XSS attacks
- - - - Photo Choice (yes/no)
      - Option to upload photo
      - Size of the mug image
      - 'Layout' option of the mug. Whether it is a full wrap-around image or just a plain image
    - - Text Option (yes/no)
      - Enter a string to be added to mug design
      - Text font used
      - Size of the text on the mug
  - - - Delivery Location
        
        Can be the address associated with their account
        
        It can also be a separate address
      - Payment Information
        
        Allows all popular payment methods
  - - - Space
        
        All elements of the shop are spaced out so that the website doesn't feel cluttered.
      - Shape
        
        In terms of shape, buttons and other objects will have curved edges and will generally be more circular.
        
        This gives the website a smoother feel.
      - Colour
        
        A colour scheme will be maintained throughout the entire website ensuring that the pages feel connected and tie in to the brand.
      - Texture
        
        Background images will add texture to the website. Various elements including gradients and shapes will be used to bring contrast to certain elements in order for them to stand out and to not be hidden by the image.
    - - Balance
        
        All page elements will be balanced. The overall design of the website won't be too cluttered ensuring that the main components of the site stand out to the user.
      - Contrast
        
        Contrast will be used to make certain components stand out and to ensure that other less important parts don't get in the way.
      - Proximity
        
        Website elements won't be too close together in order to alleviate clutter on the site.
        
        Certain buttons that are associated to text elements will be close together to almost link them in a way.
      - Alignment
        
        All basic 'body' elements will be horizontal aligned. Repeated elements will have the exact same spacing.
      - Repetition
        
        Basic components like the navbar and the footer will be repeated throughout many pages of the site.
        
        The style of the buttons will also be repeated in order to link the pages together
        
        The same font will be used along with the same font size for various elements.
        
        The colour scheme will also be repeated throughout the entire site ensuring that the pages tie into the brand and the overall feel of the site.
      - Hierachy
        
        More important page elements will be made to stand out using various techniques. Headings and buttons will be more prominent on the page in comparison to paragraph text for example.
  - - - Use of multi-step forms for both registration and the purchase process.
      - Use of button design to indicate to the user when certain options are selected. For example, the border around each mug size option turn to green when it is selected.
    - - Use of confirmation buttons when the user is in the purchase process.
      - Confirmation messages to ensure that the user is always in control
    - - Same colour scheme throughout the website
      - Same font family and font sizes
      - Same button design and similar icons are used for similar actions on the site
    - - All field forms are checked to ensure that the information that the user entered is correct and doesn't cause an error. For example, duplicate username checking, duplicate email checking, and making sure that password entered is the same as the password in the confirm password input.
      - Non-required options are hidden behind buttons just to ensure that the user only has to initially deal with only the required inputs.
    - - All buttons have icons to assist with site navigation. This ensures that the user has to recognise the button based on the icon rather than recall what the button does based on the text.
      - Tooltips are included on certain mug options in order to ensure that the user is in full control and that they are aware of what they are clicking
      - Use of drop-down boxes in order to ensure that the user's input is correct rather than making them have to manually input an option which may cause a mistake
    - - Use of non-technical error messages in order to make the user in control.
  - - - Red for a warning alert (eg: using an email that is already in use by another person)
      - Green if the user did something that they are supposed to (eg: green banner notification for account creation)
    - - This will be helped through the use of constant navigation and user feedback. User feedback ensures that the user is aware of what they are doing throughout the whole process of the site.