PUMA Shoes Website

This website is to let people be able to buy just shoes from PUMA. It allows customers to purchase and scroll PUMA shoes. PUMA's website has a lot more variety while this website only consists of shoes to let customers who want to buy shoes can help minimize the trouble of filtering out to display only shoes. This website mainly eases customers from searching or filtering out things they do not want to see. If a user who is a shoe enthusist, he or she can purchase the shoe easily from this website. Other than selling solely on shoes, users are able to scroll for shoes and collaborations would be placed at the home page to notify customers of the new collaboration.

PUMA is a famous branded company that sells shoes, socks, shirts and pants. However, as many buyers love to have their website customise to their choice, my webste design is able to fit their requirements and that you are able to shop your shoes items easily from the website. This website show PUMA collaboration shoes.

Design Process

The reason why i wanted to design a webpage of PUMA shoes is so that shoe enthusist and customers who wants to only scroll for shoes they do not need to filter out or go around the website to find where they cab scroll for shoes and to find for new collaborations puma have. My webpage let customers know about the latest collaboration and to let user scroll by different category like women, men and kids collection so that they do not need to filter out to find kids shoes. As a user:

• I would want to see the latest collaboration that PUMA so that i could buy them to sell or to keep
• I would want to scroll just a particular category of shoes so that i could find kids shoes or females shoes to scroll and see
• I would want find contact information so that i can contact them when i have any quries
• I would want to know the physical stores so that i could go to the stores to try on the shoes
• I would want to know the physical store type so that i know which is the outlet store so to know where has the most shoe range and stock available

This is a link to my design wireframe for phone version web version

Features

Existing Features

• Navigation bar to let user navigate to different category, home page and about us page
• Able to click on the name below the picture to see the details of the shoes
• Able to select size and quantity
• There is a button at the side for user to click to checkout
• Allows users to fill in their particulars to submit
• User is able to hover around the navigation bar and would have a colour shown when they hover over
• User is also able to see which page they are in as it is of different colour

Futrue Features

• Able to add multiple products
• Able to filter the type of shoes you want to see like to diplay only running shoes
• Able to see the recipt and the details they input after checkout has been processed successfully
• Able to remove products or quantity if added by accident

Technologies Used

• JavaScript - Makes user input be able to capture and display out
• CSS - Design and format website to make it appear nicer
• Google Fonts - Used to make website font nicer
• XD - To do up my wireframe

Testing

1. Women, Man, Kids Page
   1. All products are able to click in
   2. When on mobile the products on each row would be 2
   3. When on laptop the products on each row would be 4
   4. Had issues to align text and image together
2. Indiviual Product Page
   1. There is a back text that is able to click on and will lead you back to the previous page that you was scrolling
   2. Had issues trying to put the discription of the shoes and the right side of the page
   3. There is 2 input boxes one for size and quantity and both input boxes can only input numbers
   4. There is also a button at the buttom name checkout which will lead you to the checkout page
3. Checkout Page
   1. There is a Name text box for user to key their name and if is not more than 2 characters it will produce a error message after clicking the submit button
   2. There is a Phone number input box for user to key their phone number and if is not more than 8 numbers it will produce a error message to tell user to key in a valid phone number and would also make sure that the phone numnbers start with 8/9
   3. The email has a validation for email it needs to include a @ and a .com at the correct position if not user will need to retype the email
   4. All input fields cannot be left blank
   5. Had issues trying to do up the validation
   6. Had issues trying to capture the user input for the quantity and shoe size to display out at the bottom
   7. At the bottom there is the qunatity and shoes size at the bottom after the form
4. Navigation Bar
   1. Had issues trying to resize according to the size page and not move down
   2. Had issues trying to space out evenly
   3. All tab are able to hover over with color and also able to show the current page you in
5. About Us
   1. The details of each individual store location are collapse
   2. Details of contact is also collapse
   3. The email is able to click and will lead you to be able to send to the email
   4. The icons at the side are their social media account and the names
   5. Names of the social media account is able to click and would lead you to their social media page
   6. On mobile the icons would move to the bottom of the page

Credits

Content

• Information of shoes was copied from puma website
• Histroy of PUMA was copied from wikipedia
• About us page information was copied from puma website
• Hover and Navigation Bar from w3school

Media

• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• Puma shoes
• FaceBook icon
• Twitter icon
• Instagram icon
• Pinterest icon
• Youtube icon
• Checkout Page GIF

Acknowledgement

• I get my inspiration for this project from PUMA website